2 replies [Last post]
johngalt
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2006-05-09
Posts: 2
Points: 0

OK, I have a very simple layout here that is giving me fits in IE.

Here's my CSS:

body {
margin: 10px 0px 0px 10px;
}
#navigation {
width: 780px;
height: 37px;
background-color: gray;
border: 1px solid black;
}
#spacer {
width: 782px;
height: 5px;
background-color: white;
border: 1px solid red;
margin: 0px;
}
#index {
width: 782px;
height: 421px;
background-color: black;
}
#footer {
width: 780px;
height: 57px;
border: 1px solid black;
background-color: gray;
}

And here's my HTML (Using XHTML Transitional, but I get the same problem with Strict as well):

<div id="navigation">

</div>
<div id="spacer">

</div>
<div id="index">

</div>
<div id="spacer">

</div>
<div id="footer">

</div>

So basically I am calling each div after each other, with the spacer DIV used to seperate the middle div from the top and bottom. On Safari/FF/Camino, the spacer div is 5px tall as it is defined. In IE6, it looks like it's about 15-20 pixels in height. Any ideas? This is driving me nuts!

johngalt
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2006-05-09
Posts: 2
Points: 0

Figured it out!

Thanks to a post on the web, I figured out that IE 6 has a bug that sets the height to a min. of 20px, and the best way to overcome it is to add a property of overflow: hidden.

God, I hate IE and wish it would disappear from the face of the earth.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Resolved] Going insane with IE DIV Height Bug

IE is reserving the line height needed to display the text size, play with line-height:0; or small font-sizes on the spacer.

Why are you using a spacer div? if you want separation from other divs then use margins in fact block level elements have default margins and would naturally show space between themselves.

Edit/ x-posted . hope we haven't been posting to multiple forums Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me