Saturday, January 31, 2009

Mouse Event Don't fire in IE6 for Absolutely Positioned DIVs with no "Content"

While experimenting with some Google Maps stuff I learned that mouse events won't fire under IE6 for a div that is absolutely positioned and has no "content." Googling turned up this. As the page says for events to fire in IE6 the div needs to have either some content or a background color. This becomes a problem in Google Maps when you want to make your own overlay and you want to catch events by absolutely positioning a div in the mouse events pane. The solution - easy enough, just put a transparent gif inside the div with the same dimensions as the div. The following two divs should demonstrate the problem, however, I'll have to get in front of IE6 before I can verify it...that is the red outlined div will not pop an alert box in response to a mouseover while the green outlined div will.

So the solution with my Google Maps problem was to use this transparent gif technique, which is the same thing you will find Google doing with their GMarkers. They use a transparent gif the same size as the GMarker, positioned above the GMarker in the mouse events pane in order to catch the events for the marker.