title: HTML: Equal HTML, different View
body: <p>I have a very very weird bug I am debugging right now.</p>
  
  <p>I am trying out Material Design Lite: <a href="http://www.getmdl.io/components/index.html#layout-section" rel="nofollow noreferrer">http://www.getmdl.io/components/index.html#layout-section</a></p>
  
  <p>But whenever I just COPY/PASTE the "Fixed Header" example from their official CodePen (<a href="http://codepen.io/anon/pen/WvaKjK" rel="nofollow noreferrer">http://codepen.io/anon/pen/WvaKjK</a>) it looks different in my browser:</p>
  
  <p><a href="https://i.stack.imgur.com/c9YA9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c9YA9.jpg" alt="Look at the Icon in the Top Left"></a></p>
  
  <p>And this is the whole HTML that is used:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;!-- Material Design Lite --&gt;
    &lt;script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css"&gt;
    &lt;!-- Material Design icon font --&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Always shows a header, even in smaller screens. --&gt;
    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
      &lt;header class="mdl-layout__header"&gt;
        &lt;div class="mdl-layout__header-row"&gt;
          &lt;!-- Title --&gt;
          &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
          &lt;!-- Add spacer, to align navigation to the right --&gt;
          &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
          &lt;!-- Navigation. We hide it in small screens. --&gt;
          &lt;nav class="mdl-navigation mdl-layout--large-screen-only"&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
      &lt;div class="mdl-layout__drawer"&gt;
        &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
        &lt;nav class="mdl-navigation"&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
      &lt;main class="mdl-layout__content"&gt;
        &lt;div class="page-content"&gt;
          &lt;!-- Your content goes here --&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you compare the two headers, you see that the icon in the top left is not in place. Well the queston arises for the why.</p>
  
  <p>Because I use the <strong>same</strong> code on my machine, which makes the icon appear out of place, but whenever I <strong>copy/paste</strong> the code from my browser by f.e. cmd+U to jsfiddle or codepen, I get the Icon placed right.</p>
  
  <p>See here:</p>
  
  <p><a href="http://codepen.io/anon/pen/LVgBzZ" rel="nofollow noreferrer">http://codepen.io/anon/pen/LVgBzZ</a></p>
  
  <p>It's not a browser problem, since the same problem appears also in Firefox, Chrome, Chrome Canary and also Android Chrome. I uploaded the same HTML here, which is displayed wrongly:</p>
  
  <p><a href="http://temp.leavingblue.com/5.html" rel="nofollow noreferrer">http://temp.leavingblue.com/5.html</a></p>
  
  <p>I ran the code on my local machine on windows (wamp) and on a linux virtual machine (homestead). </p>
  
  <p><strong>TL;DR:</strong></p>
  
  <p>Same HTML looks fine in Official getmdl.io site, codepen, jsfiddle, but looks weird when I recreate it on my own HTML file.</p>
  
  <p><strong>How to reproduce the error</strong></p>
  
  <p>Go to </p>
  
  <ol>
  <li><a href="http://temp.leavingblue.com/5.html" rel="nofollow noreferrer">http://temp.leavingblue.com/5.html</a>, </li>
  <li>Cmd + U</li>
  <li>Copy/Paste all to Codepen.io</li>
  <li>Look at differences</li>
  </ol>
  
  <p>Can anyone reproduce the error? Also has anyone an explanation for this behaviour?</p>