Z-index different in IE vs Firefox?

Z-index orders layers (the higher the number, the higher the layer).

So why does my site appear ok in Firefox but the body-bg.jpg disappears in Internet Explorer?

http://69.89.31.182/~drainma1/index.html



/*The body contains the 5x500 narrow gradient strip: */
body {background: #191814 url(images/body-bg.jpg) repeat-x top;
	position:relative;
	z-index: -100;
	font: 12px Verdana, Helvetica, sans-serif;
}

/*Next, the header lays on top of that.*/
#header {
    position:relative;
    height: 119px;
    z-index:50;
}

/*Then the logo and banner lay on top of both:*/
img#chute {
    position:absolute;
    top:17px;
    left:275px; /*was 311px*/
    z-index: 95;
    height:170px;
    width: 326px;
}

Not sure myself, but I think that’s handled by the ISP and it’s all temporary anyway until I change the DNS at the original source to the new ISP.

But I know it works because I can change the style and I see the results, so, shrug.

As the header will ALWAYS lie on top of the body, why bother with a z-index for th ebody and the header, jsut delete them both. Then start with no z-index for the logo#chute and see if you actually need to be using z-index at all.

You should be adding the minimum to get the result, not automatically using z-indexes in eight different places as at present.

Because InternetExplorer is a piece of crap, basically.

However, I’ve got a vague memory that IE doesn’t like negative z-indexes. Have you just tried a z-index of 1? In fact, you shouldn’t need a z-index on the body at all for this, as it will naturally sit behind the rest of the content.

Yes, I changed the path and you’re right. that seemed to be the missing mark.

I’ll just have to remember to change it back when I change the DNS on launch day.

Thanks!

You should not even need position:relative; on the body either. When I link directly to your BG image it shows up for me in IE7/8 using Dev Tools.

body {
    background: #191814 url([COLOR=Blue]http://69.89.31.182/~drainma1/images/body-bg.jpg[/COLOR]) [B]repeat-x;[/B]
    font: 12px Arial, Helvetica, sans-serif;
}

No need to say 50% top here either, repeat-x will do just fine. I suspect you have some problems with your server or file paths.

To be honest, I don’t see how any styles are being applied, as the link to the style sheet seems to be wrong.

Your style sheet is located at

http://69.89.31.182/~drainma1/style.css

but the link in the head points to

http://69.89.31.182/style.css

Not sure if changing that will help, but I’m confused as to how the page is referencing any styles at all. :confused:

Well, removing it didn’t make any difference. Nor setting it to 1.

Patience, IE has the same choices as any species–migrate, adapt or go extinct.

I’m open to other suggestions, thanks.