Question

I have 3 a tags disguised as “roll over buttons”.

<div id="buttons">
    <a class='button' id='but1' href=''></a>
    <a class='button' id='but2' href=''></a>
    <a class='button' id='but3' href=''></a>
</div>

Each button is getting its initial image from the CSS as follows:

.button{
    background:url(theimage.jpg);
    width;height; etc...
}

Now, when i try to assign initial background position for each specific element as such:

#but1{
    background-position:0 0;
}
#but1:hover{
    background-position:0 -50px;
}

#but2{
    background-position:0 -100px;
}
#but2:hover{
    background-position:0 -150px;
}

#but3{
    background-position:0 -200px;
}
#but3:hover{
    background-position:0 -250px;
}

The Issue: each button defaults to position 0 0

Note that the hover positions work as expected.

I’m kind of sick right now so this is probably an oversight but I’ve been stairing at this for an hour now and can’t figure it out.

Any thoughts?

Thanks

EDIT pastebin love http://pastebin.com/SeZkjmHa

Answer 1

I’m not reproducing your issue. Which browser?

Initial thought (without seeing an error case) is to change your initial background definition from a full ‘background:’ to a background-image declaration:

.button{
  background-image:url(theimage.jpg);
  width;height; etc...
}

By setting background, which is a container for background-position, some browsers may have issues with specificity issues there.