Looking for browser compatibility, noticing some hovers don’t work in certain browsers, what might be the best way too display the image hover?
combine the 2 images into one and adjust the ‘background-position’ for hover?
(this be proportational on widely varying screen sizes?)
use an ‘img id’ along with a ‘div id’ ?
And I beleive there is also a way to set an anchor.
What say us?
noticing some hovers don’t work in certain browsers,
thats odd, even IE7 supports :hover on most elements, of course you have to make sure you have a proper doctype.
- use an ‘img id’ along with a ‘div id’ ?
this is overkill, ID are and should be unique. Withing any individual HTML document ,you shouldn’t ever need to get more specific than an(one) ID.
- combine the 2 images into one and adjust the ‘background-position’ for hover?
dunno what specifically you are trying to accomplish, but sprites are a good idea on any fixed size elements, this technique will also reduce the “blinking” effect that occurs when a browser has to load a rollover image for the first time
And I beleive there is also a way to set an anchor.
I prefer to set the :hover to set hover on the outermost element.
so for example li:hover div a {…} that way effect has a the broadest hit area, if that is your goal.