FIREFOX WON'T LISTEN, I've been working on this for hours! Options

[nolongerinuse]

No matter what I try, FireFox won't align the blog to the left area of the image!!!

IE does it fine, but even when I code for FireFox, it refuses to align it! What do I do!??!?

CODE

<script language="JavaScript">
document.title ="RandomGrl317's Semi-detailed Travel Log"
</script>
<div align="center">
<IMG SRC="http://www.ninjanoodles.net/pc2.jpg" USEMAP="#pc2" WIDTH=660 HEIGHT=440 BORDER="0">
</div>
<MAP NAME="pc2">
     <AREA SHAPE="RECT" ID="Private" HREF="http://www.xanga.com/private/yourhome.aspx" ALT="Private" COORDS="388,187,

551,202">
     <AREA ID="CLAF" SHAPE="RECT" HREF="http://edit.xanga.com/claf.aspx" ALT="CLAF" COORDS="388,285, 576,300">
     <AREA ID="Subscribe" SHAPE="RECT" HREF="http://www.xanga.com/private/SubscribeTo.aspx?user=RandomGrl317"

ALT="Subscribe" COORDS="388,262, 592,277">
     <AREA ID="Guestbook" SHAPE="RECT" HREF="http://www.xanga.com/guestbook.aspx?user=RandomGrl317" ALT="Guestbook"

COORDS="388,236, 529,251">
     <AREA ID="Profile" SHAPE="RECT" HREF="http://www.xanga.com/profile.aspx?user=RandomGrl317" ALT="Profile"

COORDS="388,211, 511,226">
</MAP>

<style type="text/css">
/*THEME MADE BY NINJANOODLES*/

table.header, table.main, table.footer, table.navigation{
/* edit width */
width:230;
}
table.blogbody, div.blogheader, .caption{
width:230;
}
td.maincenter{
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-top: 0px;
}
body {
scrollbar-Arrow-Color: #5E5349;
scrollbar-Track-Color: #D5C2A6;
scrollbar-Shadow-Color: #D5C2A6;
scrollbar-Face-Color: #D5C2A6;
scrollbar-Highlight-Color: #D5C2A6;
scrollbar-darkshadow-color: #5E5349;
scrollbar-3dLight-Color: #5E5349;
font-family: Times New Roman;
font-size:11px;
}
texttable.left, td.mainleft, table.left, table.navigation, table.footer, table.mainleft, table.search
{
display: none;
}
.module, .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, .content, .smalltext, .standard
{
/* edits main text */
font:normal 11px Times New Roman;
color: #5E5349;
}
a:link{
/* edit the links */
color: #FEFEFE;
text-decoration: Underline;
font:normal 11px Times New Roman;
}
a:visited{
/* edit visited links */
color: #FEFEFE;
text-decoration: none;
}
a:hover {
color:#24388F;
}
.blogbody td{
/* entry margins */
width: 0px;
padding-left: 0px
}
input, select, textarea, .textfield, .button{
/* this edits buttons, drop down menus etc. */
font:normal 11px Times New Roman #FEFEFE;
letter-spacing:0px;
color:#ffffff;
font-family:Times New Roman;
}
div.blogheader, .caption {
/* edits the dates */
font-family:Times New Roman;
text-transform:lowercase;
font-size:20px;
background-color:# Transparent;
color:#FEFEFE;
letter-spacing:-1px;
text-align: center;
text-decoration: none;
}
b, strong{
color:#FEFEFE;
}
table.blogbody {
/* edits your blog or entry space */
border: 0px;
background-color:transparent;
padding-top:0px;
padding-right:0px;
}
.smalltext {
text-align:right;
}
hr {
color: #000000;
}
</style>
<div style="
overflow: auto;
width: 270px;
height: 315px;
margin-top: -390px;
margin-left: -240px;">

[nolongerinuse]

When I set it to left, the blog moves when the window is resized, and still doesn't align correctly in the first place (in either browser).

I'm getting to the point of using JavaScript to tell all FireFox users that they're just not gonna be able to see the blog.

OK, so I removed the center alignment on the image, and set the page alignment to left, then, after resetting the values, a single number covers both browsers perfectly. All I want to know is why this won't work for a center-aligned page.