Thread: Having trouble to set a transparent div

Hi all, first sorry if this is not a right thread.

I had a trouble to make the inside element of #transparent div to be not transparent. Dont know what Ive done wrong after so many hours try and didnt find a solution, so I decided to ask here.

This is my html:

<div id="transparent">
<div id="preview">
<p><a href="javascript:close_preview();">Close</a></p>
<p><a href="#"><img id="preview_pic" src="" onclick="javascript:close_preview();" alt="click to close this preview"></a></p>
<p>Avatar0001</p>
</div>
</div>

And this is my css:

div#transparent {
display: none;
position: absolute;
background: #000;
width: 100%;
height: 150%;
top: -200px;
left: 0;
z-index: 1000;
filter:alpha(opacity=50);
opacity:0.5;
}
div#preview {
display: block;
background: grey;
margin: 15% 30%;
text-align: center;
border: 5px solid #c1c1c1;
}
#preview p {
display: block;
padding: 5px;
color: #fff;
}
#preview img1 {
display: block;
padding: 5px;
background: #fff;
}

i try to put this:

filter:alpha(opacity=100);
opacity:1;

into each of div#preview, #preview p and #preview img but it didnt work out.

Thank in advance guys

I think display:none causes the element and its descendants to not be rendered at all, doesn't it? I've a feeling browsers do it by just 'dropping' the div from the layout.

Do you get something better without it? I use 'visibility:hidden' to do something similar on one of my sites.

Thanks Seanie...

I try your suggestion but it seem didnt solved it so then I try googling around and found this article

Now I know the problem, cant make it non-transparent if its a child I guess...

Why la I cant found it last night??

Anyway thank for your helping Seanie