CSS - z-Index problem with borders!

R

ryanmhuc

This just seems to be in IE.

You have two layers (DIVs). One on top of the other using z-Index. Both
have a onMouseOver action and are positioned absolutely. If the bottom
layer does NOT have a border the top layer onMouseOver event fires
fine.


<div style=" position:relative; width:100px; height:100px;">
<DIV onMouseOver='alert("Top")' style='position:absolute; top:0px;
left:0px; width:100px; z-Index:2; height:100px;'></DIV>
<DIV onMouseOver='alert("Bottom")' style='position:absolute; top:0px;
left:0px; width:100px; z-Index:1; height:100px;'></DIV>
</div>


But if the bottom layer has a border. When moving over the bottom
layer's border the bottom layers onMouseOver event fires instead of the
top layer even though the top layer should. It works as expected in
FireFox but not IE. Anyone know how to get around this?

<div style=" position:relative; width:100px; height:100px;">
<DIV onMouseOver='alert("Top")' style='position:absolute; top:0px;
left:0px; width:100px; z-Index:2; height:100px;'></DIV>
<DIV onMouseOver='alert("Bottom")' style='position:absolute; top:0px;
left:0px; width:100px; z-Index:1; height:100px; border:6px
solid;'></DIV>
</div>

Thanks
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
This just seems to be in IE.

You have two layers (DIVs). One on top of the other using z-Index. Both
have a onMouseOver action and are positioned absolutely. If the bottom
layer does NOT have a border the top layer onMouseOver event fires
fine.


<div style=" position:relative; width:100px; height:100px;">
<DIV onMouseOver='alert("Top")' style='position:absolute; top:0px;
left:0px; width:100px; z-Index:2; height:100px;'></DIV>
<DIV onMouseOver='alert("Bottom")' style='position:absolute; top:0px;
left:0px; width:100px; z-Index:1; height:100px;'></DIV>
</div>


But if the bottom layer has a border. When moving over the bottom
layer's border the bottom layers onMouseOver event fires instead of the
top layer even though the top layer should. It works as expected in
FireFox but not IE. Anyone know how to get around this?

Put the border on the top layer.
 
R

Robert Frost-Bridges

I can't. I need a invible layer above all borders. Anyone have an idea
on how to get around this issue in Internet Explorer?

Make the top layer bigger.

regards,
 

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,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top