Why is IE6 not rendering my bottom margin correctly?

I have a page that displays perfectly in FF and IE8 but in IE6 (or IE8 compatibility mode) the bottom margin on the last div inside the <body> tag is not displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>

<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>

<body>

<div id='margin_paint'>

<div id='background_paint'>

<p>This text is huge so you can see that the bottom div does not get 400 pixels of
margin underneath it.</p>

</div>

</div>

<div id='footer'>
<div id='middle'></div>
</div>

</body>
</html>


* {
	margin: 0;
	padding: 0;
}

html {
	background: #3b5b61;
}

#margin_paint {
	background: white;
	width: 780px;
	margin: 0 auto 0 auto;
	padding: 20px 40px;
}

#background_paint {
	background: white;
}

#footer {
	height: 10px;
	width: 860px;
	margin: 0 auto 400px auto;
}

#footer #middle {
	background: white;
	height: 10px;
	float: left;
	width: 860px;
}

p {
	font: 172px sans-serif;
}

well i dont have IE6 but why are using single quotes for id’s

vineet

Some of my html, not this code, is generated by Java and this way I don’t have to escape the double-quotes inside of double-quotes in my code. Does it matter?

not sure. but try if padding works instead of margin


#footer {
    height: 10px;
    width: 860px;
    margin: 0px auto 0px auto;
padding-bottom:400px;
}

vineet

I have successfully used padding. I just don’t understand and can’t relate this behavior in IE6 to any known bugs.

Hi, I notice you don’t close off some tags in there, such as you don’t close footer. Invalid markup leads to nasty results. Make sure your code is valid always :slight_smile:

All tags are closed.

I’ve never really seen an answer to this problem. Is this a box model issue? It can’t be a haslayout issue because the parent has layout. I find this weird and would love an answer to this problem too.

AH whoops. Sleep deprivation.

This is a bug and I have indeed seen this before. I don’t have time to fully test though because my internet is about to go kaboom.

Expect a reply early morning though :slight_smile:

I’ve had this bug creep up a dozen times as well. However, I’ve always chosen a workaround, like using padding or - were I to use the OP’s code - apply the margin to the body element instead.

But…instead of working around the problem, I’d much rather understand why IE chooses not to render the bottom margin. It isn’t the margin-collapse bug, it isn’t haslayout as far as I can tell…I am wondering if anyone knows what is causing it or whether it’s one of those IE specific rendering inconsistencies that have no underlying logic to them.

…I am wondering if anyone knows what is causing it or whether it’s one of those IE specific rendering inconsistencies that have no underlying logic to them.
I don’t have an explanation for it but I would guess that IE’s broken float model is having something to do with this due to the float in the footer.

If the margin is moved to the float itself it works fine.

#footer {
    height: 10px;
    width: 860px;
    [B]margin: 0 auto;[/B]
}
 
#footer #middle {
    background: white;
    height: 10px;
    [B]float: left;[/B]
    width: 860px;
    [B]margin-bottom:400px[/B]
}

Of course that would not work if the footer had a BG color/image due to IE6’s Expanding Box bug.

It will also work if there is a clearing element after the footer.

Hmm…however, when you take out the float from the original code, nothing changes, so I’m not sure whether it is linked to the broken float model, given in that scenario there wouldn’t be any floats in the entire markup. :frowning:

Haa, your right! :slight_smile:

This boils down to the last elements bottom margin being ignored.

It is just like when you say margin:20px auto; on your wrapper div IE6/7 ignore the bottom margin. I don’t think there is an explanation for it other than that’s just how IE6/7 handled it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Margin Test</title>

<style type="text/css">
* {margin: 0;padding: 0;}

body {
    background: #3b5b61;
}
#margin_paint {
    background: white;
    width: 780px;
    margin: 0 auto;
    padding: 20px 40px;
}
[B]#footer [/B]{
    /*height: 10px;*/
    width: 860px;
    [B]margin: 0 auto 400px auto;[/B]
    background:lime;
}
p {font:90px sans-serif;}

[B].last {
[/B]    background:red;
    height:5px;
    font-size:0;[B]
    margin-bottom:400px
}[/B]

</style>
</head>
<body>

<div id="margin_paint">
    <p>This text is huge so you can see that the bottom div does not get 400 pixels of
    margin underneath it.</p>
</div>
 
<div id="footer">
    <h4>Middle</h4>
</div> 

[B]<div class="last"></div> [/B]

</body>
</html>

Bummer.

Thanks, Ray! I guess it’s a waste of time trying to make sense of it.

Ah found what I was looking for
http://dev.moonhenge.net/bugs/ie6/margins/IE__margins_summary.html

Yeah, but that explains what we already know; the what rather than the why.

Thanks anyway, Ryan!

Hi, if in IE, if the bottom margin touches the bottom edge of the body element then the margin will be ignored. An empty element, such as a <br> right before the body element c loses cna fix this. Just something that clashes between the body and the margin.

<div id='footer'>
<div id='middle'></div>
</div>[B]<br>[/B]
</body>

I don’t think there is a pure CSS fix for this :). This is just IE6 being IE6.