views:

438

answers:

1

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.

+1  A: 

IE6 can't calculate what 100% is without a height specified to the containing element. To my knowledge there really isn't anything you can do to get exactly what you want here with CSS, but you could use some sort of javascript to find the height of the container and then set the height of the transparent div to match the container's height.

Using jQuery, I believe it would look something like this:

var containerHeight = $('#contentDiv').height() + 'px';

$('.tranparentDiv').height(containerHeight);
Chris Schmitz
Hey thanks for the answer. I actually ended up doing exactly that :). I generally do not like using JavaScript as a solution as some people turn it off. I wrote it in such a way that the Java is only run if IE 6 is used. I figured that if someone is smart enough to turn JavaScript off they would probably not use IE 6.
phunder
"if someone is smart enough to turn JavaScript off they would probably not use IE 6" - Ha, that's very true :) -- Glad you got this straightened out.
Chris Schmitz