title: Div "default margins" out of nowhere
body: <p>even after many lines i've written in css and html, the css-behaviour still manages to surprise me - in a bad way.</p>
  
  <p>I was putting together a sample site for a friend to show him how he could build his layout,
  but Firefox 3.0.5 and IE8 create margins between my #header, #content, and #footer-divs out of nowhere. If i switch in IE7 Mode, the margins disappear.</p>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
     background-color: #fff;
     margin: 0;
     padding: 0;
     width: 100%;
  }
  
  #page {
     background-image: url('bg_gradiant.png');
     background-repeat: repeat-y;
     width: 950px; /* 770px + 2 * 90px; */
     margin: 0 auto;
     padding-left: 90px;
  }
  
  #header {
     width: 770px;
     margin: 0;
     padding: 0;
  }
  
  #header #row1 {
     background-color: #9ab3ba;
     height: 50px;
  }
  #header #row2 {
     background-color: #517279;
     height: 50px;
  }
  
  #content {
     width: 770px;
     background-color: #d7e9ed;
  }
  
  #footer {
     background-color: #5eb6cc;
     width: 770px;
     height: 150px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="./style.css" /&gt;
      &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="page"&gt;
     &lt;div id="header"&gt;
        &lt;div id="row1"&gt;&lt;/div&gt;
        &lt;div id="row2"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="content"&gt;
        &lt;p style="height: 600px"&gt;Beware of the Content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="footer"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can view this page here: <a href="https://codepen.io/lx-s/pen/eRrOpL" rel="nofollow noreferrer">https://codepen.io/lx-s/pen/eRrOpL</a></p>
  
  <p>Browsing through the IE Developer Tools and Firebug showed me that they were no default-margin values set for these div's, but as one can see, they are there.
  Hope you can give me a hint how to get rid of them - it's seriously driving me crazy.</p>
  
  <p>Thanks in advance!</p>