Using images for bullets

Author: Russ Weakley

Comments: Use list-style-image: url(imagename); to replace the bullets entirely with images. The downside of this method is that each browsers positions the images differently. CSS background images for list bullets is a more consistent method.

Browser support chart

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>

#navlist { list-style-image: url(images/arrow.gif); }