17 replies [Last post]
ActiveNelson
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-04-04
Posts: 5
Points: 0

http://pesm.active.com/exec/marineMarathon2006/nelsonTest.cfm?publicationID=373

the above link is a test page. The whole site, including the live one MarineMarathon.com looks off-center in FireFox but in IE its working perfectly.

The code I'm currently using is

body {margin-right:auto; margin-left:auto;}

I've tried a number of different codes and variations. Has anyone else run into this problem? Thanks for any help in advance. Laughing out loud

Anonymous
Anonymous's picture
Guru

How to center a page with CSS?

Doctype. :roll:

buskerdog
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2005-01-20
Posts: 16
Points: 0

How to center a page with CSS?

Triumph wrote:
Doctype. :roll:

Shock This IS the beginner forum, isn't it?

Try sticking this at the very top of your HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

Try putting this in the body {}

	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
position:relative;

I'm very much a beginner too so that might be rubbish. But give it a shot. Also people are going to suggest getting rid of tables and doing all the layout with CSS.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to center a page with CSS?

Sorry to have to start off on this foot but this is a CSS forum and one that is very keen on Standards, at this time working with CSS and Standards requires pages to be using full and proper DocTypes (DTD)

You have at present no DTD at all.

This would have been apparent from reading the forum guidelines or from lurking around a while before posting.

To your problem; you should really be centering your page on the wrapper/container (first element) not by fixing a width on the body and trying to center the body

As your layout stands you can try centering FF by adding this:

body>div {margin:0 auto;} and removing the fixed width on the body element.

However you should include a full DTD and rename your unnamed outer div to wrapper/container and center on that, in standards mode IE6 will center with margin 0 auto so you will not need the child combinator '>' (just for test purpose), just rename and style on the outer element

Further tables are really not the way to lay out any design and especially not this style of two column which is very easy to achieve with CSS.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

buskerdog
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2005-01-20
Posts: 16
Points: 0

How to center a page with CSS?

I'm psychic. Cool

ActiveNelson
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-04-04
Posts: 5
Points: 0

How to center a page with CSS?

Triumph wrote:
Doctype. :roll:

/sigh

theres a flamer on every board. oh, well. I knew I should have brought my flame retardent suit before signing up.

So, back on topic. Here where I work, this is the biggest site we've made to date and the CMS that we work with isn't really ideal. The CMS won't let us put DOCTYPE codes in. So, we do what we can. I'm still new here @ Active so I'm still learning what boundries we can push.

Thanks for ALL the help. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to center a page with CSS?

buskerdog wrote:
I'm psychic.

Quite seriously! less of the cheek please buskerdog.

@ActiveNelson you have not been flamed , and have received some help with your problem. DocType is important and we find ourselves having to mention it time and time again, which does become very tedious for those of us that have been around a while , we hope that people will take this on board through reading forum guidelines or by lurking on a board for a while before actively posting, both of these are considered good forum netiquette; however this board is run in as friendly and informal manner as possible, BUT that does not mean we will not mention these points.

Please do participate and hopefully learn from the forum. If you require help with DocTypes and their purpose there is some guidance in the 'How To' section.

Hugo/Mod

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ActiveNelson
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-04-04
Posts: 5
Points: 0

How to center a page with CSS?

Hugo wrote:
body>div {margin:0 auto;}

Thanks SOO MUCH! This works WITHOUT the DOCTYPE code. Laughing out loud

which is very strange. But nonetheless I can move on. Thanks so much!

Anonymous
Anonymous's picture
Guru

How to center a page with CSS?

ActiveNelson wrote:
Triumph wrote:
Doctype. :roll:

/sigh

theres a flamer on every board. oh, well. I knew I should have brought my flame retardent suit before signing up.You have not been flamed. Sigh and roll your eyes all you want but common etiquette would tell you to read the stickies, such as this one which states

Quote:
Before Asking:
  1. Search and see if you can find a similar problem with a solution.

  • Check the FAQ, Frequently Asked Questions as often the answer is already there.
  • Validate your CSS and Markup (HTML or XHTML)
  • Ensure that you have a valid, full DTD and that you are rendering in 'Standards' mode.
  • Them's the rules. If you follow them you get higher quality help. If you don't we nudge you toward at least the first step which happens to be:

    Triumph wrote:
    Doctype. :roll:

    Taking the first step just shows you are at least trying and not simply dumping your problems onto others for a quick fix.

    As far as I know there is no CMS out there into which you can not add a proper DOCTYPE. I'd suggest looking in the header template.

    [/]
    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 18 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    How to center a page with CSS?

    Active wrote:

    This works WITHOUT the DOCTYPE code

    It's why I supplied it Active. FF will work with auto margins even in quirks mode, IE on the other hand will not, yes you can work with this solution but down the road you will encounter more and more problems running in quirks mode, but as you say your new to your company, so the best thing you can do is to slowly but surely press the matter of standards compliance to your bosses, there are plenty of compliant CMS engines out there.

    Hugo.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    ActiveNelson
    Offline
    newbie
    Last seen: 15 years 6 weeks ago
    Joined: 2006-04-04
    Posts: 5
    Points: 0

    How to center a page with CSS?

    Hugo wrote:
    It's why I supplied it Active. FF will work with auto margins even in quirks mode, IE on the other hand will not, yes you can work with this solution but down the road you will encounter more and more problems running in quirks mode, but as you say your new to your company, so the best thing you can do is to slowly but surely press the matter of standards compliance to your bosses, there are plenty of compliant CMS engines out there.

    Hugo.

    First off, sorry to the CSS Forum community. I did do a search for "Center Page" and other keywords but didn't find the answer. My fault for not reading the Stickys first.

    Second, to give you a little insight on how young and new this web services department is here, I am the first person to push CSS and Flash elements to client websites. So yea, theres not much I can do still being a newbie here.

    Lastly, now the issue on that nifty code that you, Hugo, gave me works on FF. Now, on IE, if I remove the width code from the BODY CSS, the site will have too much whitespace on the right (See attachment.)

    I'm thinking theres no way around this issue without the DOCTYPE code, but if there is, does anyone know?

    Anonymous
    Anonymous's picture
    Guru

    How to center a page with CSS?

    Does the CMS have a template you can work with or are you only allowed to change the CSS file? Can you tell us which CMS you are using or is it proprietary?

    ActiveNelson
    Offline
    newbie
    Last seen: 15 years 6 weeks ago
    Joined: 2006-04-04
    Posts: 5
    Points: 0

    How to center a page with CSS?

    The CMS seems to be coded inhouse by a person who no longer works here. So, I'll work with the person is maintaining it to put in the DOCTYPE code in. Thanks to everyone and again, sorry for not looking @ the stickys first.

    ----------

    The CMS, in a nut shell is like this:

      
    <html>
    
    
    
    <head><title>Marine Corps Marathon 2006 :: Welcome</title>
    
    
    <META name="description" content=""><META name="KEYWORDS" content=""> 
    
    <LINK REL="stylesheet" HREF="/exec/marineMarathon2006/templates/compiled.css" TYPE="text/css">
    </head>
    
    
     <body onLoad="MM_preloadImages('/exec/marineMarathon2006/images/shared/topNav/over/register_over.gif','/exec/marineMarathon2006/images/shared/topNav/over/confirmation_over.gif', '/exec/marineMarathon2006/images/shared/topNav/over/hotel_over.gif', '/exec/marineMarathon2006/images/shared/topNav/over/training_over.gif', '/exec/marineMarathon2006/images/shared/topNav/over/volunteers_over.gif')">
    
    <div align="center">
    <table  border="0" bgcolor="#FFFFFF" width="" cellpadding="0" cellspacing="0" align="center" ID="maintable"><tr><td colspan="3" valign="top">
    <!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">

    the CSS and JS files are uploaded through the CMS. The HTML code is inserted through the CMS starting with the BODY tag. I can't touch anything in the HEAD tags. Sad Which makes me sad.

    buskerdog
    Offline
    Regular
    Last seen: 13 years 13 weeks ago
    Joined: 2005-01-20
    Posts: 16
    Points: 0

    How to center a page with CSS?

    Hugo wrote:
    buskerdog wrote:
    I'm psychic.

    Quite seriously! less of the cheek please buskerdog.
    Hugo/Mod

    Sad I was just joking. I think these boards are an excellent resource.

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 10 weeks 4 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    How to center a page with CSS?

    I thought it was funny, especially as your crystal ball had you saying what would be said just seconds before it was, indeed, said. Laughing out loud

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 18 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    How to center a page with CSS?

    And I didn't ; as evidenced by my reaction! Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 10 weeks 4 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    How to center a page with CSS?

    I knew you'd say that.

    Quod erat demonstratum. Wink

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 18 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    How to center a page with CSS?

    Great another phychic :roll: Sic erat in fatis

    and enough with the latin!

    Quid quid latine dictum sit, altum videtur; not!

    P.S Si hoc legere scis nimium eruditionis habes

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me