Grow your CSS skills. Land your dream job.

IE <ul> float bug

  • # September 29, 2008 at 6:16 am

    Hi all

    First post here! :D

    I have this <ul> based navigation using CSS sprites and sliding-doors together. It floated to the right and renders fine in firefox but IE6 & 7 breaks it by steping the <li>s up to the right. I own a mac so I use browsershots.org too render in IE. See screenshot:
    [attachment=0]screen-capture-6.jpg[/attachment]

    and here is the CSS:

    Code:
    #nav {
    width:100%;
    border-bottom:solid 0px #333333;
    position:absolute;
    right:0px;
    bottom:0px;
    list-style:none;
    margin:0px 0px 0px 0px;
    padding-right:18px;
    }

    #nav li a {
    padding:0px;
    float:right;
    margin:0px 5px -6px 0px;
    background:url(images/nav-right-sprite.png) no-repeat right top;
    }

    #nav li a:hover {
    margin:0px 5px -6px 0px;
    background:url(images/nav-right-sprite.png) no-repeat right -60px;
    }

    #nav a span {
    color:#aaaa55;
    display:block;
    background:url(images/nav-left-sprite.png) no-repeat left top;
    padding:5px 10px 5px 10px;
    }

    #nav a span:hover {
    color:#222;
    background:url(images/nav-left-sprite.png) no-repeat left -60px;
    }

    body.home #nav li#home a,
    body.services #nav li#services a,
    body.customers #nav li#customers a,
    body.about #nav li#about a,
    body.contact #nav li#contact a {
    background:url(images/nav-active-right.png) no-repeat right top;
    }

    body.home #nav li#home a span,
    body.services #nav li#services a span,
    body.customers #nav li#customers a span,
    body.about #nav li#about a span,
    body.contact #nav li#contact a span {
    color:#444;
    background:url(images/nav-active-left.png) no-repeat left top;
    }

    Any clues?

    Thanks, Whaleo

    # September 29, 2008 at 8:05 am

    Could be cuz you are floating the <a>s and not the lis. Try setting the lis to float:left;. Do you have a link?

    # September 29, 2008 at 6:00 pm

    @cssgirl – I had to make the <li>’s {display:inline}

    I was a little stoopid!

    It was here all along1 : http://css-tricks.com/prevent-menu-stepdown/

    :D

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".