- This topic is empty.
-
AuthorPosts
-
October 20, 2008 at 1:24 am #23434remote controlMember
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 & 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;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.