Slide 7.17: CSS lists (cont.)

Slide 7.16: CSS lists
Slide 7.18: CSS lists (cont.)
Home Print version

CSS Lists (Cont.)

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:


<html> <head> <style type="text/css"> ul { list-style-type:none; padding:0px; margin:0px; } li { background-image:url(http://undcemcs01.und.edu/~wen.chen.hu/course/101/7/figure/lamp.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:14px; } </style> </head> <body bgcolor="#EDF3FE"> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </div> </div> </body> </html>

◀
Previous

Slide 7.16: CSS lists
Slide 7.18: CSS lists (cont.)
Home Print version

▶
Next

Life always offers you a second chance.
It’s called tomorrow.