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 style="position:relative">
<div style="position:relative;background-image:url(...);width:500px;height:600px;overflow:hidden">
<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: &nbsp;</div>
<div class="MainContentText">Products: &nbsp;</div>
</div>
</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>
</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.

Any idea how to get around this with CSS? I dont want to have to use javascript much.

THanks.