positioning in ordered lists

[Stann]

Hello,

I'm working with ordered lists. The default list is indented about the same
amount as a <blockquote> would do. Is there any way to over-ride or tweak
this, so the list is not indented at all? (oops, okay, just changed that
with "text-indent", re-defining the <li> tag. It "un-indents" the list
items, but only the first text line of each item. other text lines are
still indented a further "tab" to the right ..

On the same subject, ordered lists contain quite a wide text indent between
the <ol> number and the first character of the list item. Seems like about
a 2-character indent. Is there any way to change this?

thanks for any help with this...

Stan

 

[dorayme]

Hello,

I'm working with ordered lists. The default list is indented about the same
amount as a <blockquote> would do. Is there any way to over-ride or tweak
this, so the list is not indented at all?

First set

ul {margin: 0;padding: 0;}

li {margin: 0;padding: 0;}

to see the effect. Then you can adjust to your heart's content.

You do know about css? If you don't and want quick, in the html,
put:

<ul style="margin: 0;padding: 0;">

and so on.

Otherwise, put this sort of thing in the head of the document:

<style type="text/css">
ul {margin: 0;padding: 0;}
li {margin: 0;padding: 0;}
</style>

Otherwise and best if you have a more styles, put a link in the
head to a separate style sheet.

 

[Jukka K. Korpela]

Scripsit Stann:

I'm working with ordered lists. The default list is indented about
the same amount as a <blockquote> would do.

The default indentation for both is 40 pixels, in common practice, though
lists look different because of the numbers.

Is there any way to
over-ride or tweak this, so the list is not indented at all?

Surely. As "dorayme" tells in his/her reply, you can set the margins and
paddings to zero. However, there's an important side effect: there won't be
any room for the numbers then.

Thus, you could set all the margins and paddings to zero _except_
margin-left for <ol> (or the <li> elements), which should be set to a value
that is sufficient for the number, the period, and the spacing before the
list item content. This is not exact science, but

ol, li { margin:0; padding: 0; }
ol { margin-left: 1.6em; }

would typically result in "unindented" numbered list. But don't blame me if
part of the numbers gets chopped off under some circumstances. The only way
to get exact results (with the usual caveats) is to make the numbers part of
the content:

<ul>
<li>1. foo bar
<li>2. zap zap
...
</ul>

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

(oops, okay, just changed that with "text-indent",

That might give the illusion of working, until you view the page in a window
that is narrower than needed to keep each list item on one line. Please
don't use CSS properties without reading and understanding their _meaning_

re-defining the <li> tag.

<lecture type="semantic">No, the <li> tag _means_ "list item". There is no
way you could change this definition. You can use the element against its

It "un-indents" the list items, but only the first text line of each
item. other text lines are still indented a further "tab" to the
right ..

Well, yes. You would have known this in advance if...

On the same subject, ordered lists contain quite a wide text indent
between the <ol> number and the first character of the list item.
Seems like about a 2-character indent. Is there any way to change
this?

Not really in CSS as currently defined and implemented. The tricky way of
putting numbers into the items would avoid the problem, of course.

 

[Ben C]

Surely. As "dorayme" tells in his/her reply, you can set the margins and
paddings to zero. However, there's an important side effect: there won't be
any room for the numbers then.

Thus, you could set all the margins and paddings to zero _except_
margin-left for <ol> (or the <li> elements), which should be set to a value
that is sufficient for the number, the period, and the spacing before the
list item content. This is not exact science, but

ol, li { margin:0; padding: 0; }
ol { margin-left: 1.6em; }

would typically result in "unindented" numbered list. But don't blame me if
part of the numbers gets chopped off under some circumstances. The only way
to get exact results (with the usual caveats) is to make the numbers part of
the content:

There is another caveat which is that the 40px margin-left (or
padding-left) for ol and ul in the default stylesheet is not really
margin-left but "margin-nearside" or "margin-start", because it turns
into a right margin if the element's computed value of direction is rtl.

This isn't in the CSS spec but if browsers didn't do it then simple
nested lists would look pretty stupid in the right-to-left direction,
lacking any indentation or space for bullets.

It's a caveat because if you set margin-left yourself it really does
mean margin-_left_, not margin-nearside, in browsers I've tried (and I
agree with this interpretation), and so your lists will look bad if
their direction is rtl.

If OP's not using rtl then it doesn't matter.