Problème de transparence et de superposition de DIV

Bonjour à tous,

Html :

<div id="alert" style="visibility:hidden;">
<div id="cadre">
<img src="images/pin.png" width="48" height="48" />
</div>
</div>

CSS :
#alert{
position:absolute;
z-index : 2;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
background-color: white;
text-align:center;
top:0px;
width:100%;
height:100%;
visibility: hidden;
}
#cadre{
margin-left: auto;
margin-right: auto;
width: 500px;
background-color: #FFFF00;
height: 350px;
margin-top: 140px;
border: 6px solid #000000;
position: relative;
z-index: 3;
}
#cadre img{
float: right;
height: 48px;
width: 48px;
display: block;
position: relative;
top: -35px;
right: -35px;
}

Etant donné que j'ai attribué une transparence à ma div (alert), il se trouve que la div (cadre) est aussi transparente. J'aimerais que cette dernière ne soit pas transparente.
Je me casse la tête sans trouver de solution, quelqu'un pourrait il me donner un petit coup de pouce?

Merci d'avance.

Finalement, j'ai fini par trouver juste après avoir posté. Désolé.

ça aurait été cool de poster la solution aussi...

<div id="alert" style="visibility:hidden;">
</div>
<div id="cadre">
<img src="images/pin.png" width="48" height="48" /> 
</div>

La solution que j'ai trouvé c'est de ne pas imbriquer les DIV.