IE displays flash movie with wrong height using swfobject
I have a full screen flash movie that loads and displays correctly in firefox and chrome. However, in IE it renders 1/3 width. The inline code is relatively simple:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/javascripts/swfobject.js?1331841761" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
swfobject.embedSWF('/bin/SglWeb.swf','flashContent','100%','100%','11.0.0','/expressInstall.swf',{},{},{});
//]]>
</script>
<style>
body { margin: 0px; overflow: hidden; }
</style>
</head>
<body>
<div id="flashContent">
<p><a href="https://www.adobe.com/go/getflashplayer"><img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
If I changed:
swfobject.embedSWF('/bin/SglWeb.swf','flashContent','100%','100%','11.0.0','/expressInstall.swf',{},{},{});
to
swfobject.embedSWF('/bin/SglWeb.swf','flashContent','1024','768','11.0.0','/expressInstall.swf',{},{},{});
IE respects height, but I'd really like to use 100% height. What could I be doing wrong?
Tested in IE 8, Windows XP, Flash Player 11, SWFObject v2.0
source to share
It looks to me like you are facing the annoying hasLayout issue in IE. Since your div does not specify the height and your flash movie is 100% height, IE blunts and reverts to the default height (I think this is in the 300px range). This is a good article on hasLayout . You can try something like adding display: inline-block or min-height: anyvalue to your container div to force hasLayout in IE and see if it works.
source to share
Another possible solution to this problem, my rails 3 server was automatically adding the following HTTP header:
X-Ua-Compatible: IE=Edge,chrome=1
What changed the behavior of IE8. I removed it and it solved the problem as well. Lots of details to keep in mind when working with IE: /
source to share