An Image as the List Item Marker
To specify an image as the list item marker, use the list-style-image property:
ul { list-style-image: url('lamp.gif'); }
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, a crossbrowser solution is explained below.
Crossbrowser Solution
The following example displays the image-marker equally in all browsers:
ul {
list-style-type: none;
padding: 0px;
margin: 0px; }
li {
background-image: url(lamp.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; }
- For
ul:
- Set the
list-style-type to none to remove the list item marker and
- Set both
padding and margin to 0px (for cross-browser compatibility).
- For
li:
- Set the URL of the image, and show it only once (
no-repeat),
- Position the image where you want it (left 0px and down 5px), and
- Position the text in the list with
padding-left.
Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web: