[Web developer geek talk. All others can skip, unless you want to know why web developers hate Internet Explorer.]
CSS sprites and single-image rollovers are great. However, if you try to use position: absolute to put them at specific points on the screen, you’ll hit an unpleasant Internet Explorer bug.
Specifically, your rollover will activate when you hover the mouse over it, but it won’t deactivate.
After much experimentation I discovered the IE bug that leads to the misbehavior:
In IE6, Link elements only de-hover when the mouse hits the rest of the block, such as the text or border around the <a> element. For absolutely positioned rollover buttons, there is no rest-of-the-block.
However, with a couple of egregious hacks, you can get your rollovers working again.
Step 1 is to put a large margin on all the <img> elements. The margin counts as non-hover area, and will cause the rollover to de-highlight when the mouse touches it. Make sure the margin is large enough that the user is unlikely to be able to move the mouse over it without touching it.
Step 2 is to position the rollovers by wrapping them in a <div> rather than by positioning the <a> or <img> elements. If you position the rollover itself, the margin is ignored; if you put the rollover in a positioned <div>, the margin remains active.
Step 3 is to subtract the size of the big margin from all your rollover coordinates, to allow for step 1.
So the end result is something like:
a img { border: 64px; }
div#c1 { position: absolute; left: 200px; top: 200px; }
a#r1 img { background: url(whatever.gif) no-repeat; background-position: 0 0; }
a#r1:hover img { background-position: 0 -100px; }
[...]
<div id='c1'><a href="whatever"><img src="blank.gif" width='100' height='100' alt="Whatever!" /></a></div>
[...]
Share and enjoy. Unless you’re someone on the IE development team, in which case get back to work and fix some of those bugs.
Tagged: GIF, Internet Explorer, unpleasant Internet Explorer bug, Web developer geek talk