Tag Archives: conditional comments

Inserting tick marks (or checks if you’re American)

The HTML entity for a tick (or check, but we’ll call it a tick since we’re using British English) is &10003; which generates &10003; for those of you using a browser outside of the immensely popular, but oh-so-last-millennium Internet Explorer 6. IE6 renders a placeholder box as it does not recognise the entity.

What it does recognise is that the letter “P” in Wingdings 2, which also gives us a nice tick: P for your IE6 users. Modern browsers like Firefox 3 will probably not render wingdings, even if installed on the computer.

So we have conundrum, and it seems the only way is to produce forked code, using conditional comments.

Doogal Bell has a good blog post on inserting tick marks, but I feel his use of the input field to generate a tick isn’t particularly semantic, so I’m sticking with Wingdings for the IE6 crowd.

So ultimately we have:

<![if !IE]>✓<![endif]>
<!--[if gt IE 6]>✓<![endif]-->
<!--[if lt IE 7]><div style="font:bold 1.2em 'wingdings 2'; text-align: center;">P</div><![endif]-->

If you’re not using an IE browser, feed the proper HTML entity &10003;. If you’re using an IE version greater than IE6, also feed the proper HTML entity. If you’re using an IE version less than 7, feed a div with inline CSS specifying Wingdings 2 as the default font, bold for a little extra weight and aligned centre. Yes I know the inline CSS is as evil as font tags, but if I’m going to be specifying the wingdings font, I may as well format it right.

Note to self: I should apply the same text formatting on the HTML entities, but in the system css files, targeting content inside table cells.

Advertisements