Problem with IE 5 & 6 changing layer order

[design8]

Hi there,
I am working on a site design and have uploaded it to browsershots to see what it looks like in other browsers. It seems that earlier versions of IE are messing with my layer order, putting the background banner in front of the other elements.

Here are two links, the first is showing the banner placed correctly in IE 8 (and all other browsers), the second is showing what it does in IE 5 and 6.

<snip>

<snip>

I'm not sure if this is an easy fix or if it's something more involved. My first instinct says it's something to do with the way I have organized my layers.

I have a div at the top called #banner. That is the aqua banner. My background that is tiling in the body is the brown floral texture. I can't very well make the banner a part of the tiling background because then it would start to repeat further down the page.

So, how do I configure the banner so it renders correctly in IE, behind the other elements? I thought giving the banner a z-index 2 and the others a z-index 3 would work but it doesn't work.

Any help would be truly appreciated. I've been pulling my hair out over this one.

[edited by: swa66 at 5:44 pm (utc) on June 30, 2009]
[edit reason] No personal URLs please see ToS and forum charter [/edit]

[Tristantio]

IE5 is unsupported by Microsoft and anyone can upgrade to IE8 for free...

Why not just tell your clients to upgrade?

I make sure my work functions in the latest 2 versions (so currently IE7 and IE8) but why worry about anything older than that?

[swa66]

IE5 really is beyond hope for most things, the IE5 family includes among others that IE version they made for macs, which even for IE was a wierd one.
IE5 also has -for any site I have access to the statistics- nearly no market share anymore (well below 0.1% )

IE6 is unfortunately another story for me: it's still got a 15% market share on some of my sites so I still cannot ignore it.
It means I'll have to make sure most of my stuff works for IE6, IE7, IE8 and the other standard compliant browsers.

[design8]

I apologize if the links I pasted fell under what is not allowed in this forum.

I hope my simple description of a banner incorrectly laying over other elements in the page is enough for someone to visualize and offer suggestion as to what I may do to prevent the problem.

Thank you to Tristantio and swa66 for your comments and thoughts. I agree, it would be wonderful to have everyone on the same page and running the most current versions of browsers. I was just trying to make my site viewable by the most people. I guess I can just post a link to the most current download for IE for anyone who may have a problem viewing my site.

[edited by: swa66 at 1:16 am (utc) on July 2, 2009]

[swa66]

Posting some minimal code that replicates the problem might make it easier to understand.

For IE6: - not sure if this is the case here - it does create unwarranted new stacking contexts, and that might well be what you're seeing. Unfortunately, avoiding triggering that can be terribly hard (esp. if you need "hasLayout" for other reasons or can't easily avoid triggering it.)

But we'd need a minimal code set to give it a try.