title: Proper way to change individual list item bullets
body: <p>I have css like this:</p>
  
  <pre><code>.done {list-style-image:url('images/tick.gif')}
  .notdone {list-style-image:url('images/cross.gif')}
  </code></pre>
  
  <p>And html like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="done"&gt;Done&lt;/li&gt;
      &lt;li class="notdone"&gt;Not Done&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Works great on IE6 and FF.  Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.</p>
  
  <p>Is there a proper or standards-based way of doing what I am trying to do, or is this it?</p>
  
  <p>EDIT: <a href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image" rel="nofollow noreferrer">http://www.w3.org/TR/CSS21/generate.html</a></p>
  
  <p>It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.</p>