JS opacity element has absolutely no effect on my DIV box in Chrome 
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  

    	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 = "<table width='800' border='0' cellpadding='1' > <tr> <td width='75' ></td> <td width='200'></td> <td width='75' ></td> <td ></td>  </tr>  <tr> <td align='left' valign='middle'><div align='right'>Contact</div></td> <td colspan='4' align='left' valign='middle'><input name='Pcontact' type='text' id='Pcontact' size='20' /> Number <input name='Pnumber' type='text' id='Pnumber' size='20' /> Mail <input name='Pmail' type='text' id='Pmail' size='25' /> <input name='addcontact' type='button' id='addcontact' value='Add Contact'  /></td> </tr> </table>" ;
	
	document.getElementById('box').innerHTML = tab 

	dx.opacity = 10 ;

in a css I have the following for my box 

    #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 ; 
} 

The box div is sized in my js as it has multiple uses 


 
JS opacity element has absolutely no effect on my DIV box in Chrome 
===

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  

    	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 = "<table width='800' border='0' cellpadding='1' > <tr> <td width='75' ></td> <td width='200'></td> <td width='75' ></td> <td ></td>  </tr>  <tr> <td align='left' valign='middle'><div align='right'>Contact</div></td> <td colspan='4' align='left' valign='middle'><input name='Pcontact' type='text' id='Pcontact' size='20' /> Number <input name='Pnumber' type='text' id='Pnumber' size='20' /> Mail <input name='Pmail' type='text' id='Pmail' size='25' /> <input name='addcontact' type='button' id='addcontact' value='Add Contact'  /></td> </tr> </table>" ;
	
	document.getElementById('box').innerHTML = tab 

	dx.opacity = 10 ;

in a css I have the following for my box 

    #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 ; 
} 

The box div is sized in my js as it has multiple uses 


 