Getting Z-Index to Work on IE8/FF and... IE7 (which is the problem)

HTML & CSS
1

Check out this page:

Demo Page

In it you’ll see flash player that I’m resizing. When you click the “lights out” option underneath th video player (to the right underneath it), IE8 and FF and Chrome all do great. The video expands, a black covers the browser window and some extra parts of the site, and you can still see the video player. (you can push the light bulb in upper right corner to go back to normal viewing)

But, when I turn on compatibility mode for ie7, the thing starts freaking out. When I click “lights out”, the black covers everything (it is appended to the document.body through javascript) and the flash disappears entirely.

I know ie7 has a z-index bug, and it’s obviously not listening to the z-index of 5000 that the div has that’s holding the player. How can I get ie7 to respond like the other browsers?

Cheers
Ryan

2

Hi, first lemme say, that page is a nightmare to debug. I almost cried when I saw the massive inline styles ;).

The outer parent needs the z-index applied

.mainbg{position:relative;z-index:2700;}

However that will show the entire rest of the page so you may wanna rethink the structure. I’m afraid to even touch the code because someone can get lost very easily on all the messy code you have.

3

lol. Yeah, I got a ton of sh*t going on. Doing the z-index causes an appearance, but the whole body.

The idea of the black background is to “lights out” everything, so it mimics flash fullscreen, but doesn’t use all the flash fullscreen resources; enabling slower computers to enjoy bigger video.

The ie7 has two issues. First, the div that turns everything black is created by Javascript and appended to the document.body.


.blackout {
position:absolute;
width:100%;
height:1000px;
vertical-align:middle;
text-align:center;
text-align: -moz-center;

background:#000000;
z-index:2600;
padding-top:250px;
top:120px;
left:-0px;
color:#FFFFFF;
filter:alpha(opacity=95);
	-moz-opacity:0.95;
	-khtml-opacity: 0.95;
	opacity: 0.95;

}

Since the java appends it to body, it means it is practically the last element on the page, and ie7 and earlier versions automatically give z-index priority to elements that come last; unless each and every element has a z-index given to it.

In ie7, the flash can’t even expand out of left column – though I have overflow: visible – without the right column getting a lower z-index. I’ve tried changing the z-index on each, but then it causes the black to cover everything up in all other browsers too.

I might just disable the expand function (maybe a java alert) if the user is running any IE version but 8.x

Ryan

4

You need to renest the <object> outside of the .mainbg div. Since the outer parent needs it you need to get the object outa there. Or else everything in there will be on top :).

I have to run to bed now since I’m already gonna get no sleep for tomorrows busy day, but hopefully someone else can chip in if you haven’t gotten this solved :slight_smile: