|
|
 | list alignment problem in Google Chrome
Fra : Simon Laub |
Dato : 30-07-09 21:12 |
|
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 (30-07-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 30-07-09 21:31 |
|
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/
..
| |
Simon Laub (02-08-2009)
| Kommentar
Fra : Simon Laub |
Dato : 02-08-09 00:28 |
|
"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i meddelelsen
news:4a72031c$0$15873$edfadb0f@dtext01.news.tele.dk...
>
> ul [list-style-position:inside;}
>
The help I needed. It tried it, and it works now.
Thanks to you and dorayme.
best wishes
-Simon
| |
dorayme (31-07-2009)
| Kommentar
Fra : dorayme |
Dato : 31-07-09 00:30 |
|
In article <4a71fe87$0$56767$edfadb0f@dtext02.news.tele.dk>,
"Simon Laub" <Simon.Laub@FILTER.mail.tele.dk> wrote:
> 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
| |
Ben C (31-07-2009)
| Kommentar
Fra : Ben C |
Dato : 31-07-09 15:15 |
|
On 2009-07-30, dorayme <doraymeRidThis@optusnet.com.au> wrote:
[...]
><!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!
iCab is correct according to the CSS specs. If you want the bullets
centered with the text, use list-style-position: inside.
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.
| |
 dorayme (31-07-2009)
| Kommentar
Fra : dorayme |
Dato : 31-07-09 22:58 |
|
In article <slrnh75uv8.41k.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:
> > 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.
and so, mildly interestingly is MacIE5. FF, Camino, Opera all incorrect.
--
dorayme
| |
Ben C (31-07-2009)
| Kommentar
Fra : Ben C |
Dato : 31-07-09 23:08 |
|
On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <slrnh75uv8.41k.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
>
>> > 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.
>
> and so, mildly interestingly is MacIE5.
Monkeys at typewriters etc.
> FF, Camino, Opera all incorrect.
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?
| |
Sherm Pendley (31-07-2009)
| Kommentar
Fra : Sherm Pendley |
Dato : 31-07-09 23:24 |
|
Ben C <spamspam@spam.eggs> writes:
> On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
>> In article <slrnh75uv8.41k.spamspam@bowser.marioworld>,
>> Ben C <spamspam@spam.eggs> wrote:
>>
>>> iCab is correct according to the CSS specs.
>>
>> and so, mildly interestingly is MacIE5.
>
> Monkeys at typewriters etc.
Mac IE was IE in name only. Entirely different code, developers, etc.
It was actually one of the better browsers of its day, in terms of
standards compliance - *much* better than IE for Windows.
Of course, its day was long ago...
sherm--
| |
dorayme (31-07-2009)
| Kommentar
Fra : dorayme |
Dato : 31-07-09 23:34 |
|
In article <slrnh76qmm.41k.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:
> On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> > In article <slrnh75uv8.41k.spamspam@bowser.marioworld>,
> > Ben C <spamspam@spam.eggs> wrote:
> >
> >> > 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.
> >
> > and so, mildly interestingly is MacIE5.
>
> 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.
>
> > FF, Camino, Opera all incorrect.
>
> 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...
--
dorayme
| |
Rune Jensen (31-07-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 31-07-09 23:40 |
|
dorayme skrev:
> [...] unconventional whereas - at least I have heard - it was real
> monkeys that made WinIE.
It was and it is.
MVH
Rune Jensen
| |
From Sydsjælland (13-08-2009)
| Kommentar
Fra : From Sydsjælland |
Dato : 13-08-09 17:12 |
|
"Rune Jensen" <runeofdenmark@gmail.com> skrev i en meddelelse
news:4a7372c0$0$25195$456a7185@news.cirque.dk...
> dorayme skrev:
>
>> [...] unconventional whereas - at least I have heard - it was real
>> monkeys that made WinIE.
>
> It was and it is.
>
>
> MVH
> Rune Jensen
Translate/// det går fint med dit engelske, Rune 
| |
Erik Ginnerskov (14-08-2009)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 14-08-09 05:59 |
|
From Sydsjælland wrote:
>> It was and it is.
> Translate/// det går fint med dit engelske, Rune
Øh, resten af tråden var afviklet på engelsk, spørgeren startede på engelsk
og kan derfor formodes ikke at kunne håndtere vores dejlige sprog, hvorfor
skulle Rune så pludselig begynde at skrive på dansk?
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk
| |
Ben C (01-08-2009)
| Kommentar
Fra : Ben C |
Dato : 01-08-09 15:37 |
|
On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <slrnh76qmm.41k.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
>
>> On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
>> > In article <slrnh75uv8.41k.spamspam@bowser.marioworld>,
>> > Ben C <spamspam@spam.eggs> wrote:
>> >
>> >> > 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.
>> >
>> > and so, mildly interestingly is MacIE5.
>>
>> 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.
>
>
>>
>> > FF, Camino, Opera all incorrect.
>>
>> 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...
OK, anyway, 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.
That means the bullet should not 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.
| |
dorayme (01-08-2009)
| Kommentar
Fra : dorayme |
Dato : 01-08-09 23:45 |
|
In article <slrnh78kkg.41k.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:
> On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> > In article <slrnh76qmm.41k.spamspam@bowser.marioworld>,
> > Ben C <spamspam@spam.eggs> wrote:
> >
> >> On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> >> > In article <slrnh75uv8.41k.spamspam@bowser.marioworld>,
> >> > Ben C <spamspam@spam.eggs> wrote:
> >> >
> >> >> > 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.
> >> >
> >> > and so, mildly interestingly is MacIE5.
> >>
....
> >> > FF, Camino, Opera all incorrect.
> >>
> >> 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.
> >>
....
> ... 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>
--
dorayme
| |
Ben C (02-08-2009)
| Kommentar
Fra : Ben C |
Dato : 02-08-09 18:51 |
|
On 2009-08-01, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <slrnh78kkg.41k.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
>
>> On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
>> > In article <slrnh76qmm.41k.spamspam@bowser.marioworld>,
>> > Ben C <spamspam@spam.eggs> wrote:
>> >
>> >> On 2009-07-31, dorayme <doraymeRidThis@optusnet.com.au> wrote:
>> >> > In article <slrnh75uv8.41k.spamspam@bowser.marioworld>,
>> >> > Ben C <spamspam@spam.eggs> wrote:
[...]
> ...
>> ... 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.
Yes, I think that interpretation is right, and pretty much what they
say in 9.2.1.
>> 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.
FF (and even Opera sometimes) do do funny things with the bullets when
you have floats in the way like that. They're trying to be helpful, but
it's usually better to stick to the specs.
> 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.
Yes, but usually people don't like that when the text in the list-items
wraps over a few lines. They want a sort of column for bullets and
another one for text, which only list-style-position: outside gives you.
Then the fix is to make the ul/ol a BFC (with overflow: hidden e.g.) so
the whole thing goes to the right of the float, borders, bullets and
all.
> 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>
Quite. Centering is altogether rather out of fashion these days and
tends to makes your page look a bit Rube Goldberg.
| |
GTalbot (09-09-2009)
| Kommentar
Fra : GTalbot |
Dato : 09-09-09 16:40 |
| | |
|
|