title: Weird blank spaces in my PHP/HTML code
body: <p>I have been converting my PHP files from ANSI to UTF-8 and something weird happened to my code and I don't know why. This is my index.php code </p>
  
  <pre><code>&lt;?php get_header(); ?&gt;
  &lt;div id="container"&gt;
  
  &lt;/div&gt;
  &lt;?php get_footer(); ?&gt;
  </code></pre>
  
  <p>And my header.php is this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Somethingá&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?php bloginfo( 'stylesheet_url' ); ?&gt;"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
      &lt;div id="header-wrap"&gt;
          &lt;div id="logo"&gt;&lt;a href="index.php"&gt;&lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/logo.png" alt="ODS"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div id="header-text"&gt;Karviná&lt;/div&gt;
          &lt;hr&gt;
          &lt;div id="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter2"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;something&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the last footer.php contains this:</p>
  
  <pre><code>&lt;div id="footer"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But there is a problem that I can't understand. It's a wordpress theme, all files are in UTF-8 coding. Everytime I open the site with this selected them, there are blank spaces. For example header is not at the top of page but about 20px from the top. I checked the code which I can see in developer console in Google Chrome and it contains this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;title&gt;Somethingá&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="http://XX.XXX.XXX.XX/wp-content/themes/xxx/style.css"&gt;
  &lt;div id="header"&gt;
      &lt;div id="header-wrap"&gt;
          &lt;div id="logo"&gt;&lt;a href="index.php"&gt;&lt;img src="http://93.185.106.91/wp-content/themes/ods/img/logo.png" alt="ODS"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div id="header-text"&gt;Karviná&lt;/div&gt;
          &lt;hr&gt;
          &lt;div id="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="righter2"&gt;something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;something&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="footer"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It's totally weird. I don't get it why did content of <code>&lt;head&gt; &lt;/head&gt;</code> moved to <code>&lt;body&gt; &lt;/body&gt;</code>. It also generated that huge blank spaces between <code>&lt;body&gt;</code> and <code>&lt;title&gt;</code>, <code>&lt;/div&gt;</code> and  <code>&lt;div id="footer"&gt;</code>. </p>
  
  <p>Thank you. </p>