O'Reilly logo

HTML & CSS: The Good Parts by Ben Henick

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required