Header in Firefox

[CaptorOfSin]

Hey guys, I have a flash header in place of my logo. Everything is great in IE but in Firefox its aligned to the right and i'm having some trouble fixing it. Any help would be terrific.

My code looks like this:


<table style="border: 1px solid #666666;" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="top">

<link rel="stylesheet" href="style1.css" type="text/css" media="screen" />

<div id="header">
<h1><a href="http://www.forceunleashed.org" target="_self">Star Wars: Force Unleashed</a></h1>
<h2>unleash the force... </h2>

</div>
<!-- end id:header -->


<!-- logo -->




<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="body" align="center">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="760" height="189" id="flashforums" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flashforums.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="flashforums.swf" quality="high" bgcolor="#ffffff" width="760" height="189" name="flashforums" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</td>
</tr>
</table>
<!-- /logo -->



Link is here: Forums (http://www.forceunleashed.org/forums/)

Thanks in advance!

[CaptorOfSin]

Can nobody help me??

[Martilee]

All i did with mine is <center> </center> works fine in firefox.

[theFAILURE]

try this code:

<table style="border: 1px solid #666666;" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="top">

<link rel="stylesheet" href="style1.css" type="text/css" media="screen" />

<div id="header">
<h1><a href="http://www.forceunleashed.org" target="_self">Star Wars: Force Unleashed</a></h1>
<h2>unleash the force... </h2>

</div>
<!-- end id:header -->
<!-- logo -->
<br>
<center>
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="body" align="center">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="760" height="189" id="flashforums" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flashforums.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="flashforums.swf" quality="high" bgcolor="#ffffff" width="760" height="189" name="flashforums" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>
</td>
</tr>
</table>
</table>
</center>
<!-- /logo -->

[CaptorOfSin]

Thanks for the help, but it's still the same. The header is still aligned to the right in Firefox.

[DemonOuterverse]

There's a conflict with your #header style. With the float:left, it's causing the table with the flash to float to the left of the header DIV.

If you change it from:

#header {
clear: both;
float: left;
margin: 10px 5px;
width: 450px;
}To:

#header {
clear: both;
margin: 10px 5px;
width: 450px;
}Another option would be to move the flash into the header div, but that would then cause the forum tables to float to the left of the header and the flash.

---
On an unrelated note, I noticed that the header text's background is the same as the page's body background.

I'd look at also changing:

<table style="border: 1px solid #666666;" width="760" cellpadding="0" cellspacing="0" border="0" align="center">
to:

<table style="border: 1px solid #666666; background:#FFFFFF;" width="760" cellpadding="0" cellspacing="0" border="0" align="center">
so that the header matches the rest of the forum's background instead of the body background color.

---
And one final thing, the header text doesn't match the way it looks on the rest of forceunleased.org.
I'd change:

#header h1 a {

text-decoration:none;
border:none;
}to:

#header h1 a {
font-family:"Times New Roman", Times, serif;
color:#000099;
text-decoration:none;
border:none;
}because it seems that it's inheriting vBulletin's link style there. I'm not sure what the exact color is, but #000099 came very close.

One last thing. Eliminate the <center></center> thing if you're going for XHTML 1.X compliance.