IE - Height Problem

Hi,

I am having some problem with using the "height" property in IE.

I have the code below...

<script type="text/javascript" src="http://tinyurl.com/mjv82j"></script>

<div id="gamewrap" style="visibility: hidden; height:0px;">
<div id="flashcontent"><strong>You need to upgrade your Flash Player in order to play this game. <a href="http://get.adobe.com/flashplayer/" target="_blank">Click Here</a> to upgrade now.</strong></div>
<script type="text/javascript">
  var so = new SWFObject("http://www.swfcabin.com/swf-files/1248422755.swf", "http://www.swfcabin.com/swf-files/1248422755.swf", "640", "480", "6");
  so.write("flashcontent");
</script><br/>
</div>

random text just to show the white space in IE

Code (markup):

Basically this should hide the flash game above that has height of 480px, this works perfectly in Firefox but in IE it hides the flash game but the height of 480px is still there so there is like a big white space.

Is there any work around for this so it will work in both Firefox and IE?

PS: I can't use the property "display: none" as I want the flash game to run in the background even though it's hidden.

Thanks

 

try <div id="gamewrap" style="visibility: hidden; position:absolute; height:0; margin:0; padding:0;">

 

sipherdesign thanks for your help. Green rep added...

That seems to fixed the height problem but now I am having problem with Firefox not having the game to load in the background.

Here's my current code...

<script type="text/javascript">
for (i = 0; i < 13; i++) { 
    setTimeout("document.getElementById('progress-bar').innerHTML='The game is loading and will start in " + (13-i) + " seconds...';", i * 1000); 
}
function startgame() { 
    document.getElementById('pre-game-ad').style.display="none";
    document.getElementById('gamewrap').style.height='400px';
    document.getElementById('gamewrap').style.visibility="visible";
    document.getElementById('gamewrap').style.position="static";
}
setTimeout("startgame()", 13000);
</script>


<div id="pre-game-ad">
<div align="center">
<a href="http://lwken.com/click/?s=19060&c=151938"><img src="http://lwken.com/images/3789-151938-300x250.jpg?s=19060" style="width: 300px; height: 250px; border: 0px;"/></a>  
</div>
<div id="progress-bar" style="text-align: center;">The game is loading and will start in 13 seconds...</div>
<div style="text-align: center; margin-bottom: 10px;"><a href="javascript:startgame();">Click Here to Start the Game Now.</a></div>
</div>

<script type="text/javascript" src="http://tinyurl.com/mjv82j"></script>
<div id="gamewrap" style="visibility: hidden; position:absolute; height:0; margin:0; padding:0;">  
<div id="flashcontent"><strong>You need to upgrade your Flash Player in order to play this game. <a href="http://get.adobe.com/flashplayer/" target="_blank">Click Here</a> to upgrade now.</strong></div>
<script type="text/javascript">
  var so = new SWFObject("http://www.swfcabin.com/swf-files/1248458961.swf", "http://www.swfcabin.com/swf-files/1248458961.swf", "640", "480", "6");
  so.write("flashcontent");
</script><br/>
</div>

random text just to show the white space in IE

Code (markup):

I used a new flash game above with a longer loading time so you guys can see it live. If you wait 13 seconds in IE the mochiads/loading bar from the actual game will no longer show up (will go straight to the guy on his bike) but in Firefox even if you wait 13 seconds the mochiads/loading bar is still there (ie. you have to wait for it to load). It's strange because in Firefox it seems like the game is loading in the background when you look at your "Status Bar" but when the timer reaches 13 seconds the game will load again. Hope that make sense.

If you're unclear about anything please let me know.

Thanks

PS. I am on IE7 and Firefox 3