vertical alignment

**mikec** · 04-09-2007, 04:35 PM

This is driving me crazy. all i have is a html page with a flash object in it. I want the flash swf to align center and valign middle... what is the correct way to do this?

Any takers?

Thanks in advance..

**1407** · 04-10-2007, 12:33 AM

The easiest way is with a table,

add this to your BODY tag :

Code:

MARGINHEIGHT="0" MARGINWIDTH="0"

and the table, this way (assuming you have only one item, the movie) :

Code:

<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0">
  <TR>
    <TD VALIGN="MIDDLE">
      <DIV ALIGN="CENTER">your movie goes here</DIV>
    </TD>
  </TR>
</TABLE>

Voila!

**mikec** · 04-10-2007, 10:12 AM

I know it should work but it doesn't.

**1407** · 04-10-2007, 04:47 PM

paste your code then. Cause if that's what you have, nothing more and nothing less, it should work.

**mikec** · 04-10-2007, 04:59 PM

Here is my code:

<!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" xml:lang="en" lang="en">
<head>

<title>TEST</title>

</head>

<body bgcolor="#979080" marginwidth="0" marginheight="0">

<table width="100%" height="100%" border="0">

<tr>
<td valign="middle">
<div align="center">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="998" height="768" id="TMI" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="TMI.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="TMI.swf" quality="high" bgcolor="#ffffff" width="998" height="768" name="TMI" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</div>
</td>
</tr>
</table>

</body>
</html>

**mikec** · 04-10-2007, 05:07 PM

Ahh.. this is weird I took this line out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and it worked...??

So what's up with that? That is the code that flash generates on the html file when you publish it for the web...

**mikec** · 04-10-2007, 05:17 PM

Okay Flash MX2004 generated that line but when I checked with Flash 8 it doesn't generate it. Any thoughts on that?

**1407** · 04-10-2007, 06:47 PM

Originally Posted by mikec

Okay Flash MX2004 generated that line but when I checked with Flash 8 it doesn't generate it. Any thoughts on that?

Yeah... whenever you see that line again, delete it

**mikec** · 04-10-2007, 08:21 PM

Thanks 1407. I appreciate your help!

**webeteran** · 04-10-2007, 08:30 PM

yeah I had a similiar problem awhile back... really annoying

**catbert303** · 04-11-2007, 09:27 AM

Don't just delete the DOCTYPE!

The DOCTYPE is used by the browser as a switch to determine how to render the page. If the DOCTYPE is present the browser will use it's "standards compliant" mode, which will (in theory at least

) be reasonably consistent between different browsers. Especially if you're planning to use any CSS in a page it is almost essential that you're using the standards compliant mode.

Without the DOCTYPE the browser will start attempting to emulate buggy behaviours of old browsers. One such example would be fixing the incorrect calculation of heights using percentages that's needed to make this work. How the browser does this and what things they try to fix is entirely up to the brower maker - there is no standardisation. Hence the rendering behaviour in this mode is likely to vary quite a bit between different browsers and may also be prone to changes.

To make this work in standards compliant mode you need to ensure you've set a height for all the ancestors of your table (in the case of this page that's the body and html elements). To do this you can add the following,

Code:

<style type="text/css">
html, body {
  height: 100%;
  margin: 0; padding: 0;
}
</style>

somewhere between the opening <head> and closing </head> tags of your page.

Here's some notes on how DOCTYPE switching works in different browsers

http://msdn2.microsoft.com/en-us/lib...cements_topic2
http://www.opera.com/docs/specs/doctype/
http://developer.mozilla.org/en/docs/Mozilla's_DOCTYPE_sniffing

Thread: vertical alignment

Thread Tools

Display

vertical alignment

Posting Permissions