center aligned and absolute positioned swf IE6 issue

RYann · 11-19-2008, 05:07 AM

okay, i have a flash title, absolutely positioned the following way:

Code:

.flash	{
	position:absolute;
	top:0px;
	margin-left:auto;
	margin-right:auto;
	right:0px;
	left:0px;
	border:0px;
	z-index:98;
	text-align:center;
}

Code:

<div class="flash" align="center"><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','864','height','280','src','swf/logo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','swf/logo' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="864" height="280">
    <param name="movie" value="swf/logo.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="swf/logo.swf" width="864" height="280" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
  </object>
</noscript></div>

It aligns perfectly to the center in IE7 and FF, but in IE6, the left edge of the swf, sticks flush to the left edge of the browser window.

Getting it to center was a headache enough, and stupid me waits til the end to test in IE6. I have tried everything i can think of and it doesnt move in 6. Anybody know what I could change to get it aligned?

Doctor_Varney · 11-19-2008, 07:08 AM

Try it like this:

Code:

.flash {
	position:absolute;
        left:50%;
        margin-left:-432px (or as shorthand: margin:0 0 0 -432px;)
        z-index:98;
        text-align:center
}

Now that is, presuming your area for the Flash is going to be 864px wide. Whatever the size, halve it and apply that number as a negative left margin. This should send your element absolute centre-screen. I've had all sorts of trouble with auto margins (btw, it's actually 0 auto) but I've found this simpler and more reliable.

Hope this helps. Let us know how you get on with it.

abduraooft · 11-19-2008, 07:14 AM

You'd need to use the Deadcentre approach for this. I think it's possible to effectively apply left and right properties together.

Doctor_Varney · 11-19-2008, 07:25 AM

Also...

I don't think you need this:
<div class="flash" align="center">

The stylesheet should take care of presentation. Use HTML elements as a raw building blocks and let the CSS do the styling.

RYann · 11-19-2008, 10:18 PM

thats great thanks a lot. you saved me hours of stress. haha.

and your right, i dont need to align the div, but i just wanted to be sure, ive taken it out now and its fine.

thanks again