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” />
<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>