R
Royan
Here is the code that replicates problem, which is specific to IE6,7
(not sure about IE8, however)
In order to replicate the effect/bug just move your mouse here and
there above the gray layer (DIV#outerFrame) until you see the alert
window. The bug is that DIV#allergic receives events *through* layers
that are above it.
Whats more interesting is that if you uncomment the background-color
part of CSS code for DIV#innerFrame and repeat the experiment you'll
notice that alert is no longer fired when your mouse is above the
DIV#innerFrame layer
Not sure if this is some kind of FLOAT:left side-effect, but I hope
there is a way to get rid of the described behavior...
Your thoughts are greatly appreciated!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE type="text/css">
#page {
BACKGROUND-COLOR: pink;
}
#main {
FLOAT: left;
WIDTH: 650px;
Z-INDEX: 100;
}
#outerFrame {
BACKGROUND-COLOR: #DDDDDD;
}
#innerFrame {
WIDTH: 550px;
HEIGHT: 100px;
/* BACKGROUND-COLOR: olive; */
}
</STYLE>
<SCRIPT type="text/javascript">
window.onload = function() {
var contObj = document.getElementById("allergic");
contObj.onmouseover = function() {
alert("Sneezing!");
};
};
</SCRIPT>
</HEAD>
<BODY>
<DIV id="main">
<DIV id="outerFrame">
<DIV id="innerFrame"></DIV>
</DIV>
</DIV>
<DIV id="page">
<DIV id="allergic">Allergic</DIV>
</DIV>
</BODY>
</HTML>
(not sure about IE8, however)
In order to replicate the effect/bug just move your mouse here and
there above the gray layer (DIV#outerFrame) until you see the alert
window. The bug is that DIV#allergic receives events *through* layers
that are above it.
Whats more interesting is that if you uncomment the background-color
part of CSS code for DIV#innerFrame and repeat the experiment you'll
notice that alert is no longer fired when your mouse is above the
DIV#innerFrame layer
Not sure if this is some kind of FLOAT:left side-effect, but I hope
there is a way to get rid of the described behavior...
Your thoughts are greatly appreciated!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE type="text/css">
#page {
BACKGROUND-COLOR: pink;
}
#main {
FLOAT: left;
WIDTH: 650px;
Z-INDEX: 100;
}
#outerFrame {
BACKGROUND-COLOR: #DDDDDD;
}
#innerFrame {
WIDTH: 550px;
HEIGHT: 100px;
/* BACKGROUND-COLOR: olive; */
}
</STYLE>
<SCRIPT type="text/javascript">
window.onload = function() {
var contObj = document.getElementById("allergic");
contObj.onmouseover = function() {
alert("Sneezing!");
};
};
</SCRIPT>
</HEAD>
<BODY>
<DIV id="main">
<DIV id="outerFrame">
<DIV id="innerFrame"></DIV>
</DIV>
</DIV>
<DIV id="page">
<DIV id="allergic">Allergic</DIV>
</DIV>
</BODY>
</HTML>