centering and css

Discussion in 'HTML' started by Mopar, Dec 1, 2003.

  1. Mopar

    Mopar Guest

    This is my first post, so I'll try to get right to the point.
    I'm attempting my first site using css to make tables, but so far there's
    one irritating glitch.
    I'd like to have the tables centered but not the text inside the table.
    Any help is very appreciated.

    http://members.shaw.ca/casper99/test/1_15.htm

    Cheers
    99man
     
    Mopar, Dec 1, 2003
    #1
    1. Advertising

  2. Mopar

    brucie Guest

    in post <news:asByb.534866$pl3.42@pd7tw3no>
    Mopar said:

    > I'd like to have the tables centered but not the text inside the table.
    > Any help is very appreciated.
    >
    > http://members.shaw.ca/casper99/test/1_15.htm


    there are no tables there and there are so many issues with your
    html/css i don't know where to start except again.

    nice and easy:

    <style type="text/css">
    p{width:50%;margin:auto;border:1px solid green;}
    </style>

    <p>blah</p>

    the <p> will be 50% the width of the canvas area. the margins are 'auto'
    which means they'll be of equal size, as the width of the <p> is 50% the
    left and right margins will be 25% thus centering the <p>. the text is
    left aligned which is [usually] the default. there is a nice green
    border around the <p> so you can see it.

    --
    brucie
    01/December/2003 05:24:28 pm kilo
     
    brucie, Dec 1, 2003
    #2
    1. Advertising

  3. Mopar wrote:

    > I'd like to have the tables centered but not the text inside the table.
    > Any help is very appreciated.


    table { margin: auto; }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Dec 1, 2003
    #3
  4. Mopar

    Nick Howes Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > Mopar wrote:
    >
    > > I'd like to have the tables centered but not the text inside the table.
    > > Any help is very appreciated.

    >
    > table { margin: auto; }
    >
    > --
    > Toby A Inkster BSc (Hons) ARCS
    > Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    >


    That's all good CSS except for internet explorer won't do it. You'll also
    have to do something like, surround the table in a DIV with "text-align:
    center" which will make ie center the contents in the window, and then add
    "text-align: left" so that the text centering doesn't cascade down to the
    text inside the table. There's other ways like adding a negative margin but
    i think this is the simpelst best way.

    --
    Nick
     
    Nick Howes, Dec 1, 2003
    #4
  5. Mopar

    brucie Guest

    brucie, Dec 1, 2003
    #5
  6. Mopar

    DU Guest

    Nick Howes wrote:
    > "Toby A Inkster" <> wrote in message
    > news:p...
    >
    >>Mopar wrote:
    >>
    >>
    >>>I'd like to have the tables centered but not the text inside the table.
    >>>Any help is very appreciated.

    >>
    >>table { margin: auto; }
    >>
    >>--
    >>Toby A Inkster BSc (Hons) ARCS
    >>Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    >>

    >
    >
    > That's all good CSS except for internet explorer won't do it. You'll also
    > have to do something like, surround the table in a DIV with "text-align:
    > center" which will make ie center the contents in the window, and then add
    > "text-align: left" so that the text centering doesn't cascade down to the
    > text inside the table. There's other ways like adding a negative margin but
    > i think this is the simpelst best way.
    >



    All he has to do is remove the xml declaration. MSIE 6 for windows
    expects to see the doctype declaration (which can trigger standards
    compliant rendering mode) at the very first line of a document. Here,
    the xml declaration creates a conflict; it's really an MSIE 6 bug.

    "An XML declaration is not required in all XML documents; however XHTML
    document authors are strongly encouraged to use XML declarations in all
    their documents."
    http://www.w3.org/TR/2002/REC-xhtml1-20020801/#strict

    11.3 Table formatting by visual user agents
    11.3.2 Horizontal and vertical alignment
    Inheritance of alignment specifications
    "The default alignment for cells depends on the user agent. However,
    user agents should substitute the default attribute for the current
    directionality (i.e., not just 'left' in all cases)."
    http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2.1

    If you insert the "direction:rtl;" css rule to the body or html tag,
    you'll see that not only the text is formatted from right to left but
    the horizontal alignment formating is right aligned as well.

    W3C CSS level 1
    4 Formatting model
    4.1.2 Horizontal formatting
    "(...) if both 'margin-left' and 'margin-right' are 'auto', they will be
    set to equal values. This will center the element inside its parent."
    http://www.w3.org/TR/REC-CSS1#horizontal-formatting

    W3C CSS level 2
    10 Visual formatting model details
    10.3.3 Block-level, non-replaced elements in normal flow
    "If both 'margin-left' and 'margin-right' are 'auto', their computed
    values are equal."
    http://www.w3.org/TR/REC-CSS2/visudet.html#q6

    Interactive complete demo on table alignment (table, cell, text
    direction, row, column, caption):
    http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DynamicTableFormatting.html

    As others mentioned, if you want to format the horizontal alignment of
    data inside cells, then use the CSS property text-align:[left|center|right]
    E.g.: table {text-align:left;}

    DU
     
    DU, Dec 1, 2003
    #6
  7. Mopar

    Brian Tozer Guest

    brucie wrote:
    > in post <news:bqeu4r$1jl$>
    > Nick Howes said:
    >
    >>> table { margin: auto; }

    >
    >> That's all good CSS except for internet explorer won't do it.

    >
    > yes it will
    > http://stuff.bruciesusenetshit.info/centered-table-thingy.html


    Am I correct in assuming that versions of IE that are earlier than IE6 would
    not?

    Brian Tozer
     
    Brian Tozer, Dec 1, 2003
    #7
  8. Mopar

    brucie Guest

    in post <news:bqfve1$mqk$>
    Brian Tozer said:

    >> yes it will
    >> http://stuff.bruciesusenetshit.info/centered-table-thingy.html


    > Am I correct in assuming that versions of IE that are earlier than IE6 would
    > not?


    it wouldn't surprise me. IE6 is over 2 years old - ancient. IE5 is
    getting close to 5 years old - prehistoric.

    --
    brucie
    02/December/2003 08:29:42 am kilo
     
    brucie, Dec 1, 2003
    #8
    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. Lenny
    Replies:
    1
    Views:
    463
    Andy Holmes
    Oct 16, 2003
  2. Replies:
    5
    Views:
    24,846
  3. somebody

    Centering with CSS

    somebody, Jan 9, 2004, in forum: HTML
    Replies:
    13
    Views:
    701
    Steve Pugh
    Jan 23, 2004
  4. Will

    CSS centering

    Will, Apr 27, 2004, in forum: HTML
    Replies:
    11
    Views:
    841
    Nik Coughin
    Apr 29, 2004
  5. Scott

    Centering whole page in CSS

    Scott, Jul 16, 2004, in forum: HTML
    Replies:
    3
    Views:
    4,862
Loading...

Share This Page