CODEWITHSUNDEEP
htmlfirefoxcharacter-encodingmeta-tags
Adam
Adam

Reputation: 28968

UTF-8 encoded text erroneously displayed in Firefox

The following document is saved as UTF-8 without bom:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>      
        <title>AB - Adasdajhasbkfjqnefibqfn     </title>        
        <link rel="shortcut icon" href="http://www.my-domain.net/bilder/favicon.ico" >
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA*******-1', 'my-domain.net');
            ga('send', 'pageview');
        </script>
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->        
        <meta http-equiv="Content-Style-Type" content="text/css">   
        <link href="http://www.does-not-exists.net/style2.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>   

    <body>
    <p>äöü</p>
    </body>
</html>

If I load this page then I see correctly: äöü.

When I load the page from another page through a form like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>

    <body>
        <form name='mainForm' action='step2t.php' enctype=\"multipart/form-data\" method='post'>            
            <input type='submit' >
        </form>
    </body>
</html>

Then I see äöü in Chrome and even correctly in IE 8, but in Firefox I get

äöü

Now, if I delete any of the following lines:

<title>AB - Adasdajhasbkfjqnefibqfn     </title>    

<link rel="shortcut icon" href="http://www.my-domain.net/bilder/favicon.ico" >

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->  

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
   ga('create', 'UA*******-1', 'my-domain.net');
   ga('send', 'pageview');
   </script>

<meta http-equiv="Content-Style-Type" content="text/css">   

 <link href="http://www.does-not-exists.net/style2.css" rel="stylesheet" type="text/css" />

then it suddenly works in Firefox.

Any clue why this document is not working properly in Firefox?

Upvotes: 1

Views: 1370

Answers (1)

tcooc
tcooc

Reputation: 21199

The <meta http-equiv="Content-Type" ...> tag should be the first tag after the opening <head> tag, since it tells the browser what charset the rest of the document uses (browsers will guess the charset before this point).

Source: <meta> (see Notes section)

Note that it's not mandatory to have it be the first tag (it can appear anywhere within the first 512 bytes), but doing so is a good rule of thumb and prevents the need to count 512 bytes on all your html documents.

Upvotes: 4

Related Questions