Problem with a :hover event in ie7

Question

I have a map with several divs positioned absolutely on the page. Each div has a background image which contains the normal state and the hover state in one file. When the user mouses over the div, the background image is supposed to shift up 25 pixels. In ie7, the background image shifts up 25 pixels, but it also shifts to the right about 20 pixels.

Here is the CSS:

#LosAngelesButton {position: absolute; top: 80px; left: 168px; background: url(../images/superNav/LosAngeles.png) no-repeat; height: 27px; width: 110px;}
#LosAngelesButton a {display: block; height: 27px; width: 110px; text-indent: -99999em;}
#LosAngelesButton a:hover {background: url(../images/superNav/LosAngeles.png) no-repeat 0 -25px;}

The problem is showing only in ie7. Any suggestions?

Answer 1

I think you have this problem in other browsers to. you have set the background image on #LosAngelesButton and you change the state when you hover the a inside this element whatever it is. I would suggest you set your original background position on a element.

post the HTML code of this LosAngelesButton and i can give you a more precise awnser