list alignment problem in Google Chrome

Simon Laub · Jul 30, 2009

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

Jørgen Farum Jensen · Jul 30, 2009

Simon Laub skrev:

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?

Absolutely. Semantically clean HTML code.

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?

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/
..

dorayme · Jul 31, 2009

"Simon Laub said:
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:

<p>sfjsdfhghdf
<ul>
<li>sdf</li>
<li>kdfgjd</li>
</ul>
</p>

....

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.

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

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

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!

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

and so, mildly interestingly is MacIE5. FF, Camino, Opera all incorrect.

dorayme · Jul 31, 2009

Ben C said:
Monkeys at typewriters etc.

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.

This is starting to make me think they've changed the spec since the
last time I looked at it. I'd better check the latest version.

What's Camino?

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...

Rune Jensen · Jul 31, 2009

dorayme skrev:

[...] unconventional whereas - at least I have heard - it was real
monkeys that made WinIE.

It was and it is.

MVH
Rune Jensen

dorayme · Aug 1, 2009

Ben C said:
....
... I checked the latest version of the spec, and it still says
the list item marker is supposed to be outside the "principal block
box".

A list item box just is a block box plus a marker. They call the block
box a "principal" block box for some reason.

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.

That means the bullet should not be centered with the text, and not moved
left or right because of floats getting in the way of the inline
contents of that principal block box.

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>

Simon Laub · Aug 2, 2009

Jørgen Farum Jensen said:
ul [list-style-position:inside;}

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

best wishes
-Simon

From Sydsjælland · Aug 13, 2009

Rune Jensen said:
dorayme skrev:

[...] unconventional whereas - at least I have heard - it was real
monkeys that made WinIE.

Click to expand...

It was and it is.

MVH
Rune Jensen

Translate/// det går fint med dit engelske, Rune

GTalbot · Sep 9, 2009

[...]

<!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>

Click to expand...

you would have an issue with?

Click to expand...

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!

Click to expand...

iCab is correct according to the CSS specs. If you want the bullets
centered with the text, use list-style-position: inside.

Correct.

FF is known to do funny things with list item bullets-- well, sometimes
apparently quite sensible things, but that don't conform to the specs.

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

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Text does not display correctly to glow	2	Sep 16, 2022
Justify-content not working	1	Mar 29, 2021
HTML Works in IE Not Chrome or FireFox Why?	9	Aug 7, 2012
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
I need help fixing my website	2	Oct 15, 2023
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Align img inside nav tabs section	5	Dec 29, 2023

list alignment problem in Google Chrome

Simon Laub

Jørgen Farum Jensen

dorayme

dorayme

dorayme

Rune Jensen

dorayme

Simon Laub

From Sydsjælland

GTalbot

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads