Japanese characters are not displaying correctly in IE 8...not sure about earlier versions

Question

The URLs exhibiting this behavior is here:

http://culturewithinaculture.org/introduction.php
http://culturewithinaculture.org/about.php
user: cwac
pass: cwac2112

The site has not been launched officially. But my problem is on the right side, Japanese copy. I have my document type set to UTF-8 which is what I thought it should be. On Firefox, and Safari I have no problems at all...shows up fine. In IE 8 however it is square boxes and illegal characters. The funny thing is that if you click on the 'compatibility mode' button it refreshes the page and all is fine. However, that has had mixed results too, a friend of mine tried it on their XP machine with IE 8 and the compatibility mode did not work (still had square boxes for unrecognized characters).

I want this to be cross browser capable, and I don't want to force an IE person to click on a 'compatibility mode' button or anything like that. I know I could just make the Japanese copy a large image, but I'd like to have the text selectable and HTML if possible.

Have any of you experienced this issue? Is there some special IE only CSS or jQuery magic I can use to force proper text display? Perhaps a font-face trick?

All help is greatly appreciated!

Answer 1

Here are your response headers:

Date: Thu, 08 Jul 2010 22:52:12 GMT
Server: Apache/2.0.54
X-Powered-By: PHP/4.4.8
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 5319
Keep-Alive: timeout=5, max=88
Connection: Keep-Alive
Content-Type: text/html

Note that the Content-Type header is missing the charset attribute and the webbrowser is thus forced to use platform default encoding which is often ISO-8859-1. FireFox is actually smart enough to autodetect the correct encoding and apply it instead (you can check it by View > Character Encoding).

Since those pages seem to be PHP generated, best what you can do is to add the following to the top of your PHP pages (or header-include, if any), before any character is been emitted to the response body:

header('Content-Type: text/html; charset=UTF-8');

See also:

• PHP UTF-8 Cheatsheet

Answer 2

Your meta tag is as follows.

Another site's one

Of course, any browser should handle both correctly. But please try it.

Answer 3

Well after a ton of reading, and testing, the ONLY way I have been able to get this to work is by adding the following code.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

To my knowledge this forces IE 8 to use compatibility mode. It works for both links I included above. I'd love to know of a way to correct this without forcing this 'mode', but for now it works and I'm happy with it.

Thanks for all the suggestions.