I am trying to make a transparent border around the edge of a box, so that you can see through it to the background. When I'm finished, I hope it will look something not unlike this:
http://faulkes-telescope.com/
However, my CSS makes the entire contents of the box tranparent; I tried to fix it by specifying the opacity of the "content" div, but it looks the same.
The HTML:
Code:
<div id="transparent">
<div id="content">
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div><!--end content div-->
</div><!--end transparent div-->
The CSS:
Code:
body {background:#000000;}
#transparent {
background:white;
border:solid red 1px;
margin-left:60px;
margin-right:60px;
padding-left:30px;
padding-right:30px;
padding-top:5px;
padding-bottom:5px;
opacity:.5;
filter:alpha(opacity=50);}
#content {
background:white;
border:solid red 1px;
font-family: "Verdana";
font-size:.9em;
padding:15px;
opacity:1;
filter:alpha(opacity=100);}
Do you guys need a screenshot? Replies would be appreciated.
Add to del.icio.us 
Can you digg it?
Linear Mode
