My unicode for a check symbol in CSS not displaying in IE7

Question

I have a Unicode for displaying a checkbox symbol, it works perfectly fine in Firefox, Chrome, and higher versions of IE, except IE 7. Here is the code:

.status-bar li.done-status:before{
 content: "\2713";
}

Any idea how to make this work in IE7?

Answer 1

IE 7 does not support generated content (:before and :after pseudo-elements) at all. So the problem has nothing do with support to the CHECK MARK “✓” character, as you can see by testing with that character in HTML content (written as ✓ if needed) and with generated content using some common character, say content: 'X' (it won’t work either).

If IE 7 is relevant, consider adding the symbol into actual document content instead of generating it with CSS. You might consider doing this with JavaScript if it needs to be dynamic (in a browser).

Answer 2

Add this script on you page. might helpful for you and work in IE7.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->