www.webdeveloper.com
Results 1 to 6 of 6

Thread: Layer visibility issues in different browsers

  1. #1
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267

    Layer visibility issues in different browsers

    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

  2. #2
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    221
    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

  3. #3
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    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!

  4. #4
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    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...

  5. #5
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    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!

  6. #6
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    221
    so did I... but I'm keeping my Zeds for now

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles