If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Layer visibility issues in different browsers

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.