I am using a sprite to create a rollover button that I can display text on. It works just fine when the page loads.When I mouse over the button, it changes the background position just like it should but the text disappears.
Here is my css:
Code:
A.button, A.button:LINK, A.button:VISITED, A.button:ACTIVE, {
float: left;
display: block;
background: transparent url(images/button.gif) no-repeat 0px 0px;
overflow: hidden;
height: 25px;
width: 127px;
margin-right: 8px;
line-height: 29px;
text-align: center;
text-decoration: none;
}
A.button:HOVER {
background-position: 0px -25px;
}
and I am calling it like this:
I could create an image with the text embedded in the image but I want a generic button that I can reuse.
What am I missing here?