CODEWITHSUNDEEP
htmlflashfirefoxheightinternet-explorer-9
Paul
Paul

Reputation: 6176

flash website bug with firefox and IE9 (but works on IE6 !)

my website does not work on firefox (firefox 4 or 7), nothing appears, even not the alternative content

and with IE9, the problem is the content is compacted at the top of the page... (but it works on IE6 !)

and the html is :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>

        <link rel="stylesheet" type="text/css" media="all" href="style.css" />
        <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="jq.js"></script>
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");
        </script>
    </head>
    <body>

    <div id="flash">

    <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
        <param name="movie" value="ombre.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="ombre.swf" width="100%" height="100%">
        <!--<![endif]-->
          <p>alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>

      </div>

    </body>
    </head>
</html>

and the css :

body {
    width:100%; height:100%; margin:0; background:white; overflow:hidden;
}

it seems to be a problem with the "height" set to 100% but what else can i put? the website works on chrome, safari, ie6...

thanks

Upvotes: 0

Views: 1704

Answers (2)

Thierry Blais
Thierry Blais

Reputation: 2858

I had this same problem recently, I had set the height and width to 100% and firefox would not display IE9 would squish the swf to the top of the page height:100px or something. I fixed it with JavaScript, actually jQuery (simply because it was available):

Essentially FF doesn't like % values when you size things, and IE9 has a different problem. If you added static values you wouldn't have a problem. But we don't want static values do we?

Anyways, I solved my issue by telling the JavaScript to write the Flash tag for me and insert static values based on the screen size.

<script type="text/javascript">
    document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="' + $(window).width() + '" height="' + Math.round(($(window).width()*11)/24) + '" id="YourMovieID" align="middle">
    <param name="movie" value="YourMovie.swf"/>
    <param name="wmode" value="opaque" />
    <param name="scale" value="exactfit" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="YourMovie.swf" width="' + $(window).width() + '" height="' + Math.round(($(window).width()*11)/24) + '" >
    <param name="movie" value="YourMovie.swf"/>
    <param name="wmode" value="opaque" />
    <param name="scale" value="exactfit" />
    <!--<![endif]-->
    <!--[if !IE]>--></object>
    <!--<![endif]-->
    </object>')
    </script>

I used $(window).width() to get the width of the screen and then Math.round(($(window).width()*11)/24) because the proportions of my movie were 24X11.

Again this was my jQ solution because it was available, you could use screen.width to get it. You might have to condense everything to one line though I just spaced it so you could see what's going on.

Upvotes: 2

The_asMan
The_asMan

Reputation: 6403

Since you are using swfObject why are you not using it to do your actual embedding
You will find the following code example to be much more browser compliant. 

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
  function loaded() {
    var flashvars={}, params={}, attributes={}, tmp, version, width, height, container, flashObj;

    flashvars.UserId = "23061";

    params.menu = "true";
    params.quality = "high";
    params.bgcolor = "#869ca7";
    params.allowscriptaccess = "always";
    params.allownetworking = "all";

    attributes.id = "myId";
    attributes.name = "myId";
    attributes.align = "middle";
    attributes.allowscriptaccess = "always";
    attributes.allownetworking = "all";

    tmp = "expressInstall.swf";
    version = "9.0.115";
    width = "100%";
    height = "100%";
    container = "replaceMe";
    flashObj = "myId.swf";

    swfobject.embedSWF(flashObj, container, width, height, version, tmp, flashvars, params, attributes);
  }

</script>

  <body onLoad="loaded()" >
    <div id="replaceMe">Loading content.</div>
  </body>

[EDIT]
Try this out

<style>
html, body{
  width:100%;
  height:100%;
  margin:0;
  background:white;
  overflow:hidden;
}
</style>

Upvotes: 2

Related Questions