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...
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.
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: