Unicode down triangle doesn't show up in IE9

Question

I'd like to include a down triangle in my CSS dropdown menu. It works correctly in every browser, except for IE9.

In normal browsers (Firefox, Opera, Chrome, etc.) it looks like this way:
normal

However in IE9 it shows up like this:
ie9

The CSS code:

.parent-down > em:after, 
.parent-down > a > em:after  {
    content: "\25be";
}

Any idea what can be the problem and how could I fix it?

do you have "@charset "UTF-8";" inside your stylesheets? I'm assuming it's a font Icon from some vendor, in most cases these vendors offer font fixes for IE e.g. icomoon uses src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), check out: http://gomakethings.com/icon-fonts/ — darcher, Nov 18 '13 at 18:51
http://stackoverflow.com/questions/12130323/font-awesome-fonts-show-up-as-boxes-on-ie8 is very similar to your issue, check out http://www.fontspring.com/blog/fixing-ie9-font-face-problems and look into the ?#iefix I posted above. Without seeing your @font-face setup it's hard to say — darcher, Nov 18 '13 at 18:57

score 2 · Accepted Answer · answered Nov 18 '13 at 22:15

You need to declare the font family for the (pseudo-)element containing the special character so that you use only fonts that are known to contain that character. For example, add the following rule into your declaration:

font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif;

When you declare Helvetica, as you say (in a comment) you do, Windows treats it as Arial by its own special internal rules (if Helvetica is not available, and it usually isn’t). Since Arial does not contain the character, the browser should check the different fonts in the system in some order set by its settings to find one that contain the character. Browsers may fail in doing so, and IE often does.

In this case, it is probably better to use another, more visible character, which happens to have better font coverage. The basic principle is still that special characters need special attention when declaring fonts. For generalities on this, see my Guide to using special characters in HTML.

I included "Arial Unicode MS" in the font-declaration of the body element `body {font-family: Helvetica, Arial, Arial Unicode MS, sans-serif;}`, and it works perfectly, thanks for the suggestion. — , Nov 19 '13 at 10:45
@Artemyss, note that Arial Unicode MS is not as universally installed as Arial. It is shipped with Microsoft Office and normally absent in computers that do not have Office installed. This is why I included [Lucida Sans Unicode](http://www.microsoft.com/typography/fonts/font.aspx?FMID=1263), too – it is available even on oldest Windows systems you can find. — Jukka K. Korpela, Nov 19 '13 at 12:02

score 1 · Answer 2 · answered Nov 18 '13 at 19:40

I came to the solution by accident.

However IE9 doesn't show the "\25be" (▾) character, it shows the "\25bc" (▼).

It's the same down triangle, however somewhat bigger. So now I use this one and change its size with CSS, so it looks identical with the original version. Don't ask why, IE9 is quite strange.

My new code:

.parent-down > em:after, 
.parent-down > a > em:after  {
    content: "\25bc";
    font-size: 8px; 
    vertical-align: 2px;
    margin-left: 2px;
}

The explanation is that U+25BE is not included in the Arial font but U+25BC is. — Jukka K. Korpela, Nov 18 '13 at 22:17

score 0 · Answer 3 · answered Nov 18 '13 at 18:58

0

There is a bug in IE9 that causes the font of a container to be set to the font of the first element of that container. Try to set a :before selector like this:

.parent-down >em:before,
.parent-down> a > em:before {
    content: '';
}

This will force IE9 to recognize that the font assigned to the container is the font meant to be used

See this site, which describes a similar issue and gives this workaround, which solved this very tricky problem for me.

answered Nov 18 '13 at 18:58

Robusto

31,447
8
56
77

Thanks, but unfortunately it doesn't work for me. I don't use Font Awesome or any special fonts, just Helvetica. – Nov 18 '13 at 19:06

Unicode down triangle doesn't show up in IE9

3 Answers3