Sprite Nav display IE6

[remote control]

Hi All,

I have created a 2 state menu using the 3 state tutorial from the site but am having major display issues with IE6, I can not control the height properly for IE6 and it shows both states with the bottom cut off a little. Works perfect in Firefox.

Any help would be great.

Here is the HTML

<div id="pagewrap">
<div id="navBar">
<ul id="topNav">
<li><a class="about" href="/about.html">ABOUT US</a></li>
<li><a class="collection" href="/collection.html">COLLECTION</a></li>
<li><a class="shopping" href="/shopping.html">SHOPPING BAG</a></li>
<li><a class="stockist" href="/stockist.html">STOCKIST &amp; CONTACT</a></li>
</ul>
</div>
</div>

Here is the CSS

body * {
margin: 0px;
padding: 0px;
}

#pagewrap {
width: 800px;
margin: 0 auto;
}
#navBar {
width: 100%;
}
ul#topNav {
list-style:none;
}
ul#topNav li {
display:inline;

}
ul#topNav li a {
text-indent: -9999px;
display: block;
height: 11px;
float: left;
margin: 0 0 0 20px;
}
ul#topNav li a.about {
background: url(../images/topNav/aboutUs.gif) bottom center no-repeat;
width: 75px;
}
ul#topNav li a.collection {
background:url(../images/topNav/collection.gif) bottom center no-repeat;
width: 93px;
}
ul#topNav li a.shopping {
background:url(../images/topNav/shoppingBag.gif) bottom center no-repeat;
width: 111px;
}
ul#topNav li a.stockist {
background:url(../images/topNav/stockist.gif) bottom center no-repeat;
width: 168px;
}
ul#topNav li a.about:hover, ultopNav li a.about:active,
ul#topNav li a.collection:hover, ultopNav li a.collection:active,
ul#topNav li a.shopping:hover, ultopNav li a.shopping:active,
ul#topNav li a.stockist:hover, ultopNav li a.stockist:active {
background-position: top center;
}

[Author]

Posts