IE not showing encoded text for specific element

Question

I have a strange issue with Internet Explorer (tested from version 7 and above) and document encoding.

Begin of HTML:

<!DOCTYPE html>
<html lang="pt_br">
    <head>
        <meta charset="utf-8">

[...]

Well, the problem is: Same text in diferent elements show different encode outputs:

HTML and expected result:

<h1>Início</h1>
<h2>Início</h2>

Início // Bigger than h2
Início

Internet Explorer results:

Início // h1 works fine
InÌcio // h2 does not work

All other texts works fine. I have seen this question but does not have a answer which guide me to solve this issue.

This sounds very strange. Does it happen if you test a with a page containing nothing but the content shown in the question – without any stylesheets? If yes, can you post a URL of a demo, just to make sure. I cannot reproduce the problem on IE 10 (tested all modes). — Jukka K. Korpela, Nov 04 '13 at 22:00

score 1 · Answer 1 · answered Nov 04 '13 at 19:23

1

Try using an HTML number for your special character: ie. Ì for Ì.

answered Nov 04 '13 at 19:23

ravb79

I am unable to reproduce it locally, which makes me assume it has to with your local settings. What's your systems' language? – ravb79 Nov 04 '13 at 19:55
Just dawned on me; it could also be your browser character encoding settings; is IE set to utf-8 as well? – ravb79 Nov 04 '13 at 20:07
While this might be a useful workaround in some cases, it tends to hide the real problem and may cause nasty problems in the future, since the problem would remain unsolved. Moreover, it makes the HTML source less readable. – Jukka K. Korpela Nov 04 '13 at 21:50
Ok, I have done some tests and found that it is an issue with one of my files. When I create a empty html document, all worked well. – Gabriel Santos Nov 05 '13 at 12:41
I have found the problem. I have `helvetica` fount defined in CSS, which cause this issue. When I change `font-family` all worked fine. – Gabriel Santos Nov 05 '13 at 15:20

score 0 · Answer 2 · answered Nov 05 '13 at 15:32

I have found that the issue only occour whit helvetica font defined.

h2 {
    background: #fff;
    font-family: 'Gill Sans','lucida grande', helvetica, arial, sans-serif;
    font-size: 160%;
}

So, I removed from CSS and all worked fine:

h2 {
    background: #fff;
    font-family: 'Gill Sans','lucida grande', arial, sans-serif;
    font-size: 160%;
}

2 Answers2