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
724 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 500 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Technology Partners: 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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

717 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