title: <!DOCTYPE html> breaks margin element
body: <p>I use <code>&lt;html&gt;</code> at the top of my website and the <code>margin-top: -30px</code> works fine, but when I use <code>&lt;!DOCTYPE html&gt;</code> it breaks my margin so I can't use the margin option to move my button.</p>
  
  <p>Heres the code so you can have a closer look:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;head&gt;
          &lt;title&gt;Västerås Bastuklubb&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
  
          &lt;style type="text/css"&gt;
      .classname {
          -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
          -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
          box-shadow:inset 0px 1px 0px 0px #bee2f9;
          background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
          background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
          background-color:#63b8ee;
          -webkit-border-top-left-radius:42px;
          -moz-border-radius-topleft:42px;
          border-top-left-radius:42px;
          -webkit-border-top-right-radius:42px;
          -moz-border-radius-topright:42px;
          border-top-right-radius:42px;
          -webkit-border-bottom-right-radius:42px;
          -moz-border-radius-bottomright:42px;
          border-bottom-right-radius:42px;
          -webkit-border-bottom-left-radius:42px;
          -moz-border-radius-bottomleft:42px;
          border-bottom-left-radius:42px;
          text-indent:0px;
          border:1px solid #3866a3;
          display:inline-block;
          color:#14396a;
          font-family:Arial;
          font-size:15px;
          font-weight:bold;
          font-style:normal;
          height:22px;
          line-height:22px;
          width:22px;
          text-decoration:none;
          text-align:center;
          text-shadow:1px 1px 0px #7cacde;
      }
      .classname:hover {
          background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
          background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
          background-color:#468ccf;
      }.classname:active {
          position:relative;
          top:1px;
      }&lt;/style&gt;
  
          &lt;style&gt;
          *{
              margin: 0;
              padding: 0;
          }
          body, html
          {
              width: 100%;
              font-family: Open sans;
              font-size: 14x;
          }
          body{
              background-image: url('http://subtlepatterns.com/patterns/tree_bark.png');
          }
          #header
          {
              background-image: url('http://ipad.iwalls.org/wp-content/uploads/2010/12/pouring_water_ipad_wallpaper_png-1024x1024.jpg');
              height: 100px;
              background-position: -200px;
              background-position-y: -600px;
              background-repeat: no-repeat;
              background-color: #FFF;
              border: 3px solid #CCC;
              margin: 0px auto;
              text-align: center;
              font-size: 40px;
              padding-top: 30px;
          }
  
          .content
          {
              padding-top: 20px;
              padding-left: 20px;
          }
  
          #footer
          {
              background-image: url('http://subtlepatterns.com/patterns/binding_dark.png');
              height: 52px;
              margin-top: 435px;
              opacity: 0.9;
          }
  
          #footer-content
          {
              float: left;
              color: #fff;
              padding-left: 20px;
              padding-top: 15px;
              font-size: 14px;
          }
          #footer-widget
          {
              float: right;
              padding-right: 30px;
              padding-top: 15px;
          }
          #footer-widget a
          {
              text-decoration: none;
              color: #fff;
          }
          #signup{
              position: absolute;
              top: 0;
              left: 0;
              width: 400px;
              height: 400px;
              background-image: url('http://subtlepatterns.com/patterns/greyzz.png');
              display: none;
              margin-left: 500px;
              margin-top: 150px;
              border: 2px solid #000;
              text-align: center;
          }
          #contact
          {
              position: absolute;
              top: 0;
              left: 0;
              width: 500px;
              height: 400px;
              background-image: url('http://subtlepatterns.com/patterns/greyzz.png');
              display: none;
              margin-left: 500px;
              margin-top: 150px;
              border: 3px solid #000;
              text-align: center;
          }
  
  
          #about
          {
              position: absolute;
              top: 0;
              left: 0;
              width: 500px;
              height: 400px;
              background-image: url('http://subtlepatterns.com/patterns/greyzz.png');
              display: none;
              margin-left: 500px;
              margin-top: 150px;
              border: 3px solid #000;
              text-align: center;
          }
  
          #signup button{
              margin-left: 385px;
              margin-top: -30px;
          }
          #contact button
          {
              margin-left: 385px;
              margin-top: -30px;
          }
          #about button
          {
              margin-left: 385px;
              margin-top: -30px;
          }
          #signup-content{
              font-size: 12px;
  
          }
          #contact-content
          {
  
          }
          #about-content{
              width: 250px;
              font-size: 12px;
              font-family: Verdana;
              padding-top: 40px;
              text-align: center;
              padding-left: 30px;
          }
          &lt;/style&gt;
  
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
                  &lt;script&gt;
              $(document).ready(function() {
                  $('#sign').click(function(){
                      $('#signup').show({
                          'autoopen': true
                      });
                  });
              });
  
              $(document).ready(function(){
                  $('#om').click(function(){
                      $('#about').show({
                          'autoopen': true
                      });
                  });
              });
  
              $(document).ready(function(){
                  $('#kontakta').click(function(){
                      $('#contact').show({
                          'autoopen': true
                      });
                  });
              });
  
              $(document).ready(function(){
                  $('button').click(function() {
                      $('#signup').hide(200);
                      $('#contact').hide(200);
                      $('#about').hide(200);q
                  });
              });
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="signup"&gt;
              &lt;p&gt;ANMÄLAN&lt;/p&gt;
              &lt;button type="button" class="classname"&gt;X&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="contact"&gt;
              &lt;p&gt;KONTAKTA OSS&lt;/p&gt;
              &lt;button type="button" class="classname"&gt;X&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="about"&gt;
              &lt;p&gt;OM OSS&lt;/p&gt;
              &lt;button type="button" class="classname"&gt;X&lt;/button&gt;
              &lt;div id="about-content"&gt;
              &lt;p&gt;Västerås basuklubb är en ideel förening som jobbar för att främja bastbadet i Västerås med omnejd. Vi är idag över 100 medlemmar som tycker att bastu är det absolut bästa som finns.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="header"&gt;
              &lt;p&gt;VÄSTERÅS BASTUKLUBB&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;ul&gt;
              &lt;p&gt;YOLO SWAG&lt;/p&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
              &lt;div id="footer"&gt;
                  &lt;div id="footer-content"&gt;&lt;p&gt;VÄSTERÅS BASTUKLUBB - (C) 2013&lt;/p&gt;&lt;/div&gt;
                  &lt;div id="footer-widget"&gt;
                      &lt;a href="#kontakta-oss" id="kontakta"&gt;KONTAKTA OSS |&lt;/a&gt;    
                      &lt;a href="#om-oss" id="om"&gt;OM OSS |&lt;/a&gt;
                      &lt;a href="#anmalan" id="sign"&gt;ANMÄLAN&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>apparently this fixed it:</p>
  
  <pre><code>    #signup button{
      position: absolute;
      margin-left: 185px;
      margin-top: -35px;
  }
  </code></pre>
  
  <p>don't know why postion: absolute; fixes the problem.</p>
  
  <p>edit postion element breaks the jQuery script. I guess that I'll have to go without a doctype.</p>