Grow your CSS skills. Land your dream job.

Sprite nav is wonky in IE6/IE7

  • # March 7, 2010 at 2:39 pm

    Hi all – I hope one of you can help me with the problem I’m having with the navigation on my portfolio site. I am using an image sprite and in all browsers except IE6 and IE7, it displays properly. In IE6/7, it sort of displays the whole image, or perhaps more accurately, it is repeating along the y-axis — I’m not really sure what’s going on. Here’s what it looks like as a .jpg image but I’ve had the same problem using a .png file:

    http://www.ericabuneo.com/ericawebsite.jpg

    I am guessing there’s something in my CSS that IE just doesn’t like but I’m not having much luck finding a solution. Any guidance here would be appreciated; I’ve been pulling my hair out for days!

    Here’s the relevant code:

    Code:
    /* nav
    ———————————————– */
    #nav {
    width:550px;
    float:right;
    padding-top:82px;
    margin-right: -75px;
    }

    ul#navlist {
    background-image: url(../images/navigation.png);
    background-repeat: no-repeat;
    position: relative;
    }

    ul#navlist li {
    list-style-type:none;
    }

    ul#navlist li a {
    height:50px;
    display:block;
    position:absolute;
    }

    li#home a, li#portfolio a, li#resume a, li#blog a, li#about a, li#contact a {
    background:url(../images/navigation.png);
    background-repeat: no-repeat;
    }

    li#home a {
    background-position:0 0;
    width:80px;
    left:0;
    }

    li#home a:hover {
    background-position:0 -50px;
    }

    li#portfolio a {
    background-position:-80px 0;
    width:120px;
    left:80px;
    }

    li#portfolio a:hover {
    background-position:-80px -50px;
    }

    li#about a {
    background-position:-200px 0;
    width:95px;
    left:200px;
    }

    li#about a:hover {
    background-position:-200px -50px;
    }

    li#blog a {
    background-position:-300px 0;
    width:85px;
    left:300px;
    }
    li#blog a:hover {
    background-position:-300px -50px;
    }

    li#contact a {
    background-position:-380px 0;
    width:112px;
    left:380px;
    }

    li#contact a:hover {
    background-position:-380px -50px;
    }

    Code:

    Hopefully I just made a really stupid mistake and it will be an easy fix; I’d rather be embarrassed than frustrated! ;)

    Thanks in advance for your help!

    # March 7, 2010 at 2:58 pm

    I’ve seen a couple of issue in IE6/7 as well.
    I resorted to using a separate stylesheet for 6 & 7 for my sprite header like this:

    Code:

    I had to set my top margin to 0px instead of 40px. For some reason, the 40px top margin made the image display 40 extra px of the header.

    Your issue could be the padding.

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

You must be logged in to reply to this topic.

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