By the looks of things IE6 doesn't support :hover for anything other
than <a> so the .rollovera class is for IE.
Mozilla on the other hand, with :hover on the <a> tag, seems to only
change the background of the lower half of the image and does weird
things underneath the image too. I used a descendant selector that IE
seems to ignore to get the <img> to light up on Mozilla alone but
Mozilla still picks up on the .rollovera class intended for IE so we
still get the weirdness underneath the image.
So can anyone tell me why Mozilla is doing what it is doing? It is a
text row's height that is being changed by the a:hover but the row of
hypothetical text seems to rest much lower than it should and it resists
any attempt to shift it up. Try sticking some text next to the nav
images and you will see what I mean...
The rollover images are 32bit pngs and the I use the png alpha hack for
IE to get the transparancy to work. A very nice elegant hack indeed