#1
  1. hiding my <b> from ur <strong>
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Posts
    959
    Rep Power
    181

    Z-index positioning within multiple boxes in IE7


    A real simple z-index problem. Easiest just to show:

    http://jsfiddle.net/C6fPQ/2/

    I'm trying to get the red box, which is absolutely positioned inside the blue box, to hover over the same blue box below it, and it needs to be cross-browser compatible back to IE7. This code works in other browsers, but not IE7. I've tried making z-index of the outer blue box 0, but that actually makes it not work on IE7 and all other modern browsers. Not sure why as I'd think the z-index of the inner div would supercede that of the outerdiv, but in any case...

    Thanks for any help you may be able to give,
    Jeremy

    P.S. I've googled the error and found this advice but I can't apply a higher z-index to the initial parent because the blue divs will have the same class.

    http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/



    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    .bluebox {
    background-color:blue;
    margin-bottom:5px;
    position:relative;
    width:100px;
    height:100px;
    }

    .redbox {
    display:block;
    position:absolute;
    top:75px;
    left:0px;
    height:50px;
    width:50px;
    background:red;
    z-index:5;
    }
    </style>
    </head>
    <body>
    <div class="bluebox">
    <div class="redbox"></div>
    </div>
    <div class="bluebox"></div>
    </body>
    </html>​
    Last edited by daprezjer; November 26th, 2012 at 09:06 PM.
    ****
    Enjoy my post? Drop some props by hitting the scales button up top. JBL

    Website Design in Los Angeles and Washington, DC by PoweredPages.com
  2. #2
  3. hiding my <b> from ur <strong>
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Posts
    959
    Rep Power
    181
    Update, I found the answer here, which is kind of a ridiculous workaround but gets the job done:

    http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

    If you know of a better way, feel free to let me know, but seems that the 'net' has settled on this one.

    Comments on this post

    • Kravvitz agrees
    ****
    Enjoy my post? Drop some props by hitting the scales button up top. JBL

    Website Design in Los Angeles and Washington, DC by PoweredPages.com
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Congratulations on finding a solution and thanks for posting it.

    I'm not aware of a better solution.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo