title: How do I close the gap at the top of the page where my banner is?
body: <p>I need my banner to sit tight against the top of the browser. Problem is that there is a small white gap btween the div that the image sits in and the top...Ive tried setting padding to 0 for div and body and it doesnt work :-(</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Welcome Home&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="/Shared/Css/Style.css" /&gt;
      &lt;link type="text/css" rel="stylesheet" href="/Shared/Css/Navigation.css" /&gt;
      &lt;script language="javascript" type="text/javascript"  src="../../Shared/Scripts/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div style="padding-top:0px;"&gt;
  
  
          &lt;div id="header-image"&gt;
              &lt;img alt="Header" src="../../Security/FileFetcher.aspx?RelativePathToFile=App/images/topnav.jpg&amp;mimetype=image/jpeg" /&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  body 
  {
      background: url("/Security/FileFetcher.aspx?RelativePathToFile=App/images/background.jpg&amp;mimetype=image/jpeg") repeat-x scroll 0 0 transparent;
      padding:0px 0px 0px 0px;
  }
  
  #main-content-container
  {
      margin-left:auto; 
      margin-right:auto; 
      width:930px; 
      border-left:2px solid Gray; 
      border-right:2px solid Gray;
  }
  
  
  #header-image 
  {
      width:960px; 
      margin-left:auto; 
      margin-right:auto;
      padding-top:0px;
  }
  </code></pre>