Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sprite nav is wonky in IE6/IE7

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #28309
    MsLiberty
    Member

    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!

    #72121
    goplutus
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.