HTML & CSS: The Good Parts

Chapter 7. Working with Lists

Lists are everywhere: checklists, shopping lists, to-do lists, “Best of” and “Worst of” lists, procedure lists, and simple rankings turn up every day. Lists are pretty easy to find in web markup, too, used for all of those purposes and often for navigation. HTML supports three types of lists: ordered, unordered, and definition lists.

Ordered and Unordered Lists

The principal difference between ordered and unordered lists is semantics: sometimes there’s a need to rank items by some criterion (e.g., importance, order of execution, time, order of addition, alphabetic order), and sometimes a list contains nothing more than a group of data with something in common.

User Agent Default Styles for Ordered and Unordered Lists

At first glance, unstyled lists look like block elements (which they are) containing a series of still more block elements, each of which is offset from the apparent left margin of the list. However, current browsers apply different user agent styles to lists than their legacy counterparts, as shown in Table 7-1.

Table 7-1. User agent styles for unordered, ordered, and definition lists (ul, ol, dl)

User agents	User agent style
Firefox 2+ Internet Explorer 7+ Safari 3+	margin: 1em auto 1em 0; padding-left: 40px;
Firefox 1.0.x–1.4.x Internet Explorer 6 Quirks rendering modes	margin: 1em auto 1em 40px;

Note the 40px values. Their consequence is that if type is especially large and an ordered list runs long, list item markers are likely to be obscured in part ...