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:

    <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">
      body { margin: 0px; overflow: hidden; }
    <div id="flashContent">
      <p><a href=""><img src="" alt="Get Adobe Flash player" /></a></p>


If I changed:






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

2 answers

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.



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



All Articles