Why does this page align to the left...?

If you head out to http://www.echoframe.com/Cart/home.php, you'll notice that on a Windows platform (IE7), the page is centered. In Firefox and Safari, the page aligns itself in the upper left hand corner.

You can view the source code of the page (please also look at http://echoframe.com/Cart/index.php) to see how things are coded on the page itself. I also have a portion of the stylesheet documented below.

Bottom line: I need consistency in both platforms. I'm confident I've overlooked some protocol somewhere which is why Firefox and Safari are not behaving. What am I missing?
/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 5347 2006-12-22 20:26:09Z birdbrain $
 */
 
body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 16px;
        color: #121111;
        text-align: left;
        vertical-align: top;
        padding: 0px;
        height: 100%;
        width: 100%;
        margin: 0;
	background-color: #f8f8f8;
}
 
.footer {
        FONT-SIZE:8pt;
            COLOR: #000066;
           FONT-FAMILY: Microsoft Sans Serif, Helvetica, 'Times New Roman';
          font-weight:normal;
 
}
 
 
td.background {
        background-image: url(http://echoframe.com/Cart/images/ZenCartBackground.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #f8f8f8;
         text-align: center;
}

Open in new window

brucegustPHP DeveloperAsked:
Who is Participating?
 
rbudjConnect With a Mentor Commented:
this is happening because your main table is set to use the CSS property contentmainWrapper.  If you choose to use tables to layout your pages then you may run into many more problems than this one, however, to fix this problem, place your main table in a <div>

<div id="contentMainWrapper"><table width="900" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">

.... the rest of your code goes here too

</div>

Putting all your code between these div's will center your table on all browsers.
0
 
wilson1000Connect With a Mentor Commented:
Hi brucegust,

The fact is, FF and Safari are bahaving. As rbudj has rightly outlined, tables have no place in a layout design with current standards.

I went ahead and validated your page with w3c : they found 137 Errors, 7 warning(s) - try cleaning up the code in the page and passing validation.

A quick fix :

put this into your your main css file...

#outerContainer {
margin: 0 auto;
width:900px;
}

and wrap everything with in this...

<div id="outerContainer">

</div>
0
 
wilson1000Commented:
... apart from your first table of course :@)
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
brucegustPHP DeveloperAuthor Commented:
Thanks guys for your input. I don't disagree with you at all as far as my stylesheet being a mess. However, it belongs to zencart and after fooling with this app for the better part of nine months, I have decided it's best sometimes to go ahead and fix what I can and let the rest be.

rbudj, your suggestion worked so you have the points. wilson, thanks to you as well for your suggestion.
0
 
wilson1000Commented:
No worries, good luck!
0
 
brucegustPHP DeveloperAuthor Commented:
I did not mean to close this question, guys. I'll make it right.

Sorry!
0
 
wilson1000Commented:
Oh, you might want to remove the </div> closing tag you have after the wrapped table opening, it's located directly at the end like so...:

<div alignr="center"><table width="900" border="0" cellspacing="0" cellpadding="0">      </div>

You should move to the point where this table closes :

</table>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.