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

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;
}

Answers


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.


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')");

Hmmm how about going with a small image instead, then you'll get full compatibility with practically every browser

Alternatively take a look at this past question Tick symbol in HTML/XHTML


I'm not sure if anyone still needs to support IE8 but I wanted to find out why IE8 creates those boxes so I searched the internet and found this post: Unicode characters and Internet Explorer

So based on the answers to that question, it looks like you can use the method described by the OP, you just have to specify a Unicode font to make IE8 happy. So in theory this should work fine:

ul.checkmark {
    list-style-type:none;
}
ul.checkmark li:before {
    content:"\2713\0020";
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
<ul class="checkmark">
    <li>Learn the keyboard at your own pace</li>
</ul>

I realize this is an old post but, with the many variations of screen sizes and pixel densities on mobile devices, I think the best approach is to convert your icon into a font with a program like Icomoon: https://icomoon.io/

Put the font files on your server and the css will look something like this.

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('/fonts/IcoMoon-Free.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'IcoMoon-Free' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
    content: "\ea10";
}

The html will be something like this:

<span class="icon icon-checkmark"></span>

Need Your Help

Grand Central Dispatch vs. NSThread

ios cocoa-touch grand-central-dispatch nsthread

I created some test code for NSThread and Grand Central Dispatch (GCD):

Eclipse Android - Logcat Clearing too Fast

android eclipse logcat

I have been using Eclipse for Android (most up to date version), for a while with no problems with the Logcat. For an unknown reason, Logcat is no longer retaining the debug messages. Logcat is get...