Search code examples
cssflashflex4swfobject

Attempting to use CSS top property on a SWF file, but it's not working

I'm trying to position my Flex app so that it's further down the page, but I can't get it working. It's still appearing in the top left. Here is the HTML, any help would be greatly appreciated!

<html lang="en">
<head>
   <title>Page</title>
   <style type="text/css">
       body { margin: 0px; overflow: hidden; }
       #swf {top:50%;}
   </style>

   <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
   <script type="text/javascript">

   swfobject.embedSWF( "link_to_the_swf", "swf", "100%", "100%", "10.0.0", "playerProductInstall.swf", flashVars, params );
   </script>
</head>
<body scroll="no">

   <div id="swf">
      <p>Alternative content</p>
    </div>

</body>
</html>

EDIT: After reading this message, I tried wrapping the swf div in another one and setting the top property on the parent div, but it didn't work.

Solution

  • You can't use top alone. You need to give the div either position: relative or use margin-top / padding-top.