Image Markers

To specify an image as the list item marker, use the list-style-image property:

HTML file: Displayed by browser:
<style>
ul {
  list-style-image: url("../html_beg/images/sqpurple.gif");
}
</style>
<body>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Pop</li>
</ul>
</body>
  • Coffee
  • Tea
  • Pop

The example above does not display equally in all browsers. IE and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari. If you want the image-marker to be placed equally in all browsers, you might want to take a look at the crossbrowser solution, which is explained on the next page.

Back button Table of Contents Next button