"dead center" with swfobject.js and CSS

programming web dev
1

hello, I’m trying to center some flash content vertically and horizontally using CSS. I’m using the swfobject.js to embed the Flash content.

I found a great tutorial on how to center content /w CSS: http://www.wpdfd.com/editorial/thebox/deadcentre4.html

It’s working in Firefox, but not Safari for me for some reason (I don’t have IE on this machine, but needs to work with it of course too)

So using that I came up with this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RisingStar</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css" media="all">@import url(efc.css);</style>
</head>
<body bgcolor="#ffffff"  leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<div id="horizon">
<div id="flashcontent"><br><br><font color="#000000">This site requires Flash Player 7 or greater to function correctly.<br>Please download <a href="http://www.macromedia.com/go/getflash" target="_blank"><font color="#ffffff"><u>HERE</u></font></a></font>
</div> </div>


<script type="text/javascript">
   var so = new SWFObject("efc2.swf", "Eleven Fingered Charlie", "825", "475 ", "8", "#ffffff");  
   so.write("flashcontent");
</script>


</script>
</body>
</html>

here’s the efc.css file:

#horizon        
    {
    color: white;
    background-color: #ffffff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

#flashcontent    
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #f00;
    margin-left: -410px;
    position: absolute;
    top: -237px;
    left: 50%;
    width: 825px;
    height: 475px;
    visibility: visible
    }

Can anyone tell me what I’m doing wrong?