Displaying a tick mark in HTML

This afternoon's challenge was to get a tick mark to appear in a HTML file. Not too taxing I thought. I'd already done it, using the HTML entity ✓. But this didn't properly in all browsers. I initially thought the problem was some kind of encoding problem but it seems that unfortunately it's one of those HTML things that works in 'modern' browsers but doesn't seem to work in IE6 (this ✓ should be a tick mark, if you're one of the lucky ones). Given that most people are still using IE6, it's not really an ideal solution.

So what to do? I thought I'd search for a fairy common font that had a tick mark available. WingDings does and although it's a Windows font, I thought it would be available on enough computers to suit my needs. Unfortunately, as this page shows, FireFox doesn't display WingDings fonts at all, even when they are installed on the computer. Most odd, although it seems that this is how browsers should work...

You may be asking why I didn't plump for the simplest solution, displaying an image? Unfortunately I'm generating a web page on the fly on the user's PC and I don't want to be generating extra images if I can avoid it. Life could get very complicated if they already have a file with the same name on their PC. I guess they wouldn't appreciate me overwriting it.

So my not very neat solution was to use a standard checkbox, <input type="checkbox" disabled checked>, . This wouldn't be too bad if I could apply some styling to it to make it look less like a checkbox, but CSS for a checkbox is ignored so I'm not very happy with the resulting output. If anybody knows of a better solution, let me know.

Addendum - Since quite a few people are finding this page, you might be interested in the follow-up posts, which have a potentially better soluton to this problem