title: Navigation Bar: Unwanted space; imprecise jump to local link
body: <p>I am trying to position a horizontal navigation bar directly under a banner issue and link to local positions on the same page.</p>
  
  <ol>
  <li>For the life of me, I cannot get rid of the white space between the banner image and the navigation bar.  This space did not exist before I changed the banner from pure HTML to an image, but nothing I know to do with images fixes this.</li>
  <li>The links to Bio and Issues cause those headlines to be positioned at the top of the view but the link to Intro does not.</li>
  </ol>
  
  <p>Here is the <a href="http://jsfiddle.net/schemer/gmgdhs75/" rel="nofollow">JSFiddle</a></p>
  
  <p>Here is the working code:</p>
  
  <pre><code>h1 {
      color: black;
      text-align: center;
  }
  
  html, body {
      padding:0;
      margin:0;
      border: 0;
  }
  
  #statement {
      position: absolute;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, 0%);
      width: 810px;
  }
  
  #navbar {
      float: left;
      padding: 0;
  }
  
  #navbar ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: table;
  }
  
  #navbar li {
      float: left;
      text-align: center;
  }
  
  #navbar li a {
      font-size: 30px;
      display: table-cell;
      width: 270px;
      height: 50px;
      text-decoration: none;
      color: black;
      vertical-align: middle;
      background-color: #f0e68c;
  }
  
  #navbar li a:hover {
      color: #f0e68c;
      background-color: black;
  }
  
  &lt;body&gt;
  
  &lt;div id="statement"&gt;
  
     &lt;img src="http://dreamatico.com/data_images/ocean/ocean-5.jpg" width="810px" height="300px"&gt;
  
     &lt;div id="navbar"&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;a href="#intro"&gt;Intro&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#bio"&gt;Bio&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#issues"&gt;Issues&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt; 
     &lt;/div&gt;
  
     &lt;h1 id="intro"&gt;Intro&lt;/h1&gt;
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.&lt;/p&gt;
  
     &lt;h1 id="bio"&gt;Bio&lt;/h1&gt;
  
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.&lt;/p&gt;
  
     &lt;h1 id="issues"&gt;Issues&lt;/h1&gt;
  
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>