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