css sprite button is jumping around

views:

118

answers:

css sprite button is jumping around

Hello everyone,

Does anyone know what is causing the sprite rollover to jump around

It is I think more likely a photoshop question, but I am not completely sure. I hope to get an answer here anyway, since I think most webdesigners/programmers problably worked with photoshop also.

This is what I want the rollover to do example 1

and this is my testpage (see the play button)

I made the sprite with spriteme.com

thanks, Richard

+1 A:

I do not see anything jumping around. However, when I first open the page the Play button is missing (its style is set to display: none;). When I click stop it appears, and then disappears when I click play. This is due to it's inline "display" style being set to block and none.

Is this your problem?

Note: I tested in Chrome and FF. I debugged the CSS states using Firebug.

Chris 2010-04-05 15:44:15

As you can see from the first example the buttoncolor rollover is flawless, but mine is shifting out off place? Sofar, I only did a sprite on the play button. The play button rollover states are vissible when the stop button is pushed. That is intentionally done.

Richard 2010-04-05 15:59:21

With photoshop, I only did a 40px rounded rectangle, trimmed it and saved it for web. With color overlay, I changed the color.

Richard 2010-04-05 16:09:05

What browser are you using? With Chrome and FF I see no jerking at all. It is the Play button that you have an issue with isnt it?

Chris 2010-04-05 16:23:27

I use FF. Don't you see a slight shifting when you hover over the play button?

Richard 2010-04-05 16:28:05

No I don't, however, the change in contrast / colour between the dark grey and the orange does make you think the white triangle is changing size, but that is just an optical illusion. I am using FF 3.6.3 btw

Chris 2010-04-05 16:39:58

Maybe, but I don't think so, because I am not seeing it in the first example.

Richard 2010-04-05 16:47:14

I changed the hover state to blue, and it does look better, so maybe your right. I just can't believe it. It's a pain if I can't use that color. I will try some other combinations with less contrast or whatever then.

Richard 2010-04-05 17:09:30

Thanks, for your comment

Richard 2010-04-05 17:10:31

ansaurus

tags:

views:

answers:

css sprite button is jumping around

related questions