Z-index issue with greyed out layer

HTML & CSS
1

I have craeted a greyed out layer that sites above the website when called, and inside that I have another div, and its this div that is confusing me.

I am using z-index to try and get the inner div to not adopt the alpha transpareny of its parent div, and its just not working.

Here is the css:


#cover{
	position:absolute;
	top:0px;
	left:0px;
	overflow:hidden;
	width:100%;
	height:1500px;
	background-color:#000000;
	opacity:0.5;
	MozOpacity:0.5;
	z-index:10;
	filter:alpha(opacity=50);
	text-align:center
}
#warning{
	margin:auto;
	position:relative;
	width:400px;
	height:200px;
	background-color:white;
	color:black;
	padding:10px;
	opacity:1.0;
	MozOpacity:1.0;
	z-index:100;
	filter:alpha(opacity=100);
	top:200px;
	margin-left:auto;
	margin-right:auto;
}

Here is the html:


<div id="cover">
<div id="warning">
<p align="center">
<input type="button" onClick="javascript:location.href=('http://www.);" value="Return to admin" />
</p>
</div>
</div>

Its working fine and appearing when i want it too, but the warning div adopts the transparency of cover and the effect isnt right, as i wont warning to be a solid colour.

Cheers

2

Opacity is automatically transferred to children. There is no way around that using pure CSS. You must use the techniques listed in this quiz, which interestingly enough, we had. It’s basically just modifying HTML mostly, and then matching up some CSS to make it fit. You’ll see.