Skip navigation
Currently Being Moderated

Flash site not displaying properly in IE and chrome

Apr 19, 2012 2:00 PM

Any ideas of what is causing this code not to display properly in IE and chrome as checked on PC.

It works on safari

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

          <head>

                    <title>n u h n | painting</title>

                    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

 

 

 

                    <script type="text/javascript" src="swfobject.js"></script>

                    <script type="text/javascript">

                              swfobject.registerObject("myFlashContent", "8.0.0");

                    </script>

 

 

 

 

 

 

 

 

          <style type="text/css">

<!--

body {

          background-color: #FFFFFF;

          margin-left: 0px;

          margin-top: 0px;

          margin-right: 0px;

          margin-bottom: 0px;

 

}

-->

</style>

 

 

<body>

 

 

 

 

 

                    <div align="center">

 

 

                              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" align="middle">

                                        <param name="movie" value="index.swf" />

                                        <param name="quality" value="best" />

                                        <param name="scale" value="noscale" />

                                        <param name="bgcolor" value="ffffff" />

                                        <!--[if !IE]>-->

                                        <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%" align="middle">

                                                  <param name="quality" value="best" />

                                                  <param name="scale" value="noscale" />

                                                  <param name="bgcolor" value="ffffff" />

                                        <!--<![endif]-->

                                                  <a href="http://www.adobe.com/go/getflashplayer">

                                                            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" height="600" />

                                                  </a>

                                        <!--[if !IE]>-->

                                        </object>

                                        <!--<![endif]-->

                      </object>

 

 

 

 

                    </div>

 

 

 

 

          </body>

</html>

 
Replies
  • Currently Being Moderated
    Apr 20, 2012 6:35 AM   in reply to yogi bear

    That contains enough code to display the object. Can you comment out the script above about swfobjects running registerObject? Just make it:

     

    // commented out

    // swfobject.registerObject("myFlashContent", "8.0.0");

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 5:03 AM   in reply to yogi bear

    You can set an explicit width and height instead of a percent but I presume you want the flash object to be the size of the browser window specifying 100%. You also have noscale specified so I presume you're detecting the flash stage size and are dynamically laying out your content based on available space. Is that correct?

     

    That said, you're using XHTML strict but you have some invalid code. In browsers like IE that can be enough to pop compatibility mode and it gets messy. For instance the "align" attribute is not supported so you should remove it.

     

    Using 100% of the space is tricky. You have a scrollbar that can be invoked if you use 100%. Try 99% so the browser doesn't fire off a scrollbar just incase.

     

    Your CSS probably isn't doing enough either. Use your web developer tools in your browser to take a look at your object. You're only clearing margins on the body tag. Try something more aggressive to remove ALL margins and padding like so:

     

    *,html,body,object,div { margins:0; padding:0; }

     

    Your object probably has some margins or padding pushing it off screen and you're only setting margins for the body tag itself. Also a small CSS note. Anytime you specify a value of 0 you don't need to specify px, like 0px. No matter your unit, em, px, etc, 0 is 0. That's why I didn't put 0px if you were wondering.

     

    Also I specified 'div' in the CSS above. It may solve some of your problems to put your <object> inside a <div>.

     

    e.g.:

     

    <div style="width:99%; height:99%;">

        <object ............>

        </object>

    </div>

     

    Keep the <object> at 100% width and height if you place it inside that <div>. The browser is very good at dealing with <div>s and should have no problem keeping your content inside it resizing properly.

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2012 10:49 AM   in reply to yogi bear

    <div style="min-width:500px;min-height:450px;width:99%;height:99%">

    ...

    </div>

     

    Just specify a min-width and min-height in pixels to stop it from sizing below that.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points