Flash Container Height in IE10

Recently we had a problem with our flash client container within Internet Explorer 10. Within the CSS the height and width of the container is set to 100% to consume all available space. Firefox, Chrome, Opera and IE (pre version 10) have no problem to size the flash container correctly. However, IE 10 shows the flash container about 30% of the height while consuming 100% of the width. The div container has 100% in height, but the included embed object has not.

Our html source looks like:

<div style="height: 100%; width: 100%;">
  < embed id="RewooClient" width="100%" height="100%"
    type="application/x-shockwave-flash" name="Rewoo" src="Rewoo.swf"
    allowfullscreeninteractive="true" allowscriptaccess="sameDomain" >
    <!-- ... -->
  </embed>
</div>

Internet searches did not help. It seems that nobody else have this problem. The pragmatic solution was to use jQuery to set the height manually on page load and on page resizes:

(function($) {
$(document).ready(function() {
  if ($.browser.msie && $.browser.version >= 10) {
    $('#RewooClient').attr('height', $(window).height());
    $(window).resize(function() {
      $('#RewooClient').attr('height', $(window).height());
    });
  }
})(jQuery);

[update 2013-05-13] Starting with jQuery 1.9 the $.browser feature was removed and you need to add the jQuery Migration plugin to get the code working again (Thanks to Ed Graham)[/update]

Maybe this might help you… And if you know a better solution, please drop a line.

Advertisements

4 thoughts on “Flash Container Height in IE10

  1. I also had this problem; like you, I found nothing (besides this post!) after a long Google search. Your solution works nicely although I had to make a few modifications for it to work with jQuery 2.0.0:

    $(document).ready(function () {
    if ($.browser.msie && $.browser.version >= 10) {
    $(‘#StatPlanet’).attr(‘height’, $(window).height());
    $(window).resize(function () {
    $(‘#StatPlanet’).attr(‘height’, $(window).height());
    });
    }
    });

    In particular, the $.browser object has been removed as of v1.9, hence the need for jquery-migrate.

  2. I see the <script > tags have been removed from my first post, understandably. Here is my code in full:

    <script src=”/javascript/jquery-2.0.0.min.js”></script>
    <script src=”/javascript/jquery-migrate-1.2.1.min.js”></script>
    <script>
    $(document).ready(function () {
    if ($.browser.msie && $.browser.version >= 10) {
    $(‘#StatPlanet’).attr(‘height’, $(window).height());
    $(window).resize(function () {
    $(‘#StatPlanet’).attr(‘height’, $(window).height());
    });
    }
    });
    </script>

  3. I have same problem and resolved it with JavaScript.

    So, flash height cannot be set to 100% in Internet Explorer 10 by using pure CSS?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s