I’m a bit baffled as to why this isn’t working - I’m guessing it has something to do with the 100% height the flash content is set to, but altering it doesn’t help.
<!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" lang="en" xml:lang="en">
<head>
<title>Site test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body, #content { width:100%; height:100%; }
body { margin:0; padding:0; overflow:hidden; }
#altContent { /* style alt content */ }
#content { height: 100%; margin: 0 auto; }
#bar { width: 100%; height: 100px; background: #FF00FF;}
</style>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="bar"><!-- --></div>
<div id="content">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
<param name="movie" value="flashtest.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flashtest.swf" width="100%" height="100%">
<!--<![endif]-->
<div id="altContent">
<p>Alternative content</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="bar"><!-- --></div>
</body>
</html>
The page can be seen at http://spetom.com/test/test.htm
It’s supposed to be a SWF between two horizontal bars, one at the top and one at the bottom of the page. Rather than that, though, the SWF is too tall, and pushes the bottom pink bar off the page.
I can’t figure it out.