Hey there! I have a bit of a sticky IE 6 problem (don't we all?).
I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background's body image and containing non-transparent content. This consists of three divs really:
One big container div, one absolutely positioned transparent div for the background and one relatively positioned div with the non-transparent content.
I position the two divs inside the containing div so they sit on top of each other giving the appearance of a transparent background with non-transparent content.
The Containing div is pushed to the size of the content div. I set the transparent background's height and width to 100% causing it to take on the containing div's size. This then means that my background expands with the content making all my div's extensable.
This last bit is where the problem comes in. IE 6 does not cause the background div to take on the height of the containing div. If I specify a height it works fine, but this means that I loose the extendability of the whole thing.
Here is the basic code:
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="contentDiv">
<div class="tranparentDiv"></div>
<div class="nonTranparentContent">
<div class="contentBody">
<h2 id="quote">“time is given to let you apply what you have learnt in reality.”</h2>
<p>– Nandipha Nombuthuma, Concept Interactive graduate</p>
</div>
</div>
</div>
</body>
</html>
CSS code (save as “style.css”)
@charset "utf-8";
/* CSS Document */
body{
background:url(bg.png);
}
.tranparentDiv{
-khtml-opacity:.6; /*several different ways to set the transparency to ensure cross browser independence*/
-moz-opacity:.6;
-ms-filter:"alpha(opacity=60)";
filter:alpha(opacity=60);
opacity:.6;
position:absolute;
top:0;
left:0;
background:#FFFFFF;
width:100%;
height:100%;
}
.nonTranparentContent{
width:inherit;
position:relative;
}
#contentDiv{
width:500px;
margin-left:auto;
margin-right:auto;
position:relative;
/*height:200px add this to work in ie 6*/
}
I'd appreciate any suggestions how I could work around this. I would hate to have to go and set a height every time I change my content.