Эффект или баг наблюдается только в IE 6 и 7 (Opera, FF, Safari все OK)
Суть такая, если поводить мышкой над сереньким слоем(DIV#outerFrame), то ровно в тот момент когда она достигнет уровня розового слоя (DIV#contentsInner) мы увидим alert, что неверно потому что непосредственно на розовый слой мышка не заезжает.
Второе, если раскомменитровать объявление цвета фона для слоя DIV#innerFrame, то по какой-то магической и необъяснимой причине сей баг пропадет, но только "для" DIV#innerFrame (не знаю как правильно описать, попробуйте просто раскоментить CSS и повторить эксперимент)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE>
#page {
BACKGROUND-COLOR: pink;
}
#mainOrder {
LEFT: 217px;
FLOAT: left;
WIDTH: 635px;
Z-INDEX: 100;
}
#outerFrame {
BACKGROUND-COLOR: #DDDDDD;
}
#innerFrame {
WIDTH: 575px;
HEIGHT: 100px;
BORDER: 1px solid black;
/* BACKGROUND-COLOR: olive; */
}
</STYLE>
<script type="text/javascript">
window.onload = function() {
var contObj = document.getElementById("contentsInner");
contObj.onmouseover = function() {
alert("Чихаю");
};
};
</SCRIPT>
</HEAD>
<BODY id="body">
<DIV id="mainOrder">
<DIV id="outerFrame">
<DIV id="innerFrame"></DIV>
</DIV>
</DIV>
<DIV id="page">
<DIV id="contentsInner">Аллергик</DIV>
</DIV>
</BODY>
</HTML>
Обратите внимание, что объявление BORDER в CSS стиле для DIV#innerFrame никак не сказывается, а BACKGROUND-COLOR исправляет баг, хотя только для DIV#innerFrame
Буду крайней степени благодарен тому кто сможет пояснить как избавиться от такой назойливой реакции в IE, заранее огромное спасибо!