Page is centered in IE, but not in other browsers.

I designed a template for pages using Macromedia Fireworks. The canvas was 800x600. I'm very happy with the way it looks, but the exporting did not allow for a centered layout. Everything aligns left.

I've tried to make changes to the markup and I've added considerable css (the only css Fw added was the navbar), but I haven't been able to figure out what I need to center the template in all browsers. Below is the markup I think is relevant. If you think this is a css issue, I hope a moderator will move the thread there and I can post the relevant css as well.

<!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">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript1.2" type="text/javascript">
<!--
function <snip> {
 <snip>
}//-->
</script>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<style type="text/css" media="screen">
@import url("./first.css");
@import url("./second.css");
</style>
</head>
<body onload="MM_preloadImages(<snip>);">
<div id="FWTableContainer884035886">
<table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="800">
 <tr>
<td><table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="800">
 <tr>
 <td><table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="143">
 <tr>
 <td><a href="#"><img name="logo1" src="images/nav/logo1.gif" width="143" height="150" border="0" id="logo1" alt="name" /></a></td>
 </tr>
 <tr>
 <td><a href="#"><img name="logo3" src="images/nav/logo3.gif" width="143" height="39" border="0" id="logo3" alt="name" /></a></td>
 </tr>
</table></td>
 <td><table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="576">
 <tr>
 <td><table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="576">
 <tr>
 <td><a href="#"><img name="logo2" src="images/nav/logo2.gif" width="237" height="150" border="0" id="logo2" alt="name" /></a></td>
 <td><img name="banner1" src="images/nav/banner1.gif" width="5" height="150" border="0" id="banner1" alt="" /></td>
 <td class="banner1" align="center" valign="bottom" bgcolor="#ffffff" width="334" height="150"><h1>Home</h1><br /><img src="images/nav/clear.gif" alt="" /></td>
 </tr>
</table></td>
 </tr>
 <tr>
 <td><table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="576">
 <tr>
 <td><img name="navleft" src="images/nav/navleft.gif" width="24" height="39" border="0" id="navleft" alt="" /></td>
 <td><table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="552">
 <tr>
 <td><table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="552">
 <tr>
 <td><the following snips are nav bar functions & displays which total 380x30px></td>
 <td><snip></td>
 <td><snip></td>
 <td bgcolor="#ffffff"><snip></td>
 <td><snip></td>
 <td bgcolor="#ffffff"><snip></td>
 <td><snip></td>
 <td bgcolor="#ffffff"><snip></td>
 <td><snip></td>
 </tr>
</table></td>
 </tr>
 <tr>
 <td bgcolor="#ffffff"><img src="images/nav/spacer.gif" width="552" height="9" border="0" alt="" /></td>
 </tr>
</table></td>
 </tr>
</table></td>
 </tr>
</table></td>
 <td class="banner4" bgcolor="#ffffff" width="81" height="189">&nbsp;</td>
 </tr>
</table></td>
 </tr>
</table>
<!-- Popup Menus -->
<snip>
<!-- /Popup Menus -->
</div>
</body>
</html>

Any suggestions are appreciated,

Grump