A real simple z-index problem. Easiest just to show:
http://jsfiddle.net/C6fPQ/2/
I'm trying to get the red box, which is absolutely positioned inside the blue box, to hover over the same blue box below it, and it needs to be cross-browser compatible back to IE7. This code works in other browsers, but not IE7. I've tried making z-index of the outer blue box 0, but that actually makes it not work on IE7 and all other modern browsers. Not sure why as I'd think the z-index of the inner div would supercede that of the outerdiv, but in any case...
Thanks for any help you may be able to give,
Jeremy
P.S. I've googled the error and found this advice but I can't apply a higher z-index to the initial parent because the blue divs will have the same class.
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.bluebox {
background-color:blue;
margin-bottom:5px;
position:relative;
width:100px;
height:100px;
}
.redbox {
display:block;
position:absolute;
top:75px;
left:0px;
height:50px;
width:50px;
background:red;
z-index:5;
}
</style>
</head>
<body>
<div class="bluebox">
<div class="redbox"></div>
</div>
<div class="bluebox"></div>
</body>
</html>
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
