Unicode down triangle doesn't show up in IE9

Tags: html,css,internet-explorer,css3,internet-explorer-9

Problem :

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:

However in IE9 it shows up like this:

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?

Solution :

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.

    CSS Howto..

    How to Prevent Opacity for Sub Div using Jquery

    How to add a border-bottom-image with css

    How to have dynamic image as CSS background?

    How to get the ultimate, final calculated style value on an HTML element?

    How to draw a horizontal line between two circles with css?

    How to make an overlay using css hover on another element and pseudo class ::before

    css: How to select first anchor tag inside table

    CSS - Table mode how to display correctly?

    How do I get my body to the bottom of my page OR further if necessary?

    How can you remove the table-tags in CreateUserWizard control

    How i can adjust the all elements that web page has?

    CSS - how to get position: absolute; to work well with different screen sizes

    Flex: How to embed fonts with CSS

    how to create arrow down/up in css

    How can I get the first and last name labels to align under the corresponding input forms?

    How to make a wrapper for HTML, CSS and Javascript Pages in iOS

    How to vertically center text span in fixed position div?

    How to edit css for jquery datepicker prev/next buttons?

    How do I change the colour of 'and one other person like this' when I've added it to my site?

    How to get CSS Variables working in Dart

    how to set a fixed width to textbox which wont be affected by varying value of padding-left?

    How can I adjust image width and height to 100 x 100 keeping ratio?

    how to give css only the 1st label span?

    How to center part of a navbar

    How to make the new long shadow trend with CSS?

    How to align image within nested div<> with spaces in div names

    Newbie: How to have a row background in my case?

    how to float the section tags in html5

    how to desaturate background image of a div using css?

    How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)