Tony B 86

I have my image sprite set up as two horizontal bars stacked vertically and everything except the hover state on the First item works fine. Am I having a specificity issue or something else? The CSS is as follows, The html is just an unordered list with empty anchor tags and the appropriate class assigned to them.

I have used this setup before and everything was fine but it was with an ordered list without an ID so that is the only difference that I can account for right now.


div#headerLeft ul#mainNavLeft li a.rods, a.staff, a.story, a.dealers{
    width:100%;
    height:20px;
    display:block;
    background:url(../images/leftnavsprite.gif) top left no-repeat;
    }

ul#mainNavLeft li a.rods {background-position: 0 0px;}
ul#mainNavLeft li a.rods:hover {background-position: 0px -70px;}

ul#mainNavLeft li a.staff {background-position: -93px 0;}
ul#mainNavLeft li a.staff:hover {background-position: -93px -70px;}

ul#mainNavLeft li a.story {background-position: -186px 0;}
ul#mainNavLeft li a.story:hover {background-position: -186px -70px;}

ul#mainNavLeft li a.dealers {background-position: -279px 0;}
ul#mainNavLeft li a.dealers:hover {background-position: -279px -70px;}

  • Your CSS looks fine to me. (Although you don't need to specify px on a value of 0) Can you post the HTML you're using as well? Dwayne Anderson about 7 years ago
  • its rendering my html or something, give me a minute Tony B about 7 years ago
  • I can't seem to post the html but it is an unordered list with an ID and list items with an empty anchor which has a class assigned to it in accordance with the stylesheet so a class="rods" etc. Tony B about 7 years ago
  • Seems to me like it should work... First thing I would look for is a typo in the HTML. Dwayne Anderson about 7 years ago
  • Actually, just re-read the CSS... try this: div#headerLeft ul#mainNavLeft li a.rods, div#headerLeft ul#mainNavLeft li a.staff, div#headerLeft ul#mainNavLeft li a.story, div#headerLeft ul#mainNavLeft li a.dealers { /* your CSS here */ } Dwayne Anderson about 7 years ago

1 answer

0
points

I usually do sprites with multiple classes. It works great and is easily expanded to add more images. This way will simplify your css and hopefully fix your bug.

div#headerLeft ul#mainNavLeft li a.sprite{
width:100%;
height:20px;
display:block;
background:url(../images/leftnavsprite.gif) top left no-repeat;
}

ul#mainNavLeft li a.sprite.rods {background-position: 0 0px;}
ul#mainNavLeft li a.sprite.rods:hover {background-position: 0px -70px;}

ul#mainNavLeft li a.sprite.staff {background-position: -93px 0;}
ul#mainNavLeft li a.sprite.staff:hover {background-position: -93px -70px;}

ul#mainNavLeft li a.sprite.story {background-position: -186px 0;}
ul#mainNavLeft li a.sprite.story:hover {background-position: -186px -70px;}

ul#mainNavLeft li a.sprite.dealers {background-position: -279px 0;}
ul#mainNavLeft li a.sprite.dealers:hover {background-position: -279px -70px;}

<ul>
<li><a href="#" class="sprite rods"></a></li>
<li><a href="#" class="sprite staff"></a></li>
<li><a href="#" class="sprite story"></a></li>
<li><a href="#" class="sprite dealers"></a></li>
</ul>
Answered about 7 years ago by Erik Phipps