PDA

View Full Version : Page will not center in Firefox



Grimfire
Mar 9th, 2011, 10:40 PM
The following code centers just fine in IE but Firefox and Chrome it aligns left. I tried wraping all the code into one master div and it almost center aligns in firefox but it still sits slightly to the left. Will someone look through my code and give me a hint?

Thank you in advance!

-------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>Mobile Computer Fix</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="body.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
text-align: center;
}
#master {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
width: 990px;
left: 0px;
top: 0px;
}
-->
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="master">
<div>
<!-- ImageReady Slices (index.psd) -->
<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=30>
<IMG SRC="images/index_01.gif" WIDTH=780 HEIGHT=37 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=37 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=13>
<IMG SRC="images/index_02.gif" WIDTH=162 HEIGHT=94 ALT=""></TD>
<TD COLSPAN=3>
<IMG SRC="images/index_03.gif" WIDTH=163 HEIGHT=94 ALT=""></TD>
<TD COLSPAN=10>
<IMG SRC="images/index_04.gif" WIDTH=151 HEIGHT=94 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="images/index_05.gif" WIDTH=143 HEIGHT=94 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="images/index_06.gif" WIDTH=161 HEIGHT=94 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=94 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=23>
<IMG SRC="images/index_07.gif" WIDTH=438 HEIGHT=180 ALT=""></TD>
<TD COLSPAN=7>
<IMG SRC="images/index_08.gif" WIDTH=342 HEIGHT=180 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=180 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 ROWSPAN=8>
<IMG SRC="images/index_09.gif" WIDTH=51 HEIGHT=174 ALT=""></TD>
<TD COLSPAN=9 ROWSPAN=3>
<IMG SRC="images/index_10.gif" WIDTH=250 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=10>
<IMG SRC="images/index_11.gif" WIDTH=173 HEIGHT=2 ALT=""></TD>
<TD COLSPAN=4 ROWSPAN=4>
<IMG SRC="images/index_12.gif" WIDTH=159 HEIGHT=47 ALT=""></TD>
<TD ROWSPAN=23>
<IMG SRC="images/index_13.gif" WIDTH=147 HEIGHT=489 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2 ROWSPAN=22>
<IMG SRC="images/index_14.gif" WIDTH=32 HEIGHT=487 ALT=""></TD>
<TD>
<IMG SRC="images/index_15.gif" WIDTH=18 HEIGHT=2 ALT=""></TD>
<TD COLSPAN=7 ROWSPAN=4>
<IMG SRC="images/index_16.gif" WIDTH=123 HEIGHT=61 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=8>
<IMG SRC="images/index_17.gif" WIDTH=18 HEIGHT=173 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=24 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=9 ROWSPAN=4>
<IMG SRC="images/index_18.gif" WIDTH=250 HEIGHT=119 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=19 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=9>
<IMG SRC="images/index_19.gif" WIDTH=159 HEIGHT=175 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=18>
<IMG SRC="images/index_20.gif" WIDTH=22 HEIGHT=426 ALT=""></TD>
<TD COLSPAN=3>
<IMG SRC="images/index_21.gif" WIDTH=22 HEIGHT=20 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=8>
<IMG SRC="images/index_22.gif" WIDTH=79 HEIGHT=159 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=20 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=7>
<IMG SRC="images/index_23.gif" WIDTH=22 HEIGHT=139 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=64 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=5>
<IMG SRC="images/index_24.gif" WIDTH=1 HEIGHT=74 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=2>
<IMG SRC="images/index_25.gif" WIDTH=83 HEIGHT=29 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=12>
<IMG SRC="images/index_26.gif" WIDTH=166 HEIGHT=227 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=27 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=14>
<IMG SRC="images/index_27.gif" WIDTH=31 HEIGHT=243 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="images/index_28.gif" WIDTH=19 HEIGHT=2 ALT=""></TD>
<TD ROWSPAN=4>
<IMG SRC="images/index_29.gif" WIDTH=1 HEIGHT=47 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/index_30.gif" WIDTH=19 HEIGHT=1 ALT=""></TD>
<TD COLSPAN=5>
<IMG SRC="images/index_31.gif" WIDTH=83 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/index_32.gif" WIDTH=19 HEIGHT=16 ALT=""></TD>
<TD>
<IMG SRC="images/index_33.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="images/index_34.gif" WIDTH=82 HEIGHT=44 ALT=""></TD>
<TD>
<IMG SRC="images/index_35.gif" WIDTH=18 HEIGHT=16 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/index_36.gif" WIDTH=19 HEIGHT=28 ALT=""></TD>
<TD>
<IMG SRC="images/index_37.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
<TD ROWSPAN=12>
<IMG SRC="images/index_38.gif" WIDTH=18 HEIGHT=296 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7 ROWSPAN=3>
<IMG SRC="images/index_39.gif" WIDTH=97 HEIGHT=24 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=7>
<IMG SRC="images/index_40.gif" WIDTH=7 HEIGHT=153 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=10>
<IMG SRC="images/index_41.gif" WIDTH=1 HEIGHT=267 ALT=""></TD>
<TD COLSPAN=7>
<IMG SRC="images/index_42.gif" WIDTH=153 HEIGHT=21 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=10>
<IMG SRC="images/index_43.gif" WIDTH=106 HEIGHT=267 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=21 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7 ROWSPAN=2>
<IMG SRC="images/index_44.gif" WIDTH=153 HEIGHT=26 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7 ROWSPAN=2>
<IMG SRC="images/index_45.gif" WIDTH=97 HEIGHT=42 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=24 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=7>
<IMG SRC="images/index_46.gif" WIDTH=1 HEIGHT=220 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/index_47.gif" WIDTH=64 HEIGHT=54 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=7>
<IMG SRC="images/index_48.gif" WIDTH=88 HEIGHT=220 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=18 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=6>
<IMG SRC="images/index_49.gif" WIDTH=4 HEIGHT=202 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=4>
<IMG SRC="images/index_50.gif" WIDTH=62 HEIGHT=119 ALT=""></TD>
<TD ROWSPAN=6>
<IMG SRC="images/index_51.gif" WIDTH=31 HEIGHT=202 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=36 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=5>
<IMG SRC="images/index_52.gif" WIDTH=64 HEIGHT=166 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=51 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=4>
<IMG SRC="images/index_53.gif" WIDTH=3 HEIGHT=115 ALT=""></TD>
<TD COLSPAN=3>
<IMG SRC="images/index_54.gif" WIDTH=69 HEIGHT=24 ALT=""></TD>
<TD ROWSPAN=4>
<IMG SRC="images/index_55.gif" WIDTH=101 HEIGHT=115 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=24 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=3>
<IMG SRC="images/index_56.gif" WIDTH=69 HEIGHT=91 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=8 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5 ROWSPAN=2>
<IMG SRC="images/index_57.gif" WIDTH=62 HEIGHT=83 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=11 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/index_58.gif" WIDTH=3 HEIGHT=72 ALT=""></TD>
<TD>
<IMG SRC="images/index_59.gif" WIDTH=2 HEIGHT=72 ALT=""></TD>
<TD>
<IMG SRC="images/index_60.gif" WIDTH=26 HEIGHT=72 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=72 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=26 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=15 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=44 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=27 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=101 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=43 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=35 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=51 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=147 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->

</div>
</BODY>
</HTML>

teedoff
Mar 9th, 2011, 10:55 PM
Hi Grimfire. Couple of things to begin with. First, please reconsider your decision to create a table based layout. This is outdated and very problematic (http://www.hotdesign.com/seybold/).

Second, you should always include a valid doctype (http://htmlhelp.com/tools/validator/doctype.html)for any webpage.

You also have just a few errors in your markup, which can be viewed here (http://validator.w3.org/).

Not sure fixing those will solve your particular issue, but its a start, and since you have only a few, it will probably be very easy to fix them now.

Finally, please wrap code you post in code tags. The #(hash) button in this text editor will do that.

If it doesn't fix, post back here and we can go from there. Also, since you have SO many images, a live link would be nice, since we would need the images to recreate your site locally.

Grimfire
Mar 9th, 2011, 11:02 PM
Thank you for the quick reply! I will go back and use your suggestion and see if it gets fixed. I'll let you know the results when im done.

Thank you!

Excavator
Mar 9th, 2011, 11:15 PM
Hello Grimfire,
Positioning with the margin: 0 auto; is one thing, position: relative; top: 0; left: 0; is another.

Try it like this instead -

#master {
width: 990px;
margin: 0 auto;
position: relative;
}

Grimfire
Mar 10th, 2011, 12:00 AM
I've tried all your suggestions & thank you for the feedback. Unfortunately none of them worked for me. I'm starting to think that becuase I have the older Dreamweaver 8 and a free web template that uses tables instead of DIV's, is the reason why it's not working. I will start from sratch...

Regards, Grimfire

Excavator
Mar 10th, 2011, 12:08 AM
I've tried all your suggestions & thank you for the feedback. Unfortunately none of them worked for me. I'm starting to think that becuase I have the older Dreamweaver 8 and a free web template that uses tables instead of DIV's, is the reason why it's not working. I will start from sratch...

Regards, Grimfire

To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto