November 26th, 2012, 09:00 PM
Z-index positioning within multiple boxes in IE7
A real simple z-index problem. Easiest just to show:
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,
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.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Last edited by daprezjer; November 26th, 2012 at 09:06 PM.
November 26th, 2012, 09:20 PM
Update, I found the answer here, which is kind of a ridiculous workaround but gets the job done:
If you know of a better way, feel free to let me know, but seems that the 'net' has settled on this one.
Comments on this post
November 26th, 2012, 11:51 PM
Congratulations on finding a solution and thanks for posting it.
I'm not aware of a better solution.