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…