I love that CSS allows us to style lists with an image as the list marker. The list-style-image property assigns a graphic image to a list label.
ul { list-style-image: url(red-arrow.gif); }
This is especially handy when you get into some of the great navigational link styling that is possible with CSS and lists.
The Cross Browser Rub
Because of the different default padding and margin browsers apply to lists, lining up marker images with the line-item text is inconsistant cross-browser. Firefox will take the marker image and line it up nice and square with the list text. Internet Explorer would put the image towards the top of the text. At first I solved this problem by adding extra space to the top of the image to force it down.
A More Consistent Method
I've found that using the background property on each list item individually, using precise positioning, gives me a more consistent cross-browser display.
li { background: url(red-arrow.gif) 0 9px no-repeat; }
Both Methods
Here are examples using both methods. The screenshot images show how the lists display in Firefox 1.5 and Internet Explorer 6.0.
HTML
<ul id="lsi">
<li>List style image line one</li>
<li>List style image line two</li>
<li>List style image line three</li>
<li>List style image line four</li></ul>
<ul id="bgi">
<li>Background image list item one</li>
<li>Background image list item two</li>
<li>Background image list item three</li>
<li>Background image list item four</li></ul>
CSS
#lsi { margin: 0; padding: 0; list-style-image: url(images/red-arrow.gif); list-style-position:inside; }
#lsi li { margin: 0px; padding: 5px 0; }
#bgi { margin: 0; padding: 0; list-style-type: none; }
#bgi li { margin: 0px; padding: 5px 18px; background: url(red-arrow.gif) 0 9px no-repeat;}
Firefox
Firefox actually renders both ways nicely and as expected. If you design in Firefox and then check it out in Internet Explorer...I know your dismay.
Internet Explorer
Internet Explorer puts the images way out of whack when you use the 'list-style-image' property. But, with the background image positioned with each <li> you get common results across both browsers.
