IE9: How to make Unicode characters appear properl

Question

I am designing a website (www.lathamcity.com) where I use the Unicode character &#x2022 to represent a bullet point in my header. When I load the page in IE9, however, the bullet point does not appear and in its place is the Unicode for the character.

My charset is defined in the HTML document with

<meta charset="UTF-8">

and the code for the header is

    <td id="infoCell" class="header">   
        <a href="/resume.pdf" class="header" target="_blank">R&#233sum&#233</a> 
        &nbsp &#x2022 &nbsp 
        <a href="mailto:[e-mail]" class="header" target="_blank">E-mail</a> 
        &nbsp &#x2022 &nbsp
        <a href="https://github.com/orthogonal/" class="header" target="_blank">GitHub</a>
        &nbsp &#x2022 &nbsp
        <a href="http://stackoverflow.com/users/1146679/andrew-latham" class="header" target="_blank">StackOverflow</a>
        &nbsp &#x2022 &nbsp
        <a href="http://main.uschess.org/assets/msa_joomla/MbrDtlMain.php?12842311" class="header" target="_blank">USCF</a>
    </td>

The characters appear correctly in Chrome and Firefox. What am I doing wrong, why is it happening, and how can I fix it?

Answer 1

You are missing a semicolon.

&#x2022

should be

•

Similarly, &nbsp and &#233 should end with a ;.

The HTML5 spec says:

Hexadecimal numeric character reference

The ampersand must be followed by a U+0023 NUMBER SIGN character (#), which must be followed by either a U+0078 LATIN SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X character (X), which must then be followed by one or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, representing a base-sixteen integer that corresponds to a Unicode code point that is allowed according to the definition below. The digits must then be followed by a U+003B SEMICOLON character (;).