list alignment problem in Google Chrome

Discussion in 'HTML' started by Simon Laub, Jul 30, 2009.

  1. Simon Laub

    Simon Laub Guest

    I have a number (many) of old web pages with list items that look horrible
    in Google Chrome.

    In html it looks something like this:

    <html>
    <head>
    <style type="text/css">
    h1 {text-align:center}
    h2 {text-align:left}
    h3 {text-align:right}
    p {text-align:center}
    li {text-align:center}
    </style>
    </head>

    <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <p>sfjsdfhghdf
    <ul>
    <li>sdf</li>
    <li>kdfgjd</li>
    </ul>
    </p>
    </body>
    </html>

    Testing this on w3 schools
    http://www.w3schools.com/Css/tryit.asp?filename=trycss_text-align
    the list items are centered as expected.

    The pages are 10+ year olds and still come out
    correctly in IE and Mozilla. But Google Chrome
    insists on putting the lists left centered and the text
    centered. Basicly destroying the layout of the pages.

    tried a stylesheet solution
    #center {margin-right:auto;margin-left:auto;width:740px;}

    and double aligns like -
    <div align="center">
    <div id="center">

    and then it works. While something like
    <div class="center">
    around the whole thing doesnt work in Chrome -
    it works in all other browsers.

    Whats going on you wonder. Even
    if the html wasnt correct I would argue
    that stylesheets people have been using for years
    in all other browsers should be supported ...
    But here the codes even seems to be correct and verified.

    While letting of steam you kind of wonder with this alignment thing,
    It started off like
    <center>
    . . .
    . . .
    </center>

    which was then replaced with

    <div align="center">
    ...
    ...
    </div>

    and now most people do something like:

    <style>
    center{margin-right:auto;margin-left:auto;width:740px;}
    </style>
    <div class="center">
    ...
    ...
    </div>

    Progress you wonder?

    But worst of all of course, when it if still doesnt work.
    Any suggestions on what to do to make it
    work in Chrome also?

    -Simon
     
    Simon Laub, Jul 30, 2009
    #1
    1. Advertisements

  2. Simon Laub skrev:
    Absolutely. Semantically clean HTML code.
    ul [list-style-position:inside;}

    --

    Med venlig hilsen
    Jørgen Farum Jensen
    Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
    Webdesign med stylesheets: http://webdesign101.dk/cssbog/
    ..
     
    Jørgen Farum Jensen, Jul 30, 2009
    #2
    1. Advertisements

  3. Simon Laub

    dorayme Guest

    ....

    This is wrong, enclosing the list inside a paragraph element is 'against
    the rules' (silly enough in this respect, of course one *should* be able
    to have a list inside a paragraph, it is a higher order semantic thing
    that is a natural in ordinary language). But this is how it is for the
    moment. In 4.01 Strict:

    9.3.1 Paragraphs: the P element
    ....
    The P element represents a paragraph. It cannot contain block-level
    elements (including P itself).

    But perhaps you just want to have a heading above the list? In that case
    use a heading element. Or if you just want to make a short speech on top
    or before a list, use the P (and close it or at least do not add a close
    tag after the list.
    The page looks nothing like what anyone might actually want in my FF (to
    take a case you are happy with) with headings all over the show. But
    let's forget the headings for the moment.

    Perhaps it is essentially:

    <!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>List alignment</title>
    <style type="text/css">
    li {text-align:center}
    </style>
    </head>
    <body>
    <ul>
    <li>sdf</li>
    <li>kdfgjd</li>
    </ul>
    </body>
    </html>

    you would have an issue with?

    For a start, different browsers will render this different with respect
    to the bullets. FF has the bullets reasonably next to the text items and
    centres the lot. iCab has the text items centred fine but the bullets
    looking ridiculous to the far left! Similarly absurd are some other
    browsers.

    Obviously, you can avoid by turning off the bullet in the CSS. And you
    can put non-UL-supplied bullets by way of inline images or special
    characters (on my Mac, I like Option-8, a big fat dot!).

    Is there another way? Yes, depending. But it involves a compromise or
    guess about widths. For example, in the above mark up you can leave off
    styling the LI altogether and instead put:

    ul {margin: auto; width: 10em;}

    to get the items centred nicely enough. It looks much better generally
    this than to have the actual text centred as in centre justified text in
    a paragraph (an evil imo).

    How about supplying a really likely and useful looking URL with what you
    really are doing (no matter if it is not quite right) so solutions can
    be suggested, not like the highly unlikely one represented by your code
    above?
     
    dorayme, Jul 31, 2009
    #3
  4. Simon Laub

    dorayme Guest

    iCab is correct according to the CSS specs.[/QUOTE]

    and so, mildly interestingly is MacIE5. FF, Camino, Opera all incorrect.
     
    dorayme, Jul 31, 2009
    #4
  5. Simon Laub

    dorayme Guest

    You have to be circumspect about judgements on MacIE, significantly
    different beast to WinIE with classier team that developed it afaik. I
    cannot say if they wore monkey suits, they were perhaps wild partying
    types, unconventional whereas - at least I have heard - it was real
    monkeys that made WinIE.
    Mac browser, sort of clean Mozilla engined thing for Macs... There was
    no real reason for including it, just I have it in my dock and fire it
    up to say hello to it now and then, imagine being in my dock and never
    being addressed or used, it was just compassion on my part...
     
    dorayme, Jul 31, 2009
    #5
  6. Simon Laub

    Rune Jensen Guest

    dorayme skrev:
    It was and it is.


    MVH
    Rune Jensen
     
    Rune Jensen, Jul 31, 2009
    #6
  7. Simon Laub

    dorayme Guest

    I think it is called principal to emphasise that it is the topmost with
    respect to what it can contain, either only block boxes or only inline
    boxes. Thus, when it talks of generation of boxes *outside* (for
    list-item markers, say), there is felt a need to emphasise that it in
    respect to the (principal) block box, the one that establishes
    containing block for descendant boxes, can and is itself positioned etc
    - as distinguished from the block boxes or inline boxes it contains.
    Yes, good point. And the argument for the way it is supposed to be (if
    this is any different to what you imply) can be seen better when borders
    are stuck on the list-items, and floated images within that are meant to
    go left or right of text. In other words it does not look quite so
    ridiculous (as I said earlier). Put it another way, if images are part
    of the list item, and floated, it seems *logical* for the bullets to be
    left of the lot rather than just the text.

    As has been mentioned, there is some control on these matters via
    list-style-position.

    One might in practice though, consider preferring to be drawn and
    quartered than to mess about with centre aligning things in lists... Why
    complicate life? <g>
     
    dorayme, Aug 1, 2009
    #7
  8. Simon Laub

    Simon Laub Guest

    The help I needed. It tried it, and it works now.
    Thanks to you and dorayme.

    best wishes
    -Simon
     
    Simon Laub, Aug 2, 2009
    #8
  9. Translate/// det går fint med dit engelske, Rune:)
     
    From Sydsjælland, Aug 13, 2009
    #9
  10. Simon Laub

    GTalbot Guest

    There are bug reports on this.

    Text-align: right/center aligns list marker incorrectly when list-
    style-position is 'outside'
    https://bugzilla.mozilla.org/show_bug.cgi?id=25291

    http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug229
    http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/list-style-position-outside-text-align.html

    I also submitted a testcase to be included in the next phase of CSS
    2.1 test suite:

    http://www.gtalbot.org/BrowserBugsSection/css21testsuite/list-style-position-001.html

    regards, Gérard
     
    GTalbot, Sep 9, 2009
    #10
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.