September 10, 201015 yr Hey guys, just a question about this z-index issue. I've been reading a lot about how z-index doesn't work in IE to try and fix the problem I'm having. One post said that the trick was to give your parent a z-index and set position to either relative or absolute. I've tried all sorts, but nothing have some of if. Could someone take a look and see if anyone can see the problem: </head> <body id="home"> <!--wrap--> <div id="wrap"> <!--main--> ... <div id="vpbg"></div> ... <div id="promo"></div> ... </div> <!--end wrap--> </body> </html> Heres a simple version of the code for you to see. What I'm wanting to happen is for #dark to be higher than #promo but below #vpbg. Which works fine in every other browser. But IE always places #dark above everything. Seeing as it said give your parent a z-index value. I figured the only parent this particular div had was the wrap. So I gave the wrap a value of 1. But then it just made all the browsers display it all the same with #dark over everything. Anyone know why this is happening? Here is the css for all the DIVs that work in all browsers but IE: #wrap { position:relative; width: 960px; margin-left: auto; margin-right: auto; margin-top:4px; } #vpbg { position:absolute; left:0; top:76px; width:956px; height:267px; z-index:30; background-image: url(img/vpbg.jpg); } #dark { position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:20; background-color: #000000; } #promo { position:absolute; top:571px; width:954px; height:192px; background:#FFFFFF; border-style:solid; border-width:1px; border-color:#cbcbcb; background-repeat:repeat-x; background-color: #F9F9F9; background-image: url(img/promo.jpg); z-index:10; } Even if someone knew how to get a div ontop of #dark in ie it'd be fine. I could do the rest. I just can't seem to get a div above it. Thanks for any help.
September 11, 201015 yr Author Where are you using the id dark Sorry forgot to include that. It's outside the div, it's a css lightbox kind of thing: </head> <body id="home"> <!--wrap--> <div id="wrap"> <!--main--> ... <div id="vpbg"></div> ... <div id="promo"></div> ... </div> <!--end wrap--> <div id="dark"></div> </body> </html>
September 11, 201015 yr The easiest way would be to put the a #dark inside your #wrapper not sure if thats an option in your case?
September 11, 201015 yr Author The easiest way would be to put the a #dark inside your #wrapper not sure if thats an option in your case? No sadly not, I need that div to be 100% width and height of the page. So It needs to be outside the div, as far as I know. It'd probably be an easier fix if I was able to place it inside the wrap. But sadly I can't. Anymore suggestions? I've been reading up on an iframe fix, which seems a little bit over the top just to fix some z-index. But I may have to give it a go. //EDIT. Fixed. Was able to fix this by moving all the things I wanted to be above the wrap into a second wrap with a higher z-index.
Create an account or sign in to comment