Firefox blocking content behind a hidden floating-over div

1

Dear all,

I am trying to have a mail-me form on a web page that is hidden at first, but when a user clicks on a link, it appears over some content. However, even when it’s hidden, i cannot click any hyperlinks nor select text “behind” it. The site i am talking about is http://www.enlighter.org and the form can be visible if you click on “[+ Add Your News]”. This happens only in Firefox - in IE it works ok.

I am sending you the code as well:

HTML part:
<div id=‘addnews’>
<A HREF=‘javascript:toggleLayer(0)’ > [+Add Your News]</A>

&lt;div id='addnewswindow'&gt;
&lt;form action='"; 

&lt;?php bloginfo('template_url'); 
echo "/sendEmail.php"; ?&gt;

 method='post'

enctype=‘multipart/form-data’ name=‘addNews’>
<div id=‘articledata’>
<p>Image: <br/><input class=‘addform’ type=‘file’ name=‘filename’></p>
<p>Title:<br/> <input class=‘addform’ type=‘text’ id=‘title’ name=‘title’ onkeydown=‘javascript:changeText(this)’></p>
<p> Description:<br/> <textarea input class=‘addform’ id=‘desc’ name=‘desc’ onkeydown=‘javascript:changeText(this)’ cols=‘30’ rows=‘26’></textarea></p>
</div><div id=‘topright’>Place for the image</div>
<div id=‘personaldata’>
<p>Your name:<br/> <input class=‘addform’ type=‘text’ name=‘name’></p>
<p>E-mail: <br/><input class=‘addform’ type=‘text’ name=‘email’></p>
<p>Website:* <br/><input class=‘addform’ type=‘text’ name=‘website’></p>
<div id=‘addformtext’>Enlighter thanks You for Your interest in contributing to the Lighting Design Community. As a small token of our gratitute we will publish Your profile with full contact details if You send us 3 News Items.</div>
<p align=‘right’><input class=‘addform’ type=‘submit’ name=‘Submit’ value=‘Submit’></p>
</div>
</form>

&lt;/div&gt;

</div>

<script type=‘text/javascript’>
addNewsWindow=document.getElementById(‘addnewswindow’);
addNewsWindow.style.display=‘none’;
</script>";

CSS part:
#addnews{
width:453px;
text-align:right;
padding-top:6px;
margin-right:5px;
height:570px;
position:absolute;
left:152px;

}

#addnews a {
font-size:12px;
}

#addnewswindow{
text-align:left;
height:545px;
width:457px;
margin-top:10px;
background:#FFFFFF;
border:1px solid #000000;
font-weight:bold;

}

#articledata{
width:45%;
height:100%;
float:left;
background-color:#FFCCFF;

}
#topright {

float:right;
width:50%;
height:250px;
background-color:#66FF00;

}

#personaldata{
width:50%;
float:right;
height:50%;
background-color:#99FFFF;

}

javascript:
function toggleLayer( formNumber ){
addFormText=document.getElementById(“addformtext”);
if(formNumber==0){
addFormText.innerHTML=“Enlighter thanks You for Your interest in contributing to the Lighting Design Community. As a small token of our gratitute we will publish Your profile with full contact details if You send us 3 News Items.”;
}else{
addFormText.innerHTML=“Please fill out and submit the following form and we will contact you shortly to provide other materials”;
}
whichLayer=“addnewswindow”;
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;

// if the style.display value is blank we try to figure it out here
if(vis.display==’’&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?‘block’:‘none’;
vis.display = (vis.display==’’||vis.display==‘block’)?‘none’:‘block’;
}

Thank you so much for Your answers