Bottom DIV handles events from top DIV layers only in IE6,7

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>
 
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>

There is one hack i thought about but it does not really rectify the
whole problem

If you modify CSS
#page {
MARGIN: 0px 0px 0px 350px; /* << This line is added */
BACKGROUND-COLOR: pink;
}

You would shrink the DIV#page width by 350px just by introducing left
margin, but this does not fix the problem itself, also this is very
hard to implement when you have complex CSS formatting and dynamically
change the position of DIV#outerFrame
 
R

rf

Royan said:
The code is within my first message

So you expect me to go to all the trouble of rebuilding your example on my
local file system just to help you?

No thanks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top