JS opacity element has absolutely no effect on my DIV box in Chrome
<p>Hi I have a js script below and I am hoping that the opacity will be very minimal on my page . But it has absolutely no effect what ever the value . Can anyone suggest what I am doing wrong please ?. thanks  </p>

<pre><code>    dx = document.getElementById('box').style

dx.backgroundColor= '#fff' 
dx.visibility = "visible";
dx.width = 800 + "px" ;
dx.height = 40 + "px" ;
dx.top = 600 + "px" ;
dx.overflow = "hidden" ;
dx.marginLeft = "-400px";

tab = "&lt;table width='800' border='0' cellpadding='1' &gt; &lt;tr&gt; &lt;td width='75' &gt;&lt;/td&gt; &lt;td width='200'&gt;&lt;/td&gt; &lt;td width='75' &gt;&lt;/td&gt; &lt;td &gt;&lt;/td&gt;  &lt;/tr&gt;  &lt;tr&gt; &lt;td align='left' valign='middle'&gt;&lt;div align='right'&gt;Contact&lt;/div&gt;&lt;/td&gt; &lt;td colspan='4' align='left' valign='middle'&gt;&lt;input name='Pcontact' type='text' id='Pcontact' size='20' /&gt; Number &lt;input name='Pnumber' type='text' id='Pnumber' size='20' /&gt; Mail &lt;input name='Pmail' type='text' id='Pmail' size='25' /&gt; &lt;input name='addcontact' type='button' id='addcontact' value='Add Contact'  /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;" ;

document.getElementById('box').innerHTML = tab 

dx.opacity = 10 ;
</code></pre>

<p>in a css I have the following for my box </p>

<pre><code>#box {
position:fixed;
width: 600px;
height: 700px;
top: 40px ; 
border: 2px solid black;
background-color:#CCC; 
left:50% ; 
margin-left:-300px;
visibility:hidden ;
overflow:scroll ; 
</code></pre>

<p>} </p>

<p>The box div is sized in my js as it has multiple uses </p>
