Div stacking problem on Internet Explorer

kokomokola posted this at 22:26 — 9th February 2010.

They have: 8 posts

Joined: Nov 2009

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>

webwiz posted this at 04:15 — 10th February 2010.

He has: 629 posts

Joined: May 2007

Does this tutorial help? - http://webwiz.robinshosting.com/temp/

kokomokola posted this at 18:28 — 10th February 2010.

They have: 8 posts

Joined: Nov 2009

Hmm, the site was blocked for me as an "attack site"? I'll try going there again later.

greg posted this at 14:34 — 11th February 2010.

He has: 1,581 posts

Joined: Nov 2005

kokomokola wrote:

Hmm, the site was blocked for me as an "attack site"?

Same here

webwiz posted this at 20:50 — 11th February 2010.

He has: 629 posts

Joined: May 2007

Sorry folks. I put that up on a school's website for students' benefit. The site seems to be having problems. I was unaware of them because none of my Mac browsers block the page...

Normal service will be resumed as as soon as possible...

Try a "real" tutorial instead: CSS background transparency by Robert Nyman.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

kokomokola posted this at 18:49 — 12th February 2010.

They have: 8 posts

Joined: Nov 2009

For anyone interested, the fix has been found! All that was needed to do was:
1. position:relative in .shaded and .unshaded was changed to position:absolute
2. The height in .midbox was changed to 330px

Thanks for the help webwiz (David)! The tutorial looked really interesting! I wasn't sure about doing it that way, however, since the comments on it seemed to indicate that it wasn't extremely cross-browser compatible.

webwiz posted this at 04:52 — 14th February 2010.

He has: 629 posts

Joined: May 2007

FWIW - Semi-transparent PNG backgrounds work everywhere except IE 6 and older. The Microsoft Alpha filter works for Internet Explorer. The newer RGBA color model can be used with recent versions of all modern browsers. (I do not consider IE 8 a modern browser...)

Saves a lot of messing about with extra markup and dealing with browser positioning bugs. So glad you found a solution that works for you.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;