Layer visibility issues in different browsers

[W8 4me]

Hi all,

I've almost put the finishing touches to my site http://www.adkm.co.uk/, but had to change the HTML/CSS recently.

Anyhoo, after changing the code, yet again I've fallen foul of both IE and Chrome (latest versions).

The site displays fine in FF, SF and OP, but in comparison:

IE displays the opacity background but not the text.

Chrome displays the text but not the opacity background.

Normally when I have an issue with IE, there's a problem with Chrome too (they use the same source engine?).

The 'offending' code?...

The #opacity_background layer has it's z-index set to 1 (to sit above #background (and be on the same layer as #table), and I have not specified a z-index for the #text layer (which contains the text).

I have tried specifying the z-index for #text (to 2) but this changes nothing.

My site validates (HTML). The CSS doesn't validate due to the use of the opacity effect for various browsers, but I can't see why that would mess these things up. Both the #opacity_background and #text layers have worked before on IE and Chrome before I made the changes.

I can't see any missed semi colons in my code... a bit stumped! Please can you tell me if I've just simply made an error somewhere here? I've been staring at the screen too long...

thanks guys

[ctoz]

IE & Chrome use different engines: Chrome and Safari use both use 'webkit'; you can hack both, but it probably isn't germaine here.

My only suggestion would be to separate your layers more: and maybe, esp if you have a background on the body, start your element layering at a higher number than 1. There's probably a W3C recommendation about this.

hth

[W8 4me]

Thank you for helping. I first tried a few things from Google re: IE6/7 related z-index errors, such as making the parent of the absolute layer relative and a high z-index like 99. Then make the child absolutes 0, 1, 2 etc. No change.

I tried what you suggested, I think, if I got you right:

#background z-index: 1
#table z-index: 2
#inner_table z-index: 3
.submenu1, .submenu2 ol, .submenu3 ol z-index: 4

No change.

I'll keep tinkering, but I'm beginning to see why IE is hated!

[W8 4me]

Odd - I just removed all the z-indexes and the site works as intended on all browsers - but still not IE. What the hell?

I can't see why making my site cross-browser compatible is so difficult...

[W8 4me]

I fixed it...

1. Removed all references to z-index from the style sheet, it seems all the browsers stack the layers automatically (dependent on where they appear in the HTML?).

2. Removed position: relative from #inner_cell2 (it seems that this was making the #text layer hidden).

3. Gave the submenus z-index: 99 to ensure that they would appear on top of everything else.

Done - tested and working in IE, GC, FF, SF, OP.

You learn something new every day!

[ctoz]

so did I... but I'm keeping my Zeds for now