Why doesn't this container center?

Discussion in 'HTML' started by Mike Silva, Apr 8, 2009.

  1. Mike Silva

    Mike Silva Guest

    Here's a little test page that should, according to my understanding
    and based on what I have read in various places, center the container
    box horizontally. It does so on IE, but on Firefox and Safari the box
    is on the left. Can somebody explain the problem? Thanks.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <style type="text/css">
    <!--

    body {
    margin: 0;
    padding: 0;
    text-align: center;
    }
    #container {
    width: 600px;
    margin 0 auto;
    text-align: left;
    border: thin solid #000;
    }

    -->
    </style>
    </head>

    <body>
    <div id="container">
    Content for id container Goes Here
    </div>
    </body>
    </html>
     
    Mike Silva, Apr 8, 2009
    #1
    1. Advertising

  2. Mike Silva

    Ari Heino Guest

    Mike Silva kirjoitti seuraavasti:
    > margin 0 auto;


    Are we missing something? ':' perhaps?

    Validating css often reveals errors a human eye can't find.
    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Apr 8, 2009
    #2
    1. Advertising

  3. Mike Silva

    Mike Silva Guest

    On Apr 8, 3:02 pm, Ari Heino <> wrote:
    > Mike Silva kirjoitti seuraavasti:
    >
    > >    margin 0 auto;

    >
    > Are we missing something? ':' perhaps?
    >
    > Validating css often reveals errors a human eye can't find.


    Well I'll be... I had used the Dreamweaver "validate" and it didn't
    catch that. I just tried it again to confirm. Many thanks, now I
    know not to count on Dreamweaver "validate".
     
    Mike Silva, Apr 8, 2009
    #3
  4. Mike Silva

    Ari Heino Guest

    Mike Silva kirjoitti seuraavasti:
    > Many thanks, now I
    > know not to count on Dreamweaver "validate".


    Ask your money back or ask for a bug fix!
    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Apr 8, 2009
    #4
  5. On Apr 8, 3:12 pm, Mike Silva <> wrote:
    > > >    margin 0 auto;

    > > Are we missing something? ':' perhaps?
    > > Validating css often reveals errors a human eye can't find.

    > Well I'll be...  I had used the Dreamweaver "validate" and it didn't
    > catch that.  I just tried it again to confirm.  Many thanks, now I
    > know not to count on Dreamweaver "validate".


    Dreamweaver CS3 and CS4 catch the error just fine:

    "Line 18 Error parsing styles" and lo-and-behold, line 18 is "margin
    0 auto;"
     
    Travis Newbury, Apr 8, 2009
    #5
  6. Mike Silva

    Mike Silva Guest

    On Apr 8, 5:19 pm, Travis Newbury <> wrote:
    > On Apr 8, 3:12 pm, Mike Silva <> wrote:
    >
    > > > >    margin 0 auto;
    > > > Are we missing something? ':' perhaps?
    > > > Validating css often reveals errors a human eye can't find.

    > > Well I'll be...  I had used the Dreamweaver "validate" and it didn't
    > > catch that.  I just tried it again to confirm.  Many thanks, now I
    > > know not to count on Dreamweaver "validate".

    >
    > Dreamweaver CS3 and CS4 catch the error just fine:
    >
    > "Line 18 Error parsing styles"  and lo-and-behold, line 18 is "margin
    > 0 auto;"


    Very odd. I'm using Dreamweaver CS4 Windows, and when I choose
    Validate->Markup it reports no errors or warnings found. I just
    looked at the Validator settings in preferences and didn't see
    anything obviously wrong.

    OK, played around a bit more and found it gives the error you report
    in "Browser Compatibility" rather than "Validate". Can't say I would
    have figured that out on my own. So it seems that validation on
    Dreamweave is (at least) a two-step process.
     
    Mike Silva, Apr 8, 2009
    #6
  7. Mike Silva

    dorayme Guest

    In article
    <>,
    Travis Newbury <> wrote:

    > On Apr 8, 3:12 pm, Mike Silva <> wrote:
    > > > >    margin 0 auto;
    > > > Are we missing something? ':' perhaps?
    > > > Validating css often reveals errors a human eye can't find.

    > > Well I'll be...  I had used the Dreamweaver "validate" and it didn't
    > > catch that.  I just tried it again to confirm.  Many thanks, now I
    > > know not to count on Dreamweaver "validate".

    >
    > Dreamweaver CS3 and CS4 catch the error just fine:
    >
    > "Line 18 Error parsing styles" and lo-and-behold, line 18 is "margin
    > 0 auto;"


    Ah Travis, you are like a gunslinger, with DWs in each holster, ready to
    quick draw at all times! <g>

    --
    dorayme
     
    dorayme, Apr 8, 2009
    #7
  8. Mike Silva

    richard Guest

    On Wed, 8 Apr 2009 10:27:03 -0700 (PDT), Mike Silva
    <> wrote:

    >Here's a little test page that should, according to my understanding
    >and based on what I have read in various places, center the container
    >box horizontally. It does so on IE, but on Firefox and Safari the box
    >is on the left. Can somebody explain the problem? Thanks.
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    >TR/html4/strict.dtd">
    ><html>
    ><head>
    ><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    ><title>Test</title>
    ><style type="text/css">
    ><!--
    >
    >body {
    > margin: 0;
    > padding: 0;
    > text-align: center;
    >}
    >#container {
    > width: 600px;
    > margin 0 auto;
    > text-align: left;
    > border: thin solid #000;
    >}
    >
    >-->
    ></style>
    ></head>
    >
    ><body>
    > <div id="container">
    > Content for id container Goes Here
    > </div>
    ></body>
    ></html>


    I believe you are expecting text-align:center to center the division
    as well. It does not. It only acts on text.
    try giving the division a fixed width, then setting margin-left and
    margin-right to auto.
     
    richard, Apr 8, 2009
    #8
  9. Mike Silva

    richard Guest

    On Wed, 8 Apr 2009 14:19:22 -0700 (PDT), Travis Newbury
    <> wrote:

    >On Apr 8, 3:12 pm, Mike Silva <> wrote:
    >> > >    margin 0 auto;
    >> > Are we missing something? ':' perhaps?
    >> > Validating css often reveals errors a human eye can't find.

    >> Well I'll be...  I had used the Dreamweaver "validate" and it didn't
    >> catch that.  I just tried it again to confirm.  Many thanks, now I
    >> know not to count on Dreamweaver "validate".

    >
    >Dreamweaver CS3 and CS4 catch the error just fine:
    >
    >"Line 18 Error parsing styles" and lo-and-behold, line 18 is "margin
    >0 auto;"


    No shit sherlock?
    Gee a simple typo that you could have fixed easily.
     
    richard, Apr 8, 2009
    #9
  10. Mike Silva

    richard Guest

    On Wed, 8 Apr 2009 10:27:03 -0700 (PDT), Mike Silva
    <> wrote:

    >Here's a little test page that should, according to my understanding
    >and based on what I have read in various places, center the container
    >box horizontally. It does so on IE, but on Firefox and Safari the box
    >is on the left. Can somebody explain the problem? Thanks.
    >

    Try this version

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!-- Created on: 2/26/2009 -->
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=windows-1252">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
    .test { width:2in; height:2in; background:#ffff7d; margin:auto;}
    </style>
    </head>
    <body>

    <div class="test">

    sample

    </div>

    </body>
    </html>
     
    richard, Apr 8, 2009
    #10
  11. Mike Silva

    John Hosking Guest

    richard wrote:
    > On Wed, 8 Apr 2009 10:27:03 -0700 (PDT), Mike Silva
    > <> wrote:
    >
    >> Here's a little test page that should, according to my understanding
    >> and based on what I have read in various places, center the container
    >> box horizontally. It does so on IE, but on Firefox and Safari the box
    >> is on the left. Can somebody explain the problem? Thanks.
    >>

    > Try this version
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <!-- Created on: 2/26/2009 -->
    > <head>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=windows-1252">
    > <title></title>
    > <meta name="description" content="">
    > <meta name="keywords" content="">
    > <style type="text/css">
    > .test { width:2in; height:2in; background:#ffff7d; margin:auto;}
    > </style>
    > </head>
    > <body>
    >
    > <div class="test">
    >
    > sample
    >
    > </div>
    >
    > </body>
    > </html>


    I am now convinced you're just trolling.

    --
    John
    Hanlon had me thinking otherwise.
     
    John Hosking, Apr 9, 2009
    #11
  12. Mike Silva

    richard Guest

    On Thu, 09 Apr 2009 01:29:03 +0200, John Hosking
    <> wrote:

    >richard wrote:
    >> On Wed, 8 Apr 2009 10:27:03 -0700 (PDT), Mike Silva
    >> <> wrote:
    >>
    >>> Here's a little test page that should, according to my understanding
    >>> and based on what I have read in various places, center the container
    >>> box horizontally. It does so on IE, but on Firefox and Safari the box
    >>> is on the left. Can somebody explain the problem? Thanks.
    >>>

    >> Try this version
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    >> "http://www.w3.org/TR/html4/loose.dtd">
    >> <html>
    >> <!-- Created on: 2/26/2009 -->
    >> <head>
    >> <meta http-equiv="Content-Type" content="text/html;
    >> charset=windows-1252">
    >> <title></title>
    >> <meta name="description" content="">
    >> <meta name="keywords" content="">
    >> <style type="text/css">
    >> .test { width:2in; height:2in; background:#ffff7d; margin:auto;}
    >> </style>
    >> </head>
    >> <body>
    >>
    >> <div class="test">
    >>
    >> sample
    >>
    >> </div>
    >>
    >> </body>
    >> </html>

    >
    >I am now convinced you're just trolling.



    Pardon moi?
    Before I put this together I did do research. Everything I see on the
    web indicates this is the proper method.
    Kindly put foot in mouth and bite hard.
     
    richard, Apr 9, 2009
    #12
  13. Mike Silva

    dorayme Guest

    In article <>,
    richard <> wrote:

    > I believe you are expecting text-align:center to center the division
    > as well. It does not. It only acts on text


    More than text. All inline stuff.

    --
    dorayme
     
    dorayme, Apr 9, 2009
    #13
  14. Mike Silva

    dorayme Guest

    In article <49dd3436$>,
    John Hosking <> wrote:

    > richard wrote:
    > > On Wed, 8 Apr 2009 10:27:03 -0700 (PDT), Mike Silva
    > > <> wrote:
    > >
    > >> Here's a little test page that should, according to my understanding
    > >> and based on what I have read in various places, center the container
    > >> box horizontally. It does so on IE, but on Firefox and Safari the box
    > >> is on the left. Can somebody explain the problem? Thanks.
    > >>

    > > Try this version
    > >
    > > .test { width:2in; height:2in; background:#ffff7d; margin:auto;}
    > > <div class="test">
    > > sample
    > > </div>
    > >

    >
    > I am now convinced you're just trolling.


    What convinced you in particular? The transitional doctype? The use of
    inches, bothering about height?

    --
    dorayme
     
    dorayme, Apr 9, 2009
    #14
  15. Mike Silva

    Mike Silva Guest

    On Apr 8, 6:33 pm, richard <> wrote:
    > On Wed, 8 Apr 2009 14:19:22 -0700 (PDT), Travis Newbury
    >
    > <> wrote:
    > >On Apr 8, 3:12 pm, Mike Silva <> wrote:
    > >> > >    margin 0 auto;
    > >> > Are we missing something? ':' perhaps?
    > >> > Validating css often reveals errors a human eye can't find.
    > >> Well I'll be...  I had used the Dreamweaver "validate" and it didn't
    > >> catch that.  I just tried it again to confirm.  Many thanks, now I
    > >> know not to count on Dreamweaver "validate".

    >
    > >Dreamweaver CS3 and CS4 catch the error just fine:

    >
    > >"Line 18 Error parsing styles"  and lo-and-behold, line 18 is "margin
    > >0 auto;"

    >
    > No shit sherlock?
    > Gee a simple typo that you could have fixed easily.


    Yes, it was very easy to fix. Not so easy for me to spot, for
    whatever reason. Especially given that I thought Dreamweaver was
    giving the code a thumbs-up. So I learned two lessons on this one.
     
    Mike Silva, Apr 9, 2009
    #15
  16. Mike Silva

    richard Guest

    On Thu, 09 Apr 2009 09:56:27 +1000, dorayme
    <> wrote:

    >In article <49dd3436$>,
    > John Hosking <> wrote:
    >
    >> richard wrote:
    >> > On Wed, 8 Apr 2009 10:27:03 -0700 (PDT), Mike Silva
    >> > <> wrote:
    >> >
    >> >> Here's a little test page that should, according to my understanding
    >> >> and based on what I have read in various places, center the container
    >> >> box horizontally. It does so on IE, but on Firefox and Safari the box
    >> >> is on the left. Can somebody explain the problem? Thanks.
    >> >>
    >> > Try this version
    >> >
    >> > .test { width:2in; height:2in; background:#ffff7d; margin:auto;}
    >> > <div class="test">
    >> > sample
    >> > </div>
    >> >

    >>
    >> I am now convinced you're just trolling.

    >
    >What convinced you in particular? The transitional doctype? The use of
    >inches, bothering about height?



    Well I am totally convinced that most people who post to this group
    have no brains, let alone clues, on how to change things to their
    liking.
    I mean like, sheesh, a simple typo can't possibly be corrected before
    tossing it into the validator?

    Now why do I use inches instead of pixels or ems?
    When you buy space for an ad in a newspaper do they sell that space by
    pixels or ems? No they do not. They sell by inches. Then worry about
    what can fit, and how it will fit, into that space.

    A boundary defined in inches will always be displayed exactly the same
    regardless of the screen resolution. I am well aware that there are
    those here who will take that presentation to the extreme and see at
    what point it fails. While 95% or more of general users never bother
    considering changing the text size.

    The size of a pixel or em is a variable, an inch is a constant.
     
    richard, Apr 9, 2009
    #16
  17. Mike Silva

    richard Guest

    On Wed, 08 Apr 2009 18:58:27 -0500, wayne <> wrote:

    >richard wrote:
    >> On Wed, 8 Apr 2009 10:27:03 -0700 (PDT), Mike Silva
    >> <> wrote:
    >>
    >>> Here's a little test page that should, according to my understanding
    >>> and based on what I have read in various places, center the container
    >>> box horizontally. It does so on IE, but on Firefox and Safari the box
    >>> is on the left. Can somebody explain the problem? Thanks.
    >>>
    >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    >>> TR/html4/strict.dtd">
    >>> <html>
    >>> <head>
    >>> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    >>> <title>Test</title>
    >>> <style type="text/css">
    >>> <!--
    >>>
    >>> body {
    >>> margin: 0;
    >>> padding: 0;
    >>> text-align: center; <<<<<<<<<<<<<<<<<<<<<<<<<<


    hello. what does this insruction say to do?


    >>> }
    >>> #container {
    >>> width: 600px;
    >>> margin 0 auto;
    >>> text-align: left;
    >>> border: thin solid #000;
    >>> }
    >>>
    >>> -->
    >>> </style>
    >>> </head>
    >>>
    >>> <body>
    >>> <div id="container">
    >>> Content for id container Goes Here
    >>> </div>
    >>> </body>
    >>> </html>

    >>
    >> I believe you are expecting text-align:center to center the division
    >> as well. It does not. It only acts on text.
    >> try giving the division a fixed width, then setting margin-left and
    >> margin-right to auto.
    >>

    >I don't see "text-align:center" in the markup, but rather
    >"text-align:left" so I don't think that is the expectation.



    Look in the "body" that is where he attempts to align things in the
    center which will not do what he wants.
     
    richard, Apr 9, 2009
    #17
  18. Mike Silva

    rf Guest

    richard wrote:
    > On Wed, 08 Apr 2009 18:58:27 -0500, wayne <> wrote:


    >>>> body {
    >>>> margin: 0;
    >>>> padding: 0;
    >>>> text-align: center; <<<<<<<<<<<<<<<<<<<<<<<<<<

    >
    > hello. what does this insruction say to do?


    It's not an instruction. It's a property/value pair.

    >>>> }
    >>>> #container {
    >>>> width: 600px;
    >>>> margin 0 auto; <-----------------------------------


    and what is this line missing?
     
    rf, Apr 9, 2009
    #18
  19. Mike Silva

    John Hosking Guest

    dorayme wrote:
    > In article <49dd3436$>, John Hosking wrote:
    >
    >> richard wrote:


    >>> Try this version
    >>>
    >>> .test { width:2in; height:2in; background:#ffff7d; margin:auto;}
    >>> <div class="test">
    >>> sample
    >>> </div>
    >>>

    >> I am now convinced you're just trolling.

    >
    > What convinced you in particular? The transitional doctype? The use of
    > inches, bothering about height?
    >


    All of the above, plus the weird "Created on: 2/26/2009", the orphaned
    background color, and what seemed a deliberate unwillingness to use the
    OP's content as a starting point for comparison or elucidation.
    Richard's post seemed to show a single-minded determination to provide
    something as *different* from what the OP wanted or needed as possible.

    All of the above heaped on a dirty plate which is dropped on the table
    in front of the customer, while the waiter grunts a surly, "try this
    version," by way of provocative explanation for serving salisbury steak
    instead of the T-bone and baked potato the customer was expecting.

    --
    John
    No need to leave a tip.
     
    John Hosking, Apr 9, 2009
    #19
  20. Mike Silva

    dorayme Guest

    In article <>,
    richard <> wrote:

    > Now why do I use inches instead of pixels or ems?
    >


    You can't believe how excited I am in anticipation. <g>

    > When you buy space for an ad in a newspaper do they sell that space by
    > pixels or ems? No they do not. They sell by inches. Then worry about
    > what can fit, and how it will fit, into that space.
    >
    > A boundary defined in inches will always be displayed exactly the same
    > regardless of the screen resolution.


    On my left screen your yellow box is more than 2" and on my right
    screen, it is less than 2". Am I taking presentation to extremes in
    saying or noticing this. I only had to reach to my right for my ruler,
    honest.


    > I am well aware that there are
    > those here who will take that presentation to the extreme and see at
    > what point it fails. While 95% or more of general users never bother
    > considering changing the text size.
    >


    Not sure text size is quite relevant yet. Perhaps you are thinking ahead
    in your defence?

    > The size of a pixel or em is a variable, an inch is a constant.


    The size of a pixel is only variable in the sense that when you go to
    the fruit shop, you get a choice of sizes of watermelons. But once you
    have bought one and are lugging it home, it is a constant. Bit like a
    screen really, when you set it up, a pixel is a fixed size and hard to
    change without fiddling about and you would not do this in the easy on
    the fly way one does for text sizing.

    --
    dorayme
     
    dorayme, Apr 9, 2009
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vivi Orunitia
    Replies:
    11
    Views:
    4,482
    Martijn Lievaart
    Feb 4, 2004
  2. Maitre Bart
    Replies:
    2
    Views:
    528
    Maitre Bart
    Feb 11, 2004
  3. Steven T. Hatton
    Replies:
    4
    Views:
    3,914
    Rob Williscroft
    Dec 5, 2004
  4. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    913
    Mark Rae
    Dec 21, 2006
  5. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,010
    Smokey Grindel
    Dec 2, 2006
Loading...

Share This Page