#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    8
    Rep Power
    0

    Div stacking problem on Internet Explorer


    I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency.
    This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help!

    The complete html is:

    <head>
    <title>Example</title>
    <style type="text/css">
    body
    {
    margin:0px 0px 0px 0px;
    background-color:white;
    }

    .wrapper
    {
    height:425px;
    width:520px;
    background-color:cyan;
    margin-left:auto;
    margin-right:auto;
    top:0px;
    }

    .midbox
    {
    height:280px;
    width:520px;
    }

    .shaded
    {
    position:relative;
    z-index:0;
    height:95px;
    width:520px;
    background-color:yellow;
    filter:alpha(opacity=50); /* for IE */
    -moz-opacity:0.5; /* for older browsers */
    -khtml-opacity:0.5; /* for older browsers */
    opacity:0.5;
    }

    .unshaded
    {
    float:left;
    position:relative;
    z-index:1;
    filter:alpha(opacity=100); /* for IE */
    -moz-opacity:1.0; /* for older browsers */
    -khtml-opacity:1.0; /* for older browsers */
    opacity:1.0;
    height:95px;
    width:520px;
    }

    .bigName
    {
    position:relative;
    border-style:none;
    font-family:Arial Unicode MS;
    font-size:50px;
    width:250px;
    height:55px;
    }

    .bigUsername
    {
    position:relative;
    border-style:none;
    font-family:Arial Unicode MS;
    font-size:15px;
    width:250px;
    }
    </style>

    </head>

    <body>
    <form id="form1">

    <div class="wrapper" >
    <div id="divTop" class="unshaded">
    <table width="320px"><tr><td align="center">
    <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" />
    <br />
    <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" />
    </td></tr></table>
    </div>
    <div id="divTopS" class="shaded"></div>

    <div id="divMid" class="midbox">
    <!--some stuff here-->
    </div>

    <div id="divBot"class="unshaded">
    <input type="submit" value="a button" />
    </div>
    <div id="divBotS" class="shaded">
    </div>
    </div>

    </form>
    </body>
    </html>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    50
    Rep Power
    10
    I just posted in another area about this.. but I think your problem lies here:http://archive.thedevweb.com/2009/1028.html

    basically, assign position:relative to the parent div, and a HIGHER z-index value than the divs it contains . Makes a ton of sense, right?

    Lemme know.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    8
    Rep Power
    0
    Thanks for the suggestion! I've tried doing that before (and tried again just now, just in case) but for whatever reason, that hasn't been working. Sad day.
  6. #4
  7. Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2003
    Posts
    2,343
    Rep Power
    583
    Try adding a DOCTYPE to your page, to take IE7 out of quirks mode.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    8
    Rep Power
    0
    Sorry to confuse you. I have a DOCTYPE on my page, just didn't post it.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    50
    Rep Power
    10
    There's some ID's there that aren't defined in the CSS.. are those being passed to javascript? I'll throw this code in PSPad. You say it renders exactly how you want in FF? I'll see if I can at least match that in IE.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    50
    Rep Power
    10
    Well one thing I noticed is that your wrapper is too small for all of the content.
    It's only 425px, and the content within adds up to 660px, creating overflow...although that doesn't help the problem at hand much.
    Ah wait.. they are layered on top. I get it. Still seems a little weird to me.

    Update: After playing with this for a while.. I finally understand the problem. lol. Ok.. now let's see if I'm somewhat l33t.
    Last edited by mszorad; February 11th, 2010 at 06:20 PM.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    50
    Rep Power
    10
    I think I got it.
    Change position:relative for .shaded to position:absolute.

    Let me know if that solved your headache... it stumped me as well.
    If that's all it was... let's both kill ourselves!
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    8
    Rep Power
    0
    Thanks so much mszorad!!
    I tried your fix, and actually had to change it to position:absolute both in .shaded and .unshaded but then bam! stacking divs!! (of course, now .midbox needs some fixing but nothing is perfect- THAT part at least will be workable!) I really appreciate your help!!
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    8
    Rep Power
    0
    If anyone cares how I fixed .midbox I just changed the height to 330px. Woohoo everything's fixed!!
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    50
    Rep Power
    10
    NP.

    I never use the opacity filters because I'm such a stickler for valid code. I usually end up using transparent pngs instead.. which we all know IE6 just loves. Thank god Google is dropping support for IE6. The solution you have, however, seems to work fine

    Lemme know what the final product looks like!

IMN logo majestic logo threadwatch logo seochat tools logo