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
708 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
Comment Utility
Take the display:inline-block off of the #footer
0
 
LVL 4

Author Comment

by:bcolladay
Comment Utility
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 500 total points
Comment Utility
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
 
LVL 4

Author Comment

by:bcolladay
Comment Utility
<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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 4

Author Closing Comment

by:bcolladay
Comment Utility
Great, perfect solution.
0
 
LVL 16

Expert Comment

by:s8web
Comment Utility
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
Comment Utility
Happy coding :)
0
 
LVL 4

Author Comment

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

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

744 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now