want to ignore the width of "phantom" bullets while centering a <ul>

[Jordan Peterson]

When using {list-style: none} to hide the bullets in a <ul>, the bullets
disappear but they are still accounted-for when positioning text.

Specifically, I have:

<div style='text-align: center'>
<ul style='list-style: none>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

I want the list items to appear so that the *text itself* is centered
within the div, *not* so the
text-plus-the-area-where-the-bullet-would-be is centered within the div.

Any suggestions?

-Jordan

[Claire Tucker]

On Tue, 06 Jul 2004 15:21:49 -0500, Jordan Peterson
<em***@example.com> wrote:

When using {list-style: none} to hide the bullets in a <ul>, the bullets
disappear but they are still accounted-for when positioning text.

Specifically, I have:

<div style='text-align: center'>
<ul style='list-style: none>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

I want the list items to appear so that the *text itself* is centered
within the div, *not* so the
text-plus-the-area-where-the-bullet-would-be is centered within the div.

Any suggestions?

This kind of thing has served me well for making lists appear as
"normal text":

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}

Setting the margins and padding seems to set all of the common
browsers I've tried straight. You can use values other than zero if
you like; the important thing is that there's some kind of setting
there to override the margin-left and padding-left that different
browsers use to make the "bullet space".

Good luck,
-Claire

[Jordan Peterson]

Claire Tucker wrote:

This kind of thing has served me well for making lists appear as
"normal text":

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}

Seems too simple, but sure enough, it works. I had tried setting
margins but was not setting the padding (no reason to, or so I thought).

Thanks much!

[Brian]

Jordan Peterson wrote:

Claire Tucker wrote:

li {
margin: 0;
padding: 0;
}

Seems too simple, but sure enough, it works. I had tried setting
margins but was not setting the padding (no reason to, or so I thought).

Some browsers use a left margin to create space for the marker, others
use left padding.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/