Overlay and Box Opacity Conflict - css

Question

Using this block of code to create an overlay and a box.
problem: the box is inheriting the opacity of parent and I will like it to have no transparency.
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
<div id="overlay"><div id="formed">Enter Here</div></div>

Answer 1

That's the way it works, unfortunately. For the parent div, you can try using RGBA for the background color - background: rgba(0, 0, 0, 0.5); http://css-tricks.com/rgba-browser-support/

Answer 2

For something like this (assuming you don't need to support IE7 or earlier), apply the opacity to a pseudo-element as this fiddle does. Code:
CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
text-align: center;
}
#overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 0;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 1;
}

Answer 3

Thanks Guys. I was able to solve the problem by doing two things:
Taking the child div outside it's parent.
<div id="overlay"></div><div id="formed">Here</div>
Altering the positioning of both div's
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
display: none;
}
#formed{
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: white;
width:300px;
height:200px;
position: absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 12000;
border: 2px solid #eee;
display: none;
}