a:hover on an image link

any reason not to use it?

[benihana]

hi
i just setup a menu with a cheap way to do kind of image rollovers.

html:
<a href="#" class="rollovers"><img src="foo"></a>

css:
a.rollovers:link {
margin-right:0px;
}
a.rollovers:hover {
margin-right:12px;
}

so you get an indented image on rollover. lovely. and no messy javascript.

just wondering, as i have never knowingly seen this before, is there any reason not to do this? compatibility or bugs or anything?
cheers

[DrDoc]

I'm using it all the time. It works great, and most browsers offer good support for it.

However, you might want to test it in Mozilla, Opera, and IE. Sometimes you have to exchange the margin values for padding. But, in general, there are several solutions that work cross-browser.

[benihana]

thanks drdoc
ive tested in those browser now. the only problem ive come across so far is moz shifting everything below a rollled over image down a bit, and then back up on mouseout. i just put <br>'s between each image and it seems ok now.
have you ever found anything like that?
ta

[WibbleWobble]

Have you tried specifying the margin-bottom: style? It may be that moz is thrown off by something.

[benihana]

yeah i tried that ww, and padding-top etc
thanks anyway though