Question

I am using the following code:

<div id="trialwindow" style="display:none; background-color: #ffffff; position:fixed; z-index:1000; top:40px; left:200px; height: 600px; width: 850px; border:3px solid #000000;">
<iframe src="game/game.html" style="border: 0; width: 100%; height: 600px;"></iframe>
</div>

This works fine in Chrome.

But, the layout in the iframe that gets loaded is totally messed up with Firefox(v7.0.1). I see the layout by using a click callback to set the display property as ‘block’.

If I do not work with display at all, it works fine. But I really need to be able to hide and display the iframe in question here.

This is the code for the display switching mechanism.

$('#trial').click(function() {
$('#fadeoutwindow').css('display', 'block');
var trialwindow = $('#trialwindow');

trialwindow.css('display', 'block');
// To stop bubbling
return false;
});

$('#fadeoutwindow').click(function() {
$('#fadeoutwindow').css('display', 'none');
$('#trialwindow').css('display', 'none ');              
});

Here, #fadeoutwindow is a div which covers all the other contents when the iframe shows up. #trial is an anchor tag.

Help?

Thanks!

Answer 1

The answer to this is that setting display to none while loading causes elem.style.height, outerWidth(), outerHeight(), scrollHeight() and other such calls to return 0 in Firefox (and not Chrome/Safari). I was using these calls in the javascript to position the elements.

So, for now, I am using a negative z-index to hide the iframe instead of a display setting to none.