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>
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?
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
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.
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.
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.
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>
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.