Not signed in (Sign In)

Vanilla 1.1.8 is a product of Lussumo. More Information: Documentation, Community Support.

Syntax Highlighting

You can highlight any code you post by wrapping it in the BBCode tags, [code lang="css"]code here[/code]. Other usable lang values are "xml", "html", "xhtml", "css", "js", "javascript", "php", "sql", "python", "py", "ruby", "rb", and "java".

Choose the Format Comments option "SyntaxHighlighter" to use this BBCode. Note that no other BBCode is supported at the moment.

Browser Issues: Div stacking problem on Internet Explorer

Bottom of Page

1 to 2 of 2

- CommentAuthorkokomokola
- CommentTimeFeb 9th 2010 edited
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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<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">

</div>

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

</form>
</body>
</html>
- CommentAuthorkokomokola
- CommentTimeFeb 12th 2010
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

1 to 2 of 2