title: Remove Top Margin on Body Tag
body: <p>I have a design which needs two background images and must work in IE. So I decided to place 1 image on the html tag and the other on the body tag. So my page looks like this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Lorem...&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then a very basic css like so</p>
  
  <pre><code>html { background:url(../img/bg.jpg) top center no-repeat #0094d4; margin:0; padding:0; }
  body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; }
  </code></pre>
  
  <p>The only browser to render this correctly is IE7. Opera, Chrome, FF all place a ~20px margin at the top. I can remove this margin by adding some hackity css like so:</p>
  
  <pre><code>html { background:url(../img/bg.jpg) top center no-repeat #0094d4; position:relative; }
  body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; top:0; position:absolute; width:100%; }
  </code></pre>
  
  <p>However why does it not work to begin with, why do I need the extras? Is it a bug or a bug by design?</p>
  
  <p><strong>EDIT</strong>: It does appear to be a bug. When I remove the <code>&lt;p&gt;</code> tags then it acts correctly however with them it does not. </p>