Question

I am trying to build a simply navigation that has rollover states and different icons for each item. I am using 3 different sprites for the on/off states for the icons and I have everything working great except I am having trouble positioning the icons themselves to sit flust left and aligned with the text. right now they appear in the top left corner of each list item, i want them to appear just to the left of the text. but when i add margin or padding or positioning it screws with the sprite and when rolled over you see the entire image vs just the portion i want. here is my code:

<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#" class="sub">Subscribe &cent;99/month</a></li>
        <li><a href="#" class="profile">My Profile</a></li>
        <li><a href="#" class="log last">Log Out</a></li>
    </ul>
</div>

#navcontainer  {
    width: 243px;
    height: 200px;
    border: 1px solid #999;
    background-color: #fff;
}

#navcontainer ul  {
    margin: 0;
    padding: 0px;
    list-style-type:  none;
    font-family: 'FranklinGothic-Book', sans-serif;
}

#navcontainer a  {
    display: block;
    padding: 14px 0px 14px 45px;
    width: 198px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

#navcontainer a: link, #navlist a:visited {
    color: #000;
    text-decoration: none;
}

#navcontainer a: hover {
    background-color: #cbcbcb;
    color: #000;
}

#navcontainer a.last  {
    border-bottom: 0px;
}

a.sub  {
    display: block;
    width: 20px;
    height: 20px;
    text-decoration: none;
    background: url("http://vpointproductions.com/images/sub.png") no-repeat;
}

a.profile  {
    display: block;
    width: 20px;
    height: 20px;
    text-decoration: none;
    background: url("http://vpointproductions.com/images/profile.png") no-repeat;
}

a.log  {
    display: block;
    width: 20px;
    height: 20px;
    text-decoration: none;
    background: url("http://vpointproductions.com/images/log.png") no-repeat;
}

a.sub: hover, a.profile:hover, a.log:hover  {
    background-position: -20px 0;
}

Answer 1

You can’t really do what you’re trying to do with a sprite. The only way would be to really space the items out on your sprite so that you don’t see the other elements of the sprite.

Alternatively you could just use two images per a tag and swap them on hover.

Another way you could do it would be to place a span inside the a tag and set the background on that rather than on the a tag.