...

View Full Version : firefox blocking content behind a hidden floating-over div



mitjaprelovsek
05-10-2008, 07:11 PM
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>

<div id='addnewswindow'>
<form action='";

<?php bloginfo('template_url');
echo "/sendEmail.php"; ?>

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>

</div>
</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

effpeetee
05-11-2008, 05:38 PM
Works for me both with IE7 and Firefox2.

Frank

mitjaprelovsek
05-12-2008, 02:55 PM
Are you sure? You can click on the second, third and fourth image in the top row? Currently these are 2posts from "Lightfair" and one from "Masterplan Vienna". I checked on several computers with firefox 2.0.0.14 and it works on none.

Please let me know and thank you,
Mitja

effpeetee
05-12-2008, 03:38 PM
Well,

I see what you mean now. I must have been asleep. It is the pictures at the top row as you have already said. Sorry for that. I'll have a look at the code to see if I can help.

There are many validation errors that you should look at. They are all in the mark-up.

http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.enlighter.org&charset=%28detect+automatically%29&doctype=Inline&group=0

Frank

effpeetee
05-12-2008, 06:52 PM
Sorry, but I have not been able to solve this. I'll have to leave it to better men than I.

Frank

Arbitrator
05-12-2008, 07:22 PM
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.Try adding the code shown below to your style sheet. It should make the problem more apparent.


#addnews { background: red; }
#addnews * { background: yellow; }

Some browsers, such as Internet Explorer and Opera, will allow you to select elements behind transparent or translucent elements. Unfortunately, I canít say that I know why.

Anyway, you can use a tool such as the Web Developer extension for Firefox to troubleshoot these kind of issues more easily. I just used the Information: Display Element Information (Ctrl+Shift+F) item from the Web Developer extension toolbar, moused over the affected area, then clicked it to get the ID of the element causing the issue. Then I used CSS: Edit CSS (Ctrl+Shift+E) to test the CSS shown above.

mitjaprelovsek
05-12-2008, 07:31 PM
Thankx for all the suggested!

I added the code you suggested and now it doesn't workin IE either - any suggestions?


Thanx again and please keep trying.
Mitja P

Arbitrator
05-12-2008, 07:44 PM
I added the code you suggested and now it doesn't workin IE either - any suggestions? In case I wasnít clear enough, the CSS that I provided was meant to make the source of the issue obvious so that you could rewrite your code to fix it. It was not meant to be a final solution.

mitjaprelovsek
05-17-2008, 09:51 PM
I solved the issue (I wasn't able to try it before). It seems that the problem was that the addnews div shouldnt CONTAIN the hidden div addnewswindow. I closed the addnews window before the addnewswindow div tag.

Thanks again
Mitja



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum