The Bug

While working on the Comp-Presenter jQuery Plugin I came across a really obscure bug in Internet Explorer that effect IE6 to IE8 (I haven’t tried it in IE9 yet). Essentially if you have an empty element positioned over an image in Internet Explorer you can not add a mouseover event to it. This is probably easier to show than to explain so take a look at the three examples on the right. If you are using anything other than IE you will see the text below each box change from “Normal” to “Mouse Over” when you move your mouse over the box in the top left corner. In IE it will work with the first example because it has a background color and it will only work in the second example if you get the mouse directly touching the one pixel border.

Example One

With background color

Normal

Example Two

With Border

Normal

Example Three

Invisible

Normal

Nuances

I have tried using every know fix to the haslayout bug, but nothing will work. The strange thing is it only breaks when the invisible div is over an image. You can see in example four if it’s placed over an empty div it works fine. Unfortunately I was using this method to create a hotspot on a slideshow so I it was always going to be over an image. The box also works if you add a background image, but that ruins the whole idea of it being invisible. I also tried using an anchor tag instead of a div for the hotspot with no avail.

Example Four

Over div instead of image

Normal

Example Five

With background image

Normal

Solution

After a lot of trial and error I found a solution that makes IE render the box correctly so you can add a mouseover event to it. All you have to do is add the CSS background-image property with a made up URL like this:

.invisible-btn {
	background-image:url(hack);
}

Example Six

With background hack

Normal