I can't figure out IE7 float right bug! This is killing me. My NAV bar looks great everywhere except IE7. I already created a specific IE7 CSS and have tried various approaches, but still no success. link text
It appears the LI
elements are floating outside the #NAV
inside the .container.
Anyone of a IE7 fix for FLOAT:RIGHT
?
Many thanks.
Here is my code:
.container {
width: 983px;
margin: 0 auto;
background: fuchsia;
}
ul#nav {
height: 44px;
margin: 32px auto;
position: relative;
}
ul#nav li, ul#nav li a {
display: block;
height: 44px;
margin-left: 3px;
position: relative;
}
ul#nav li {
padding-left: 0;
height: 44px;
position: relative;
z-index: 10060;
}
<div class="container">
<ul id="nav">
<li><a class="navtop_7" href="#"></a></li>
<li><a class="navtop_6" href="#"></a></li>
<li><a class="navtop_5" href="#"></a></li>
<li><a class="navtop_4" href="#"></a></li>
<li><a class="navtop_3" href="#"></a></li>
<li><a class="navtop_2" href="#"></a></li>
<li><a class="navtop_1" href="#"></a></li>
</ul>
</div>