CODEWITHSUNDEEP
htmlflashapache-flexinternet-explorer
Egon
Egon

Reputation: 73

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. In IE, however, it displays at 1/3 the width. The embedded 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 change:

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 the height, but I would really like to use 100% height. What could I be doing wrong?

Tested in IE 8, Windows XP, Flash Player 11, SWFObject v2.0

Upvotes: 3

Views: 1931

Answers (2)

Egon
Egon

Reputation: 73

Another possible solution to this problem: My rails 3 server was automatically adding the following HTTP Header:

X-Ua-Compatible: IE=Edge,chrome=1

Which changed IE's 8 behaviour. I removed it and it also solved the problem. Lot of details to keep in mind when working with IE :/

Upvotes: 4

huzzah
huzzah

Reputation: 1805

It sounds to me like you have encountered the annoying hasLayout problem in IE. Because your div doesn't specify a height, and your flash movie has a height of 100%, IE is stumped and reverting to a default height (I think it's in the 300px range). This is a good article on hasLayout. You may try something like adding display:inline-block or min-height:anyvalue to your container div to force hasLayout on IE and see if it works.

Upvotes: 2

Related Questions