I am having trouble with the css of a modal box I am making. The oBox_content div is for some reason inheriting the transparency of the oBox_overlay div. I'm sure there is something wrong with my code so if you have any ideas...

My HTML:

<div id="oBox_overlay" style="display:block;">
	<div id="oBox_content">
		<!-- content goes here -->
	</div>
</div>

My CSS:

#oBox_overlay
{
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	height:100%;
	width:100%;
}


#oBox_content
{
	position:absolute;
	width:450px;
	min-height:250px;
	top:20%;
	left:30%;
	background-color:#FFFFFF;
	border:3px solid #666666;
	padding:10px;
	z-index:100;
	filter:alpha(opacity=100);
	-moz-opacity: 1.00;
	opacity: 1.00;
}

thanks guys!

Not sure what you're trying to achieve there. Position:fixed is not supported by IE, and there only a few reasons to use position:absolute too. Since you've got them both set to a z-index of 100, they are going to occupy the same 'layer'.

As far as the transparency is concerned I don't think you're doing anything wrong. It's unfortunately the way transparency works at the moment I believe.

When you set transparency on an element everything inside that element inherits the same transparency. I don't believe you can override it either.

Kind of makes transparency a lot less useful than it could be.

LadynRed:
position:fixed seems to be recognized by ie 7 at least. I changed it to position:absolute anyway though and nothing changed.

I am trying to achieve a simple modal box. oBox_overlay covers the whole browser with a opaque black layer. oBox_content sits right in the center with a white background and displays any alerts or messages. The problem I am having is that the white background of oBox_content is opaque as well.

As far as positioning goes, everything seems to be cross-browser compatible.

If you have time, you should be able to simply copy and paste the code I posted into an html file with some content in the oBox_content div and see what I'm talking about.

Problem solved! I simply added and rearranged the divs

Here is a simplified version of my new code:

The HTML:

<div id="oBox" style="display:block;">

     <div id="oBox_overlay"><!--opaque overlay--></div>

     <div id="oBox_content"><!--content here--></div>

</div>

The CSS:

#oBox_overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=90);
	-moz-opacity: 0.90;
	opacity: 0.90;
	height:100%;
	width:100%;
}

#oBox_content {
	position:absolute;
	width:450px;
	min-height:250px;
	top:20%;
	left:30%;
	background-color:#FFFFFF;
	border:3px solid #666666;
	padding:10px;
}

#oBox
{
	
	
}