Jump to content

Need to center flash movie in browser window (vertically and horizontally)


sodaboy

Recommended Posts

Hi everyone,

I've been banging my head against a wall trying to convert my flash based web site into a w3c compliant site - and I've adjusted everything possible - yet the only error I cannot get rid of is the "there is no attribute "height"" error message from the validator.

Now I have read about 100 times - don't use tables - use css... - in forums all over when similar problems came up - but I just cannot find a clean and easy way to replace the table I used as the nest for the flash movie.

If anyone could fix the code using css... so that I get rid of the height attribute - I would greatly appreciate it.

Here is the code
[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My Web Page</title>
<link rel="shortcut icon" href="/favicon.ico" /> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="generator" content="" />
<meta name="description" content="index" />
///there was a line of java here///
<style type="text/css">

html { height: 100%; }

body {
height: 100%;
margin: 0;
background-color: #ffffff;
background-image: url(winter.jpg)}

#flashcontent {
border: solid 2px #000;
margin: 0px auto;
width: 800px;
height: 450px}
   
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr>
<td>
<div id="flashcontent">
<strong>some text in case flash version not found</strong>
</div>
JAVAAGAIN type="text/javascript">
  var so = new SWFObject("preloader.swf", "index", "800", "450", "7", "#ffffff");
  so.write("flashcontent");
ENDOFJAVASCRIPT
</td>
</tr>
</table>
</body>
</html>
[/code]

Thank you in advance.

Goran
Link to comment
Share on other sites

The error is because you have

[code]
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
[/code]

In XHTML you have to use an inline style or you css document

to acheive this as an inline style you would use

[code]
<table cellspacing="0" style="width: 100%; height: 100%; border: none">
[/code]
Link to comment
Share on other sites

Just as an example, you can do this in CSS without the use of tables:
[code]
html, body
{
height: 100%;
}

#flashcontent
{
position: absolute;
width: 800px;
height: 450px;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -225px;
}
[/code]

As you can see, the margin values are exactly half the value of their respective width/height.  This is to counter the setting of left and top to 50%. 

Hope this helps someone,

Dest
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.