Some browsers also treat the OBJECT as either block or inline, which will
affect how the browser tries to center it. You probably want to add a
object{display:block} style to your page to guarantee it's always block. Then,
inside your wrapper div that Aran mentioned, use the standard block-level
element centering techniques (margin-right:auto and margin-left:auto) on your
content. Since your alternate content is likely in a div, and those are usually
block-level, this would keep your CSS styling to center the "content" (whether
it be flash or html) consistent. The other approach is to go old-school and
non-standard with it, and use a <center> tag (ugh, not good CSS), then it
doesn't matter how the browser treats your OBJECT (block or inline).
--Kyle
From: Aran Rhee
Sent: Monday, September 28, 2009 4:56 AM
To: [email protected]
Subject: Re: alternative content centered, flash content not centered with
swfObject 2
With SWFObject 2.x, the alt content div is actually replaced by the swf's
<object> tag. 1.x wrote the content within the alt content div's innerHHML.
The easiest thing to do is to create a wrapper div, and style that. This way
the <object> tag will be positioned / sized as per the wrapper values.
Cheers,
Aran
On Mon, Sep 28, 2009 at 9:33 PM, rickibarnes <[email protected]> wrote:
Hi,
I'm having a really weird problem. I have a div set in the center of
the page (horizontally and vertically), which is my target div for
swfObject. The div sits exactly where it should when the alternative
content is displayed, but when it is swapped for my swf it jumps to
the left of the screen. The vertical centering still works.
The code I'm using is like so:
CSS
html {
margin:0;
padding:0;
height:100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#vertical {
float:left;
height:50%;
margin-top:-350px;
width:100%;
}
#background-pic {
color:#003399;
position:relative;
height:700px;
background-image:url(images/graphics/bg.gif);
background-repeat:repeat-x;
clear:both;
}
#content {
position: relative;
text-align: left;
width: 1140px;
height: 700px;
margin: 0px auto;
border:1px solid red;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"
media="screen">
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF("site.swf", "content", "1140", "700",
"10.0.0"), "flashElements/expressInstall.swf", flashvars, params,
attributes;
</script>
</head>
<body>
<div id="vertical"></div><!--end div "floater"-->
<div id="background-pic">
<div id="content">
WTF!
</div><!--end div "content"-->
</div><!--end div "background-pic"-->
</body>
</html>
If I use the swfObject 1 code, it works exactly as expected, with the
swf centered in the page. So of course I could just use that instead,
but I'd really like to be able to use version 2.
Does anybody have any idea what could be causing this problem?
Cheers in advance for any help!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SWFObject" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/swfobject?hl=en
-~----------~----~----~----~------~----~------~--~---
