Caffeine Coma Caffeine Coma - 2 months ago 16x
CSS Question

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

I'm using the following CSS to add checkmarks before my

list items:

ul.checkmark li:before {

And then in the HTML:

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

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

alt text

IE8:alt text

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;

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.