Changing the List Type

You can change the list type for both numbered and bulleted lists using the list-style-type property. To change an OL list's number type, you can set the following values: decimal (the default), lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, hebrew, and none. To change a UL list's bullet type, you can set the following values: disc (the default), circle, square, and none. For example, use an inline style to change the number type of the document menu's OL element so the list will be displayed using uppercase alphabetic numbering (see Figure 8.17):

<ol style="list-style-type: upper-alpha">
<li><a href="#safety">Egg Safety and Quality</a>
<li><a href="#sizes">Egg Sizes</a>
<li><a href="#grades">Egg Grades</a>
</ol>

Figure 8.17: The list's numbering system is changed to uppercase alphabetic characters.

Creating a List Using Icon Bullets

The list-style-image property lets you specify an image to be displayed in place of the bullet in an unordered list. First, change the document menu's list to an unordered list:

<ul>
<li><a href="#safety">Egg Safety and Quality</a>
<li><a href="#sizes">Egg Sizes</a>
<li><a href="#grades">Egg Grades</a>
</ul>

Next, add a style rule to the style sheet that uses the list-style-image property to specify a bullet image to be displayed with the list (see Figure 8.18):

ul { list-style-image: url('ball_gold.gif'); }
</style>

Figure 8.18: Using styles, you can specify an image to be displayed as an unordered list's bullet.

Controlling List Indentation

The primary difficulty with controlling how far a list is indented in from the left margin is that the two principal browser families, Internet Explorer and Mozilla/Netscape, handle indenting lists in diametrically opposed fashions. Internet Explorer indents a list by setting a margin to the left of the list, whereas the Mozilla/Netscape browsers indent a list by setting padding to the left of the list. Thus, to indent the list in from the left margin by 15 pixels in both browser families, you need to set both margin-left: 15px and the padding-left: 15px for the UL element.