I have this div
#content {
z-index:100;
width:698px;
min-height:300px;
padding:0px;
background-color:#FFF;
-moz-opacity:0.6;
filter:alpha(opacity=60);
margin:0px;
float:left;
}

That is just a 60% white background.

Then i have another div with just text on it with this
#text {
z-index:101;
width:698px;
height:auto;
padding:0px;
margin:0px;
background-color:inherit;
}

But it is still getting the opacity properties from the content div.

Any ideas?

Tim
}

First of all, z-index will be ignored unless your element is positioned either absolutely or relatively.

Is #text INSIDE #content ? If so, you've told it to inherit the background of it's parent.

Yeah it's inside BUT... i tried using a colored background for #text instead of inherit. (red) And it only made the red bg in the text div transparent as well.

Help!!! Has to be worked out in 20 minutes! heh
Please

Transparency always gets inherited by the inner div whether you specify it or not. I wish it weren't the case because it reduces the usefulness of transparency a lot.

As far as I know all browsers are going to give the inner div the same transparency as the container div.

What a bummer.. No work arounds?

I've never figured out a way around it, but there are smarter people than me so maybe someone has. I haven't seen it though.

I agree it's a bummer. I always thought it would make a nice effect for a drop down menu to have the background semi-transparent, but have the text be fully opaque. Unfortunately the text inherits the transparency. It can sill look ok if you choose the right color combination and opacity setting, but not usually quite what you want.

If you do find a solution please post it here. I've been hoping to find one for awhile.