title: Unwanted Scroll Bar
body: <p>This is the second time I have encountered an unnecessary scrollbar, and the first time I fixed it by adding <code>body{margin:0;}</code>; however, I have no idea what is going on this time. Any ideas?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="Style-Sheets/style.css" /&gt;
          &lt;!--[if IE]&gt;&lt;link rel="stylesheet" type="text/css" href="Style-Sheets/ie.css" /&gt;&lt;![endif]--&gt;
          &lt;!--[if !IE 7]&gt;&lt;link rel="stylesheet" type="text/css" href="Style-Sheets/!ie7.css" /&gt;&lt;![endif]--&gt;
          &lt;!--[if OPERA]&gt;&lt;link rel="stylesheet" type="text/css" href="Style-Sheets/opera.css" /&gt;&lt;![endif]--&gt;
          &lt;link rel="icon" href="Favicons/favicon.jpg" /&gt;
          &lt;!--&lt;base target="_blank" /&gt;--&gt;
          &lt;title&gt;Home&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrap"&gt;
              &lt;div id="header"&gt;
                  &lt;p class="title"&gt;Title&lt;/p&gt;
                  &lt;p class="nav-down"&gt;&lt;span class="verticle-bar"&gt;|&lt;/span&gt;&amp;nbsp&lt;a class="navigation" href="index.html"&gt;Home&lt;/a&gt;&amp;nbsp&lt;span class="verticle-bar"&gt;|&lt;/span&gt;&amp;nbsp&lt;a class="navigation" href="about.html"&gt;About&lt;/a&gt;&amp;nbsp&lt;span class="verticle-bar"&gt;|&lt;/span&gt;&amp;nbsp&lt;a class="navigation" href="blah/index.html"&gt;blah&lt;/a&gt;&amp;nbsp&lt;span class="verticle-bar"&gt;|&lt;/span&gt;&amp;nbsp&lt;a class="navigation" href="blah2.html"&gt;blah2&lt;/a&gt;&amp;nbsp&lt;span class="verticle-bar"&gt;|&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="body"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              &lt;div class="footer"&gt;
                  &lt;span class="verticle-bar"&gt;|&lt;/span&gt;&amp;nbsp
                  &lt;a class="footer-link" href=""&gt;About The Developer&lt;/a&gt;&amp;nbsp
                  &lt;span class="verticle-bar"&gt;|&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: (from style.css, which is (or should be) the only style sheet affecting the page)</p>
  
  <pre><code>html {
  height:100%;
  margin:0;
  padding:0;
  background-color:#FFFFFF;
  text-align:center;
  font-family:arial;
  line-height:1.5;/*test*/
  color:black;
  }
  
  body {
  margin:0;
  height:100%;    
  }
  
  p {
  margin:0;
  padding:0;
  }
  
  #wrap {
  min-height:100%;
  }
  
  #header {
  z-index:2;
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4.25em;
  background-color:#6D8CE7;
  font-family:gabriola;
  line-height:1em;
  letter-spacing:0.2em;
  }
  
  .title {
  font-size:3em;
  line-height:1.0em;
  color:white;
  }
  
  #body {
  margin-left:5em;
  margin-right:5em;
  padding-top:4.25em;
  overflow:auto;
  padding-bottom:4em; /* must be same height as footer */
  }
  
  #footer {
  position:relative;
  margin-top:-4em; /* negative value of footer height */
  height:4em;
  clear:both;
  }
  
  .footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  }
  
  .verticle-bar {
  color:black;
  font-family:gabriola;
  }
  
  a.navigation:link {
  text-decoration:none;
  color:black;
  }
  
  a.navigation:visited {
  text-decoration:none;
  color:black;
  }
  
  a.navigation:hover {
  text-decoration:underline;
  color:black;
  }
  
  a.navigation:active {
  text-decoration:underline;
  color:black;
  }
  
  .footer-link {
  font-family:gabriola;
  }
  
  a.footer-link:link {
  text-decoration:none;
  color:#CC5500;
  }
  
  a.footer-link:visited {
  text-decoration:none;
  color:#CC5500;
  }
  
  a.footer-link:hover {
  text-decoration:underline;
  color:#CC5500;
  }
  
  a.footer-link:active {
  text-decoration:underline;
  color:#CC5500;
  }
  </code></pre>