When editing several files for a French web site that contained non-ASCII latin characters I noticed some strange rendering inconsistencies between Safari and Firefox / IE.
Safari was displaying the characters correctly, however Firefox/IE were not. I tried resaving the file in all different encodings from UTF-8, UTF-16, to Western ISO Latin and got very weird results.
Then I noticed a tag that had been in the existing version of the site:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
Even though my file was saved as UTF-8, this tag was confusing Firefox and IE into rendering my character data incorrectly. Interestingly, Safari was able to look at the actual file encoding and ignore this meta information.
To fix it all it took was making sure the file was saved as UTF-8 and then making sure the meta tag reflected this:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
If you encounter strange character rendering then give this a try!
July 1, 2009 at 10:03 am
This can also apply to your stylesheets as well. There’s a charset attribute on the <link> tag in which you can specify the encoding type of the linked document. For example:
<link rel=”stylesheet” href=”stylesheets/styles.css” type=”text/css” media=”screen” charset=”utf-8″ />
I’ve noticed that Firefox in particular will not load the stylesheet if you save it with a different encoding type than specified in the charset attribute.