title: Can't get div flush with top of page
body: <p>I'm having trouble getting my wrapper div to become flush with the very top of the page. I've set the body margin/padding to zero, as well as the top margin for the wrapper div to zero with no success.</p>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family: Helvetica, sans-serif;
      background-image:url('../images/bg1.jpg');
      padding:0px; 
      margin:0px;
  }
  
  #ratio{
      text-align: center;
  }
  
  div#nav {
      text-align: center;
      margin: 0;
  }
  
  #nav img{
      padding: 5px 40px 20px 40px;
  }
  
  #task_table{
      width: 775px;
      table-layout: fixed;
      text-align: left;
      font-size: 12px;
      border-collapse:collapse;
  }
  
  #task_table td{
      border-bottom: 1px solid black;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  
  #task_table td:first-child{
      width: 220px;
      padding-left: 15px;
  }
  
  #task_table td:nth-child(2){
      width:70px;
      padding-left: 20px;
  }
  
  #task_table td:nth-child(3){
      padding-left: 25px;
  }
  
  #task_table td:nth-child(4){
      text-align:right;
      padding-right: 15px;
  }
  
  #wrapper {
      width: 775px;
      margin: 0 auto;
      background-color: #fff;
      margin-top:0px;
  }
  
  #datecaption {
      font-size: 10px;
      padding-left: 15px;
      padding-bottom: 5px;
  }
  
  #hourscaption {
      font-size: 10px;
      padding-left: 195px;
  }
  
  #taskcaption {
      font-size: 10px;
      padding-left: 30px;
  }
  
  #taskbar {
      background: #CCCCCC;
      padding: 15px;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
  }
  
  #task_text {
      margin-left: 20px;
      width: 330px;
  }
  
  #hours_text {
      margin-left: 20px;
      width: 50px;
  }
  
  .delete, .successful, .unsuccessful {
      padding: 0px 4px 0px 4px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="wrapper"&gt;
  
          &lt;div id="nav"&gt;
  
              &lt;a href="index.php"&gt;&lt;img src="images/tab1.jpg" class="navimg" id="tab1"/&gt;&lt;/a&gt;
  
              &lt;a href="completed.php"&gt;&lt;img src="images/tab2.jpg" class="navimg" id="tab2"/&gt;&lt;/a&gt;
  
              &lt;a href="failed.php"&gt;&lt;img src="images/tab3.jpg" class="navimg" id="tab3"/&gt;&lt;/a&gt;
  
          &lt;/div&gt;
  
          &lt;span id="datecaption"&gt;DATE&lt;/span&gt;
  
          &lt;span id="hourscaption"&gt;HOURS&lt;/span&gt;
  
          &lt;span id="taskcaption"&gt;TASK&lt;/span&gt;
  
              &lt;form action="index.php" method="POST" style="margin:0;padding:0;" id="submit"&gt;
  
          &lt;div id="taskbar"&gt;
  
                  &lt;select name="month" id="monthDD"&gt;&lt;option&gt;January&lt;/option&gt;&lt;option selected="selected"&gt;February&lt;/option&gt;&lt;option&gt;March&lt;/option&gt;&lt;option&gt;April&lt;/option&gt;&lt;option&gt;May&lt;/option&gt;&lt;option&gt;June&lt;/option&gt;&lt;option&gt;July&lt;/option&gt;&lt;option&gt;August&lt;/option&gt;&lt;option&gt;September&lt;/option&gt;&lt;option&gt;October&lt;/option&gt;&lt;option&gt;November&lt;/option&gt;&lt;option&gt;December&lt;/option&gt;&lt;/select&gt;&lt;select name="day" id="dayDD"&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;option&gt;4&lt;/option&gt;&lt;option&gt;5&lt;/option&gt;&lt;option&gt;6&lt;/option&gt;&lt;option&gt;7&lt;/option&gt;&lt;option&gt;8&lt;/option&gt;&lt;option&gt;9&lt;/option&gt;&lt;option&gt;10&lt;/option&gt;&lt;option&gt;11&lt;/option&gt;&lt;option&gt;12&lt;/option&gt;&lt;option&gt;13&lt;/option&gt;&lt;option selected="selected"&gt;14&lt;/option&gt;&lt;option&gt;15&lt;/option&gt;&lt;option&gt;16&lt;/option&gt;&lt;option&gt;17&lt;/option&gt;&lt;option&gt;18&lt;/option&gt;&lt;option&gt;19&lt;/option&gt;&lt;option&gt;20&lt;/option&gt;&lt;option&gt;21&lt;/option&gt;&lt;option&gt;22&lt;/option&gt;&lt;option&gt;23&lt;/option&gt;&lt;option&gt;24&lt;/option&gt;&lt;option&gt;25&lt;/option&gt;&lt;option&gt;26&lt;/option&gt;&lt;option&gt;27&lt;/option&gt;&lt;option&gt;28&lt;/option&gt;&lt;option&gt;29&lt;/option&gt;&lt;option&gt;30&lt;/option&gt;&lt;option&gt;31&lt;/option&gt;&lt;/select&gt;                &lt;select name="year" id="yearDD"&gt;
  
                      &lt;option&gt;2012&lt;/option&gt;
  
                      &lt;option&gt;2013&lt;/option&gt;
  
                      &lt;option&gt;2014&lt;/option&gt;
  
                  &lt;/select&gt;
  
  
  
                  &lt;input type="text" name="hours" id="hours_text" /&gt;
  
                  &lt;input type="text" name="task" id="task_text" /&gt;
  
                  &lt;input type="Submit" value="Add Task" style="margin-left: 20px;" /&gt;
  
          &lt;/div&gt;&lt;/form&gt;
  
  
  
          &lt;table id="task_table"&gt;&lt;tr id="row157"&gt;&lt;td&gt;February 14, 2012&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;Read&lt;/td&gt;&lt;td&gt;&lt;a href=""&gt;&lt;img src="images/trash.png" class="delete" name="157"&gt;&lt;/a&gt;
  
              &lt;a href=""&gt;&lt;img src="images/delete.png" class="failed" name="157"&gt;&lt;/a&gt;
  
              &lt;a href=""&gt;&lt;img src="images/check.png" class="successful" name="157"&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr id="row158"&gt;&lt;td&gt;February 14, 2012&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Work on tasks project&lt;/td&gt;&lt;td&gt;&lt;a href=""&gt;&lt;img src="images/trash.png" class="delete" name="158"&gt;&lt;/a&gt;
  
              &lt;a href=""&gt;&lt;img src="images/delete.png" class="failed" name="158"&gt;&lt;/a&gt;
  
              &lt;a href=""&gt;&lt;img src="images/check.png" class="successful" name="158"&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;     
  
  
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Anyone know what's up? Thanks. </p>
  
  <p>It seems to be working in the jsFiddle, oddly; <a href="http://jsfiddle.net/jsNS8/" rel="nofollow">http://jsfiddle.net/jsNS8/</a></p>