proper CSS for generating a checkmark li that works cross-browser

Question

I'm using the following CSS to add checkmarks before my <li>list items:

ul.checkmark li:before {     content:"\2713\0020"; } 

And then in the HTML:

<ul class="checkmark">    <li>Learn the keyboard at your own pace</li> </ul> 

Works great in Safari, Firefox and Chrome, but displays "freak out boxes" on IE8.

Safari:

IE8:

Is there a portable way to specify a good-looking checkmark that will work in all the major browsers?

EDIT Solution: I ended up using a variation on meder's answer below:

ul.checkmark li {     background:url("../checkmark.gif") no-repeat 0 50%;     padding-left: 20px; }  ul.checkmark {     list-style-type: none; } 

Answer 1

li { background:url(/images/checkmark.gif) no-repeat 0 50%; } 

Would probably be the only way you'll get it to work consistently in the IE pre 8/9.

Answer 2

ul {     list-style-image:url("/default_unchecked.png");     /* other list styles*/  } 

then later change it via javascript, maybe.

$('.selected').css("list-style-image", "url('/images/blueball.gif')");