css sprite button is jumping around

Question

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

Answer 1

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.