Why do lists start outside of the containing element?

Question

This has always bugged the hell out of me. Why are lists like this? If you set margin and padding to 0, you would expect it to align normally at the left where the text around it would be, but no. That's where the text within the list item tags begins, then it renders the bullets and/or numbers to the left of that, overlapping borders etc. Why have they not fixed this yet? Who in their right mind decided that to be the behavior for lists? You can't even specify an accurate padding or margin for the left to keep the numbers aligned with the normal text because it does not automatically move right when the number count reaches a higher level (e.g. 9 -> 10, it's now 2 digits and takes up more space at the left).

Anyways, a question: Is there any simple way (not using JavaScript, etc) to fix this issue, preferably in CSS? I'd like to make the numbers at the left still aligned to the right but still have the entire list aligned to the left with the text.

I know you can achieve this using tables, but that's not really an ordered list, now is it?

Edit: Notice how the list-style-position property makes the tenth element push the text right, making it uneven. I want to move the dark blue box above right so that the left edge of the dark blue is aligned with the text around it, but I can't simply set a padding value because the amount it needs to move over changes depending on the number of items.

Answer 1

To get that effect use: list-style-position:inside;

http://www.w3schools.com/Css/pr_list-style-position.asp

Another (little old) article on the possibilities with lists: http://www.alistapart.com/articles/taminglists/

Answer 2

As the other poster mentioned, the default position is outside.

Styling lists is very hard to deal with cross-browser due to the inconsistency and bugs. I would recommend using either JS or a server-side script to generate a span element containing the number and style it accordingly ( using a loop and whatnot ).

Pretty sure it's impossible to style cross-browser taking IE's horrible list rendering bugs into account.