title: how to get page to stop vertical scroll?
body: <p>I have a really annoying issue. Im trying to create a page with a full background image which resizes and fills the browser screen. Currently its half working but for some reason have to scroll like 20-30px down. Which the user should not be able to do. </p>
  
  <p>This is the page source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="/Content/css/reset.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="/Content/css/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="/Content/css/menu.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="/Content/css/layout.css" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="/Scripts/jquery-1.6.4.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/backstretch.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;     
  
     /**     var images = [
  
          "/content/images/bghome.jpg",
  
          "/content/images/background.jpg"
  
          ];      
  
          var index = 0;     
          $.backstretch(images[index], { speed: 500 }); 
  
          setInterval(function () {
  
              index = (index &gt;= images.length - 1) ? 0 : index + 1;
  
              $.backstretch(images[index]);
  
          }, 5000);
     **/
          $.backstretch("/content/images/background.jpg");
      &lt;/script&gt;
  &lt;/head&gt;     
        &lt;div class="menu-link"&gt;
  
  &lt;ul&gt;
  
    &lt;li&gt;
      &lt;a href="/Home/Index"&gt;home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="/content/1/10/background.html"&gt;profile&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="/content/1/3/portfolio.html"&gt;portfolio&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="/news/"&gt;news&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="/project/"&gt;current projects&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="on"&gt;
      &lt;a href="/content/1/6/awards.html"&gt;awards&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="/ContactUs/"&gt;contact&lt;/a&gt;
  
    &lt;/li&gt;
  
  &lt;/ul&gt;      &lt;/div&gt;
  
      &lt;div id="left-sidebar"&gt;
  
          &lt;div id ="logo"&gt;
  
              &lt;image src="/content/images/logo.png"/&gt;
          &lt;/div&gt;
          &lt;div id = "leftcontent"&gt;
              &lt;p&gt;
              &lt;/p&gt; 
          &lt;/div&gt;              
         &lt;div id ="foot"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="/content/2/20/privacy.html"&gt;Privacy&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="/content/2/21/sitemap.html"&gt;Sitemap&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="last"&gt;
      &lt;a href="/content/2/19/terms---conditions.html"&gt;Terms &amp; Conditions&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  © 2012 SH Structures. All rights reserved. &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;image src="/content/images/footimg.png"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
              &lt;div id="right-sidebar"&gt;
              &lt;/div&gt;
              &lt;div id="content"&gt;
                  &lt;div id = "freestylecontent"&gt;
                      &lt;h1&gt;awards&lt;/h1&gt;
                      &lt;br&gt;&lt;br&gt;&lt;br&gt;
                      &lt;div id = "freecontent"&gt;
                          &lt;p&gt;
                          &lt;/p&gt; 
                          &lt;br&gt;&lt;br&gt;
                      &lt;/div&gt; 
                  &lt;/div&gt;    
             &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code> html, body {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
  }
  
  body {
  
  }
  
  /* IE7 Fix */
  * html #container {
      display: table;
      height: 100%
  }
  
  /* Opera Fix */
  body:before {
      content: "";
      height: 100%;
      float: left;
      width: 0;
      margin-top: -32767px;
  }
  
  /* IE6 Fix */
  * html div#body {
      overflow: visible;
  }
  
  div#container {
      height: 100%;
      height: auto !important;
  
      background: url("left-sidebar-back.gif") repeat-y top left;
  }
  
  div#main {
      overflow: auto;
      padding-bottom: 100px;
  }
  
  div#header {
      height: 100px;
      background: #ba6f19;
      border-bottom: 1px solid #000;
      padding: 20px;
  }
  
  div#body {
      overflow: hidden;
      height: 100%;
  }
  
  div#content {
      margin: 0px 0px 0px 415px;
      width: 375px;
      padding: 20px;
      background:url(../images/greenfade.png);
      opacity:0.8;  
      height:100%; 
      color:White;
  }
  
  div#left-sidebar {
      width: 375px;
      float: left;
      height:100%;
      padding: 20px;
      background:black;
      opacity:0.8;  
      color:White;
  }
  
  div#right-sidebar {
      width: 260px;
      float: right;
      padding: 20px;
  }
  
  div#footer {
      background: #ba6f19;
      border-top: 1px solid #000;
  
      position: relative;
      height: 100px;
      margin-top: -101px;
      clear: both;
  }
  
  div#footer p {
      padding: 20px;
      margin: 0px;
  }
  .menu-link{
      font-size:1em;
      height:40px;
      padding-left:10px;
      width:100%; 
      margin-left:auto;
      margin-right:auto;
      background:black;
  
  }
  
  .menu-link a{
      padding: 10px 0px 10px 0px;
      height:40px;
      color:#fff;
      text-decoration:none;
      float:left;
  }
  
  .menu-link ul { 
      padding:0px 0px 0px 20px;
  }
  
  .menu-link ul li    
  {
      text-decoration:none;
      float:left;
      /**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
  }
  
  .menu-link ul li a {
      color:#fff;
      padding: 0px 10px 0px 10px;
      line-height:40px;
      display: block; 
      text-align:center;
  }
  
  .menu-link a:hover{
      background:url(../images/menu-nav-hov.png) repeat-x;
      cursor:pointer; 
  }
  
  .menu-link ul li.on {
      background:url(../images/menu-nav-hov.png) repeat-x;
  /** background-position:center bottom;
      background-repeat:no-repeat;
  **/
  }
  
  /** Side Menu **/
  
  .sideMenu ul li.on a
  {
      height:2em;
      padding-top: 2px;
      background:url(../images/point.png) no-repeat;
      font-weight:bold;   
  }
  
  .sideMenu ul
  {    
      padding: 15px 0px 0px 0px;  
      list-style-type:none;
      font-size:0.9em;
      width:20em;
      color:#fff;   
      margin-left:-10px;
  }
  
  .sideMenu ul a{
      padding: 2px 20px 0px 0px;  
      color:#fff;
      text-decoration:none;
      float:left;
      width:19.2em;
  }
  
  .sideMenu li a
  {
      height:2em;
      padding-top: 1px;
      padding-left:15px;
  }
  
  .sideMenu li a:hover{
      background:url(../images/point.png) no-repeat;
      cursor:pointer; 
      padding-left:-15px;
  }
  
  .sideMenu h4{
      display:none;
  }
  
  /** Footer **/
  
  #foot
  {
     padding-left: 20px;
     padding-right: 20px;
     position:absolute;
     bottom:0;
     height:60px;
     height:1.5em;
     font-size:.8em;
  }
  
  #foot li a
  {
      padding: 10px 0px 10px 0px; 
      color:#fff;
      text-decoration:none; 
  }
  </code></pre>
  
  <p>Am i missing something obvious? thanks</p>