17

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

qwerty
  • 195
  • 1
  • 1
  • 6

7 Answers7

41

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.

John Green
  • 13,241
  • 3
  • 29
  • 51
  • Ditto, couldn't find an issue. I'd try ^. – Amit G May 18 '11 at 00:44
  • Thanks for the reply. Tried that but no joy. Driving me nuts because I'm not getting any CSS errors reported by the web dev plugin (firefox) – qwerty May 18 '11 at 00:45
  • Yeah, you'll have to post an example. I think you'd have an answer within 2 minutes if you did. – John Green May 18 '11 at 00:49
  • 2
    This is exactly the specificity issue I was talking about before. Change 'background' in the #buttons .button to 'background-image:url(blah);background-repeat:no repeat' and it works. – John Green May 18 '11 at 01:03
  • Yeah, he didn't mention in the original code that he had '#buttons .button'. Changed the face of it entirely. : ) – John Green May 18 '11 at 01:12
  • @john, that worked. thanks. as mentioned before, being sick every thing is hazy O.o – qwerty May 18 '11 at 14:50
  • Ran into the same issue with chrome. background:URL(image.png) was defined inline on the a tag. It was somehow overriding the a:hover. Changing it to background-image worked perfectly! –  Oct 10 '12 at 23:38
  • The regular background:url worked perfectly for me for 2 years. All of a sudden it was broken. Changing it to background-image did the trick! – Tony Tambe Dec 19 '14 at 04:08
11

Split up the "background" shorthand property.

If you omit one of the entries in a shorthand property, the omitted entry is reset to the default rather than simply being left alone.

So what's happening is more-or-less the equivalent of this:

#someElement {
    background-position:0 -100px;
    background:url(image.png) no-repeat;
    /* ^--- omitted background-position gets reset to the default */
}

Break the shorthand into different entries:

#someElement {
    background-image:url(image.png);
    background-repeat:no-repeat;
}

EDIT: In your code, the background-position values come after the background values... But I'm pretty sure that the #buttons .button selector is more specific than the #retain-our-firm and similar selectors, meaning that its rule takes precedence over the others even though the others come after.

DavidJCobb
  • 1,081
  • 7
  • 9
5

I know this was asked ages ago, but I think I have the fix.

I had the exact same problem, the positioning was working in Chrome etc but not Firefox.

Took so long to figure out the silly answer,

background-position: 7 4;

Will work in chrome, but not Firefox..

background-position: 7px 4px;

Will work in both.

tomhughes
  • 4,597
  • 2
  • 24
  • 33
Corey
  • 51
  • 1
  • 1
1

Works if you split up the background properties, http://jsfiddle.net/kTYyU/.

#buttons .button{
    display:block;
    position:relative;
    float:left;
    width:250px;
    height:80px;
    padding-left:20px;
    background-image:url(http://www.websitesforlawyers.us/images/valid_xhtml_code_icon.png);
    background-repeat:no-repeat;
}
Amit G
  • 1,338
  • 9
  • 15
0

Have you considered getting it into <ul> <li> </li> <ul>? It is much easier this way. like: 

<ul class="buttons">
    <li  href=''></a>
    <li  href=''></a>
    <li  href=''></a>
</ul>

for the css part

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

.buttons li:hover{
    background-position:0 0;
 }

see if that works ;)

woninana
  • 3,409
  • 9
  • 42
  • 66
  • Ah ok, IE7 supports :hover, it flounders on :active though, http://www.quirksmode.org/css/contents.html#t16. – Amit G May 18 '11 at 01:11
0

I think the problem stems from declaring an incomplete shorthand property on your .button class.

A fixed example can be seen at jsFiddle: http://jsfiddle.net/rRVBL/

rjb
  • 9,036
  • 2
  • 44
  • 49
0

If you came here because background-position-<axis> is not working and your problem is nothing to do with incomplete background shorthand properties, double check you're not using the contain sizing property:

background-size: contain;

This doesn't seem to work in conjunction with background-position-<aixis> on Chrome. Haven't tested on other browsers.

shennan
  • 10,798
  • 5
  • 44
  • 79