transparante overlay

Ik zit met een probleempje. Ik heb al op 2 manieren een transparante overlay gemaakt.

Manier 1:
Met een transparante .png plaatje van 1x1 px. Probleem hierbij is dat op sommige pc's met IE dit niet in 1 x op het scherm verschijnt maar zeg maar opbouwt van boven naar beneden. Dat ziet er niet uit en duurt lang.

code hiervan:

.overlay {
	background-image:url(../images/overlay.png);
	background-repeat:repeat;	
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
}
.msgbox {
	width:350px;
	height:125px;
	border:2px solid #e30000;
	background-color:#FFFFFF;
	z-index:100;
	padding:15px;
}

Manier 2:
Gewoon met een zwarte background color en in css opacity instellen. Werkt opzich goed maar de div die ik weer hier in wil laten zien wordt ook transparant. Ook als ik daarin de opacity gewoon op 100 zet en de z-index hoger zet dat de overlay.

code hiervan:

.overlay {
	background-color:#000000;
	Filter: Alpha(Opacity=80);
	-moz-opacity:0.80;
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
}
.msgbox {
	width:350px;
	height:125px;
	border:2px solid #e30000;
	background-color:#FFFFFF;
	z-index:100;
	padding:15px;
	Filter: Alpha(Opacity=100);
	-moz-opacity:1;
}

Dus eigenlijk was ik wel tevreden met de PNG oplossing aangezien de msgbox div dan gewoon zonder opacity weergeven werd alleen het blijkt dat het in IE dus langzaam werkt. Hoe doen jullie dit iemand suggesties?