Swfobject problem with 100% scale. doing my head in!

1

hi guys,

ive embedded my flash movie using some swfobject script. ive made the movie 1024px X 768px but set the html values to 100% as there will be a fullscreen option.

everytime i test the page my movie just appears in the top left of the screen as 1024x768!

below is the html ive used:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website Name</title>
<meta name="keywords" content="keywords here" />
<script language="javascript" src="swfobject.js"></script>
<style type="text/css">
<!--
/* hide from ie5 mac \*/
html {
    margin:0;
    padding:0;
    border:none;
    height: 100%;
    overflow:auto;
}
/* end hide from ie5 mac */

body {
    width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    font-family:Arial, Helvetica, sans-serif;
    background-color: #000000;
    color:#555555;
    font-size:.7em;
    text-align:center;
}
a:link {text-decoration: none; color: #FF0000;}
a:visited {text-decoration: none; color: #FF0000;}
a:hover {text-decoration: none;    color: #FF0000;}
a:active {text-decoration: none; color: #FF0000;}
-->
</style>
</head>
<body bgcolor="#ffffff" id="flashcontent" onResize="updateFlashSize()" onLoad="updateFlashSize()">
<div style="padding:8em;"><strong>
    My Website</strong>
    <br /><br /><br /><br />
    This site requires Flash Player 9 and a Javascript enabled web browser.<br/>
    You can download the Adobe Flash Player from the following location:<br/>
    <a href="http://www.adobe.com/go/getflashplayer/" target="_blank">www.adobe.com/go/getflashplayer</a>
</div>
<script type="text/javascript">
    // <![CDATA[
    var fo = new FlashObject("main.swf", "glynn geddie", "100%", "100%", 8, "#000000");
    fo.addParam("allowFullScreen", "true");
    fo.addVariable("fvSWFSuffix", "");
    var flashEnabled = fo.write("flashcontent");
    // update flash width/height for small window size
    function updateFlashSize () {
        if (!flashEnabled) return;
        var minWidth = 900;
        var minHeight = 670;
        var frameWidth;
        var frameHeight;
        if (self.innerWidth) {
            frameWidth = self.innerWidth;
            frameHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientWidth) {
            frameWidth = document.documentElement.clientWidth;
            frameHeight = document.documentElement.clientHeight;
        } else if (document.body) {
            frameWidth = document.body.clientWidth;
            frameHeight = document.body.clientHeight;
        } else {
            return;
        }
        var bodyStyle = document.getElementById("flashcontent").style;
        bodyStyle.width = frameWidth < minWidth ? String(minWidth) + "px" : "100%";
        bodyStyle.height = frameHeight < minHeight ? String(minHeight) + "px" : "100%";
    }
    updateFlashSize();
    // ]]>
</script>

</body>
</html>

am i doing something wrong??!! is there something i should put in the flash file to make it scale properly?

thank you very much and i hope to hear from you.

all the best,

mark