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?

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

/*Next, the header lays on top of that.*/
#header {
    height: 119px;

/*Then the logo and banner lay on top of both:*/
img#chute {
    left:275px; /*was 311px*/
    z-index: 95;
    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.


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][/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

but the link in the head points to

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.