CSS rendered in Japanese?

Question

Note: I inherited this site, I did not build it.

The home page is all the sudden not working. It looks like it's a CSS issue. When I went into the web inspector in Safari(Mac), I clicked to open the CSS and it shows a bunch of what looks like Japanese characters. No idea what would have done this. I've never done much with the site, except making some basic content(HTML) changes. They say no one else has been in making changes either. The rest of the site uses a different style sheet, and works fine. Any ideas? Here's the site. Thanks in advance!

Answer 1

I know I'm late but here it goes: Exactly WHAT is causing the issue, I'm not sure, but ultimately, its an issue with the character set. The solution above worked for me ("I added the property charset="UTF-8" to the line that imports the css file itself in the Html file"), probably because specifying the charset directly in the CSS link overrides whatever the issue is.

Answer 2

Late to the answer party here but I found another solution to work in the case where the html is rendering but the css files are coming up in Japanese (or Chinese I am not sure!) special characters.

The solution was even simpler for me:

I added the property charset="UTF-8" to the line that imports the css file itself in the Html file.

This did it for me as it solved the issue of the css files opening in Japanese in the chrome inspector sources view

Answer 3

Chinese characters are often the result of improper Unicode encoding (Unicode essentially being what came after ASCII), likely UTF-16. If I view the file in Chrome under a tab, it looks normal, but if I view it in Chrome's inspector/console, it looks like jibberish. Just save a copy of the file, download something like Notepad++, install, run, and open the file, and then try to save a copy of it it with a different UTF encoding or Ascii, link your html to it and see if that helps.

Edit:

Or hell, why am I asking you to do that, when I could just use pastebin <-- please note link, I just pasted my copy for you.

Jukka's advice seems sound; the issue doesn't appear to be the the css file but the html doc. My editor recommendation should work, but so should many other editors. (I'm almost tempted to delete this answer but I think it may be useful as to point to a common mistake.)

Answer 4

The problem is caused by the encoding of the HTML document: it is UTF-16LE encoded. You can see this e.g. by opening it on Firefox, checking out the encoding being applied, via the View menu, then manually changing the encoding to ISO-8859-1, via that menu. You will see that when interpreted as ISO-8859-1, the document starts with “ÿþ”, which is a byte order mark in UTF-16. (This overrides the effect of the meta tag that claims the document to be ISO-8859-1 encoded.)

Since the external CSS file is served by no information about encoding in HTTP headers or in the file contents, browsers will have to make a guess. IE correctly guesses that it is Ascii encoded, but other browsers use the encoding of the HTML document. If you take two Ascii characters and interpret them as on UTF-16 code unit, you mostly get a Chinese (CJK) character.

Since UTF-16 should generally not be used on the Web, the fix is to open the HTML document in an editor and save it in the ISO-8859-1 encoding or some similar encoding, such as windows-1252. On Notepad for example, use “Save As” and select the “ANSI” format.