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
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]
You fixed in a second what I've been literally trying to solve for the last 6 hours without a break.

Sometimes the best way to learn is the hard way  ;)

Thank you very very much. Page validates without a problem now.

All the best.

Goran
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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.