Foreign Language Website Puzzle - Firefox, CSS and File Encoding

News Section - Foreign Language Website Puzzle - Firefox, CSS and File Encoding

Developer Blog from Mike Irving - Foreign Language Website Puzzle - Firefox, CSS and File Encoding

Set the File-Encoding in the HTML and CSS
(click to view this picture full size)

I had an interesting problem to solve the other week when looking over a website page that had been translated to Russian, and was delivered from a machine hosted in Russia.

The translation was fine, so far as my Russian goes, and the page looked great in both Internet Explorer and Opera. In Firefox and Safari however, it renedered as just the text, without any of the website design or CSS.

Interestingly, if I clicked "Edit CSS" in the "Web Developer" toolbar in Firefox, the page fixed itself, only to break again once the editor window had been closed.

I tried a number of things to fix the situation...

Firstly, I made sure the web hosting package delivered the correct MIME-Type for CSS files, which should be "text/css" - it did.

Secondly, I made sure my FTP program was uploading the file in Binary Mode, not in ASCII mode, as this would not be appropriate for Russian-Type.

After the two actions above yielded no results, I turned my attention to file-encodings.

Being in Cyrillic Text, the HMTL file was saved in UTF-16 format, with Unix (LF) Line Breaks.

However, the CSS Stylesheet was cloned from an English web page, and was in ANSI format.

To cut a long story short, it seems Mozilla Firefox, and Apple Safari, get confused if you mix File-Type Encodings across portions of webpages.

To remedy, I set all to UTF-16 and Unix Line Breaks.

I did this in Microsoft Visual Studio, from the advanced options in the "Save As" dialog. Similar options can be selected in Windows Notepad, and other text editors.