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>
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.
Hi Sinious,
Yes those are good suggestions and are the source of the problem. At the swf object FAQ page they suggest a similar solution in question 1. Now I'm trying to figure out how to scale the swf down if the browser window is below 100% swf size in any dimension but doesn't scale over 100% of swf size. I haven't seen any swf object info on this. Would this be a java solution?
Thanks
North America
Europe, Middle East and Africa
Asia Pacific