Overlay Div: mouseouts firing on each letter underneath the overlay in IE
Wondering if anyone knows the way around this:
If I have a structure that has an image which when moused over, shows a description div, like this:
<div id="desc" style="opacity:0;filter:alpha(opacity=0);width:360px;position:absolute;bottom:0px;right:0px;z-index:0px;">
<div class="MainContentText">Materials: </div>
<div class="MainContentText">Products: </div>
<div id="overlay" onmouseover="opacity('desc', 0, 100, 500)" onmouseout="opacity('desc', 100, 0, 500)" style="position:absolute;top:0px;right:0px;width:500px;height:600px;z-index:500;"></div>
All workes fine on Firefox, however not in IE7 or 8 using doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The problem in IE is that whenever the mouse goes over a letter as in one of the letters in 'Materials:' or 'Products:', the mouseover event fires on the overlay and causes it to flicker.
Im not sure why the overlay doesnt block these events since it is definitely the foremost element.