Margin-top disapears in IE

HTML & CSS
1

Another in the series of odd old( 5-7) IE behaviors.

The following code works fine in modern browsers.

HTML
<div id=“hed”><div id=“wrap”>
<h1 id=“logo”>Logo</h1>
<div id=“nav”>
<ul>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
</ul>
</div>
</div></div>

CSS
* {margin:0; padding:0}
#hed {background:silver; }
#wrap { height:200px; width:800px; margin:auto; background:#555; position:relative }
#logo {background:orange; width:150px; margin-left:20px; float:left; margin-top:20px } /margin-top:20px; fails to show in IE at all. float or positon:absolute causes #nav’s top margin to be ignored in IE /
#nav{float:right; margin-top:150px} / margin top disapperas in IE when elem,ents are floated/
#nav a {display:block; padding:10px;}
#nav a:hover {background:tan}
#nav ul { margin-right:20px;}
#nav li { float:left; list-style:none; background:orange}
/* for IE*/

  • html #nav ul, * html #nav a { float:left; }

As I noted in my comments, floating or using AP to position logo, makes IE ignore #logo’s and #nav’s margin-top property. if you remove the float ( or AP) off of #logo. then the top margin returns for BOTH #nav and #logo. Am at a loss as to why…

2

Older IEs have had buggy support for margin collapse. In this case (and without testing) I suspect the logo margin has collapsed through the wrapper div, through head, through body and through html. The last collapse is completely buggy.

See http://reference.sitepoint.com/css/collapsingmargins

cheers,

gary

3

Gary,

I thought as much. but when I did a margin collapse experiment it was also…“buggy”; essentially what I did was to add a 1px border to the #wrapper, whin in theory would have stopped the collapse, at least for the #logo element… but other than the 1px border on #wrapper it produce no change