# Firefox blocking content behind a hidden floating-over div

**URL:** <https://forum.kirupa.com/t/firefox-blocking-content-behind-a-hidden-floating-over-div/259944>\
**Category:** Uncategorized\
**Created:** [May 10, 2008, 5:22pm UTC](https://forum.kirupa.com/t/firefox-blocking-content-behind-a-hidden-floating-over-div/259944 "2008-05-10T17:22:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mitjamitja](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@mitjamitja](https://forum.kirupa.com/u/mitjamitja)\
**Post date:** [May 10, 2008, 5:22pm UTC](https://forum.kirupa.com/t/firefox-blocking-content-behind-a-hidden-floating-over-div/259944/1 "2008-05-10T17:22:24Z")

</div>

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](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**