Using Custom Markers

If you get tired of circles, squares and discs, or even Roman numerals, you can create your own custom marker with an image.

Figure 15.10. I want to add a special marker for the new features in my list.

To use custom markers:

In the style sheet rule for the desired list or list item, type list-style-image: url(image.gif), where image.gif is the image you'd like to use for the list item's markers (Figure 15.11).

Figure 15.11. To avoid confusion, you can specify the marker image's location with an absolute URL (see page 35).

To remove custom markers:

Type list-style-image: none.

Tips

• By default, you've got about a 15 by 15 pixel square space for the marker.

• If your image is larger than the line height of the list items, some browsers overlap them. You can adjust a list-item's margins (see page 176) if necessary.

• There should be no space between url and the opening parentheses. Quotes around the URL are optional.

• Note that relative URLs are relative to the location of the style sheet, not the Web page.

• Most browsers align custom markers to the right. IE for Windows (all versions) is the notable and annoying exception.

• The list-style-image property overrides list-style-type. But, if for some reason the image can not be loaded, the marker specified with list-style-type is used.

• The custom markers are inherited.

Figure 15.12. It can be tricky mixing custom markers with default ones. You have to make sure the custom markers aren't too big.