I'm trying to do something like Dave Shea's CSS Sprites (buttons) (<!-- m --><a class="postlink" href="http://www.alistapart.com/d/sprites/ala-buttons1.html">http://www.alistapart.com/d/sprites/ala-buttons1.html</a><!-- m -->), but I'm not quite sure I know what I'm doing. It seems like the top left "button" is being used on all my list items, except on hovering, where it works as it should.
The image I'm using (<!-- m --><a class="postlink" href="http://www.grunden.nu/test/knappar2.png">http://www.grunden.nu/test/knappar2.png</a><!-- m -->)
HTML and CSS (<!-- m --><a class="postlink" href="http://www.grunden.nu/test/test.html">http://www.grunden.nu/test/test.html</a><!-- m -->)
Does anyone have any idea what I'm doing wrong? One more thing: In Shea's original code, there's a background image, pattern.gif. What does this do and is it necessary?
Edit: Typical, an hour after I posted this, I solved the problem! When specifying the left position and background ditto, I had to put the id of the ul in there aswell.
Previously I had:
#knapp2 {
left: 66px;
background-position: -62px 0;
}
It turned out I had to do like this:
#nav #knapp2 {
left: 66px;
background-position: -62px 0;
}
The image I'm using (<!-- m --><a class="postlink" href="http://www.grunden.nu/test/knappar2.png">http://www.grunden.nu/test/knappar2.png</a><!-- m -->)
HTML and CSS (<!-- m --><a class="postlink" href="http://www.grunden.nu/test/test.html">http://www.grunden.nu/test/test.html</a><!-- m -->)
Does anyone have any idea what I'm doing wrong? One more thing: In Shea's original code, there's a background image, pattern.gif. What does this do and is it necessary?
Edit: Typical, an hour after I posted this, I solved the problem! When specifying the left position and background ditto, I had to put the id of the ul in there aswell.
Previously I had:
#knapp2 {
left: 66px;
background-position: -62px 0;
}
It turned out I had to do like this:
#nav #knapp2 {
left: 66px;
background-position: -62px 0;
}