?
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
?
743 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
  • 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

593 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