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;">

[marzipan]

i think you have to put the "!important" line after each section that's important.


crap...i remember a thread on something like this. but i can't remember where it is.....

[nolongerinuse]

Tried that - IE read it too. Also, even when I code just for FireFox, it won't move to where I want it to, as if there's something limiting it's range.

[talcumpowder]

Child selector. Give me ten seconds...
[ http://www.createblog.com/forums/index.php...opic=135261&hl= ]

[nolongerinuse]

That separates the two browsers ( ), however, FF still doesn't move it left enough, no matter what values I try.

[talcumpowder]

Are you on center alignment, by any chance? Center alignment restricts the amount of pixels you're allowed to move for some strange reason.
It isn't resolution-stable either usually.

[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.

[nolongerinuse]

--------

I think I'm just gonna keep it left aligned. Thanks a lot for the help!!!

[talcumpowder]

-thinks about it for a second- Because of the tag nesting. Firefox and IE both interpret the <center> tag different (at least they do for me). Firfox sort of restricts the movement within the tag and IE allows you to do whatever the hell you want (like usual).

Speculation, of course. (At least it seems plausible.)

[nolongerinuse]

Well, IE tends to screw it up to my liking. It's those damn standards I can't deal with.

[talcumpowder]

Right. Standards are fun though! I get to point and laugh at the poor IE users with their lame rendering engine... And their funky coloured scrollbars. God that was so annoying.
Anyways, since the problem is fixed... I'll be closing this. PM me if you would like it re-opened.

-> Topic Closed.