centering list elements

[yawnmoth]

I'm trying to center list elements in a webpage I'm working on, and
setting margin-left to auto for ol (or ul) seems to prevent the number
(or bullet) from displaying in IE6 (strict mode) and Opera7 (it works
fine in Firefox). Any ideas as to why and what I might do to fix it?
I've set up a little demonstration of the problem here:

http://www.frostjedi.com/terra/dev/test.html

It's set up to render in quirks mode to demonstrate that it works in
that mode. just remove the <?xml version=whatever> line to force it
into strict mode, and to see the problem in IE6.
Anyway, like I said, any help would be appreciated - thanks! :)

[Neal]

yawnmoth <te*******@yahoo.com> wrote:

I'm trying to center list elements in a webpage I'm working on,

text-align: center;
and
setting margin-left to auto for ol (or ul) seems to prevent the
number
(or bullet) from displaying in IE6 (strict mode) and Opera7 (it works
fine in Firefox).

list-style-type: none;

[Jukka K. Korpela]

Neal <ne*****@yahoo.com> wrote:

I'm trying to center list elements in a webpage I'm working on,

text-align: center;

That would work for some definition of "centering list elements", but
perhaps not for the intended one. It centers each text line inside the
block, separately, not the block as a whole (on conforming browsers)

and
setting margin-left to auto for ol (or ul) seems to prevent the
number (or bullet) from displaying in IE6 (strict mode) and Opera7 (it
works fine in Firefox).

list-style-type: none;

But presumably the OP does not _want_ to prevent the numbers.

An ol or ul element occupies the entire available width by default. The
browser defaults contain some left margin, where the numbers or bullets
will appear (on some browsers) and which is extracted from the available
width. If you just set margin-left: auto, you set the margin to zero.

Unfortunately, even if you set a specific width (say width: 8em) for the
ol or ul element and then left and right margin to auto, at least IE will
omit the numbers or bullets.

A simple workaround: wrap the list inside a div:

<div class="center">
<ol>...</ol>
</div>

with

div.center { width: 8em;
margin: 0 auto; }

replacing 8em by whatever you wish to set the width to.

If the list items are short, you might want to make the width "as wide as
needed". I'm afraid there's no simple way to do that in CSS as currently
defined and implemented. The pragmatic approach is to use HTML: put the
list inside the cell of a single-cell table and use <table align="center">.

Whether the result is (in either case) really centered depends on what you
mean by centering. The list element's box is centered (you can see what
that box really is by setting a border for the ol or ul element), and
inside that box, there's a fairly wide part on the left reserved for the
numbers or bullets. So looking at the list _content_, or even looking at
the content plus the visible markers, it doesn't look quite centered but
appears somewhat to the right of the center.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[TerraFrost]

Jukka K. Korpela wrote:

Neal <ne*****@yahoo.com> wrote:

<snip>

That would work for some definition of "centering list elements", but perhaps not for the intended one. It centers each text line inside the block, separately, not the block as a whole (on conforming browsers)
yup - text-align: center does indeed not produce the effect that i
want.
<snip>

A simple workaround: wrap the list inside a div:

<div class="center">
<ol>...</ol>
</div>

with

div.center { width: 8em;
margin: 0 auto; }

replacing 8em by whatever you wish to set the width to.

that worked - thanks for the suggestion :)