Friday, May 04, 2007

Even more on tick marks in HTML

It's always the seemingly simplest probems that have the most long-winded solutions. So my last post was wrong, although that solution worked in some HTML docs, as soon as I switched to HTML 4.01 FireFox started showing extra crud, as you'll notice if you're viewing this in FireFox. So here's a solution for tick marks in HTML 4.01, still using conditional comments, which works in IE6, IE7 and FireFox 2, probably...

<![if !IE]> &#10003;<![endif]>
<!--[if IE 7]> &#10003;<![endif]-->
<!--[if lt IE 7]> <input type="checkbox" disabled="disabled" checked="checked" /> <![endif]-->

And to complete the whole thing, here's an XSLT template to put a tick mark in your HTML output.

  <xsl:template name="outputTickMark">
<xsl:text disable-output-escaping="yes">
&lt;![if !IE]&gt; &#10003; &lt;![endif]&gt;
&lt;!--[if IE 7]&gt; &#10003; &lt;![endif]--&gt;
&lt;!--[if lt IE 7]&gt; &lt;input type="checkbox" disabled="disabled" checked="checked" /&gt; &lt;![endif]--&gt;

and here's a tick mark that might work this time.

By the way, I found this article on conditional comments particularly useful.

Update: The absolute final word on this subject is here


Travis said...

An alternative is to have this bloc emitted:
<xsl:template name="outputTickMark">
<xsl:text disable-output-escaping="yes">
<![if !IE]>&#10003;<![endif]>
<!--[if IE 7]>&#10003;<![endif]-->
<!--[if lt IE 7]><font face="Wingdings">ΓΌ</font><![endif]-->

and that would keep it consistent with the check marks. Then, if someone is using IE6, they most likely have the wingdings font, and the look is consistent accross IE7, IE6 and FF2, all having checkmarks, and not the disabled checkbox in its stead when the browser is IE6.

Just a thought

J.G. said...

Thanks - I was also having some trouble with this. I just made one variation: instead of displaying the checkbox in ie6, I display the square root √ - which almost looks like a tick mark.

Anonymous said...

Awesome post! - In fact all three posts on this subject were interesting, really helped. Thanks.

GeorgeK said...

Would it not be simpler to show an image of a tick mark e.g.
img src="myimages/tickmark.gif"

Obviously you have to be able to upload a suitable gif along with your web page, but if you can you have a lot more control on how it looks and it takes away the browser compatibility issues. Apologies if I missed an explanation as to why this isn't feasible.

Doogal Bell said...

That's certainly the easiest option but in my case I was generating HTML files on the fly and didn't want to generate other extraneous files.

Tim Beadle said...

Quick tip: if you want to use this in CSS generated content, convert the entity code to hex first.

So, & # 1 0 0 0 3 becomes e.g.

p:after {
content: '\2713';

Thanks for the tips :)