Grow your CSS skills. Land your dream job.

IE issues… is z-index the culprit?

  • # December 6, 2012 at 10:21 am

    Hi

    I am developing a site that includes a lot of layering per the design and has been tricky for me to code. I have used z-index quite a bit to achieve the look. At this point, everything displays properly on the mac in safari, firefox and chrome as well as in firefox and chrome on the PC. Unfortunately, IE is not displaying like the other browsers. Specifically, it is throwing the navigation to the right of the entire site, moving the navigation dividing lines up and not displaying the dropdown below Products.

    Correct layout: http://www.tweyen.com/test/cmt/screenshots/correct.png
    IE’s interpretation: http://www.tweyen.com/test/cmt/screenshots/bad_ie.jpg

    I know that the navigation works properly (including the dropdown aspect and not pushing the dividing lines up) in IE because I stripped it down and checked. I am having problems when it is integrated into the layout. I am trying to use the technique to absolutely position the navigation within a centered, relatively positioned div in order to keep the navigation from moving upon window resizing. I have done some research on using position relative and absolute with z-index because I think that might be where my problem is. Apparently, IE treats z-index differently than other browsers. So, I have checked multiple times that the z-index numbers are in the proper order:

    slideshow is at 0
    slideshow images at 1
    background gradient is at 3
    navigation gray bar with black gradient is at 10
    content is at 15
    logo is at 20
    navigation div and inner div are at 50
    navigation ul is at 597
    navigation dropdown is at 599

    I found this note that seemed very insightful and might be the key to my problem, but I don’t fully understand it: http://stackoverflow.com/questions/672228/ie-6-ie-7-z-index-problem (see comment 113)

    Here is the site: http://www.tweyen.com/test/cmt/index.html
    I know it is a bit complicated. I have tried to strip out content I believe to be unrelated to the issue (content in the body below the slideshow).

    I would appreciate any confirmation of z-index being the problem and/or any suggestions in general on how to try to solve this stinky IE issue. I have spent hours and hours on this and am really stuck.

    Thanks so much in advance!

    # December 6, 2012 at 10:27 am

    >I have used z-index quite a bit to achieve the look.

    Here’s my guess at your basic problem.

    Certainly there might be (are) instances where use of z-index in necessary to achieve a certain look but overuse usually (to my mind) means that is something fundamentally amiss in your code.

    # December 6, 2012 at 10:36 am

    I agree with @Paulie_D. Z-index is not the culprit. Extensive (and unnecessary) use of positioning is.

    # December 6, 2012 at 11:13 am

    I would also point out that you haven’t said which version of IE.

    Using IE10 and ‘switiching modes’ in the Dev Tools , it’s fine until IE7

    Also, you have div#navbar which holds nothing but is v.large but has a bg image. Probably not the issue…but bad practice all the same.

    # December 6, 2012 at 12:15 pm

    Thank you for the feedback!

    I’m not sure how to achieve the look without z-index. I have certain elements that need to go infinitely horizontally, others infinitely vertically and others that need to stay in the centered div.

    Right now, I am looking at IE 9, but having been checking back through IE 7.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".