?
Solved

IE8 CSS - DIV doesn't grow to height of the main DIV if the content has form fields

Posted on 2010-08-13
8
Medium Priority
?
726 Views
Last Modified: 2012-05-10
https://test.pdswebpro.com/newpatient.aspx

The above test site page will demonstrate the problem in IE8 only (IE 7 works fine)

If the main content area is taller than the left DIV "AND" it has form fields, the main content window will not open to the full height of the content.  If you mouse around or tab around in the DIV, the main DIV will open.  Also if you are in the IE Developers tools and change any attribute in the offending DIV it will open.  Do not let this fool you.  If I make the same change to the actual style sheet it doesn't change anything.

The DIV that is not growing is called "middle"
0
Comment
Question by:bcolladay
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 33429620
Take the display:inline-block off of the #footer
0
 
LVL 4

Author Comment

by:bcolladay
ID: 33429682
Took it off, it was unnecessary but didn't change the problem.  The problem debugging this in the developer tools is, that if you make any changes it appears to fix it.  But much like the fact that if you mess with the mouse it also expands the div, it doesn't fix the initial display problem.  I left the display:inline-block off the footer, you can see it will still be messed up if you close the page and bring it back up.

Also try the navigation links to the left, it does weird things too if you click each one...they are self links
0
 
LVL 16

Accepted Solution

by:
s8web earned 2000 total points
ID: 33430049
Looks like you need to clear your floats. Insert this before you close the div that your form is residing in:

<div style="clear:both"></div>

If you're running out of time, and that doesn't work, you can reach for the holy hand grenade and force ie8 to render like 7 by putting:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Under your <head> opening tag.

0
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
LVL 4

Author Comment

by:bcolladay
ID: 33430119
<div style="clear:both"></div>
 Is the winner!  Great solution.  I've never heard of this.  Gues I will have to get my CSS book back out of the closet.
0
 
LVL 4

Author Closing Comment

by:bcolladay
ID: 33430125
Great, perfect solution.
0
 
LVL 16

Expert Comment

by:s8web
ID: 33430142
Other issues:

You have a unordered list nested inside a span tag on line 38.

Line 53 has a h1 nested in a span.

You're applying an id to the head opening tag - ?

Some of your ID's start with an underscore. ID's and class names must begin with a letter.
0
 
LVL 16

Expert Comment

by:s8web
ID: 33430154
Happy coding :)
0
 
LVL 4

Author Comment

by:bcolladay
ID: 33430168
Yep, this is a pretty messy CMS I wrote, lots of things "I'll go back and fix that later..." thanks.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question