Problema com popup

Estou com o seguinte problema:

-Quero que ao abrir uma pagina a tela escureça e apareça um pop up que flutue na tela.

Fiz da seguinte forma: criei duas divs: a primeira oculpa a tela inteira e faço esta ficar opaca(opacity:0.7)

a segunda com as dimensoes que eu quero e com o texto. No internet explorer a div grande não desliza ao fazer scroll na tela e não fica opaca

no mozila a div filha também fica opca, gostaria que ela ficasse normal.

segue ai o codigo:

arquivo.html

<div id="popup-main">
 <div id="popup" class="popup">
 <h3>titulo texto</h3>
 <p>texto</p>
 <small><a onClick="fechar();">[X]Fechar</a></small>
 </div>
</div>

arquivo.css

#popup-main
{

	position: fixed !important;
 position: absolute;
 top: 0px;
 left: 0px;
 z-index: 10;
 width: 100%;
 height:100%;
 opacity: 0.7;
 color: #00000;
 background-color: #000;
 display:none;
}

*.popup-main
{

 filter: alpha(opacity = 0.6);
}
#popup{
	position: fixed !important;
	position: absolute;
	top: 35%;
	left: 35%;
	width: 300px;
	height: 150px;
	padding: 20px 20px 20px 20px;
	border-width: 2px;
	border-style: solid;
	background: #063;
	color:#FFF;
	display:none;
}