Grow your CSS skills. Land your dream job.

Sprite Nav display IE6

  • # October 20, 2008 at 1:24 am

    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;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".