Grow your CSS skills. Land your dream job.

Navigation Matrix steps down in IE

  • # December 22, 2008 at 12:13 pm

    Here’s the site: http://www.stuckpixelstudio.com/clients/sunrisegarden/

    If you look at the site in IE, you’ll see that the navigation steps down. Any thoughts? Here’s the CSS for the navigation:

    Code:
    ul#nav {
    height: 43px;
    min-height: 43px;
    list-style-type: none;
    margin: 0 auto;

    }

    ul#nav li a {
    text-indent: -9000px;
    text-decoration: none;
    overflow: hidden;
    background: url(images/navmatrix.png) no-repeat;
    height: 43px;
    min-height: 43px;
    display: inline;
    float: left;
    }

    li#home a:link, li#home a:active, li#home a:visited { background-position: 0 0; width: 100px; height:43px; }
    li#home a:hover { background-position: 0 100%; width: 100px; height:43px;}

    li#products a:link, li#products a:active, li#products a:visited { background-position: -100px 0px; width: 100px; height:43px;}
    li#products a:hover { background-position: -100px 100%; width: 100px; height:43px;}

    li#wholesale a:link, li#wholesale a:active, li#wholesale a:visited { background-position: -200px 0px; width: 150px; height:43px;}
    li#wholesale a:hover { background-position: -200px 100%; width: 150px; height:43px; }

    li#gardeningblog a:link, li#gardeningblog a:active, li#gardeningblog a:visited { background-position: -350px 0px; width: 200px; height:43px;}
    li#gardeningblog a:hover { background-position: -350px 100%; width: 200px; height:43px;}

    li#specials a:link, li#specials a:active, li#specials a:visited { background-position: -550px 0px; width: 100px; height:43px;}
    li#specials a:hover { background-position: -550px 100%; width: 100px; height:43px;}

    li#calendar a:link, li#calendar a:active, li#calendar a:visited { background-position: -650px 0px; width: 125px; height:43px;}
    li#calendar a:hover { background-position: -650px 100%; width: 125px; height:43px;}

    li#about a:link, li#about a:active, li#about a:visited { background-position: -775px 0px; width: 110px; height:43px;}
    li#about a:hover { background-position: -775px 100%; width: 110px; height:43px;}

    li#contact a:link, li#contact a:active, li#contact a:visited { background-position: -885px 0px; width: 115px; height:43px;}
    li#contact a:hover { background-position: -885px 100%; width: 115px; height:43px;}

    Thanks.

    # December 22, 2008 at 4:37 pm

    http://css-tricks.com/prevent-menu-stepdown/

    Try putting display inline on the list items.

    # December 22, 2008 at 6:03 pm

    Chris,

    I freakin love you. In a professional way, I mean.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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