title: Div Borders Affecting Padding
body: <p>I'm working on the links at the very top - when a link is clicked I change the class so that it is evident which page you're on.  I'm pretty sure it's the side and top borders that are causing this - to see it click on the 'contact' link and the links in between shift a few pixels to the side.  Also the selected link text is 1 or 2 pixels below the other.  Any suggestions?</p>
  
  <p>It's not very noticeable, but I'm into the details at this point.</p>
  
  <pre><code>html,body{margin:0}
  
  body {
      font-family: "Lucida Grande", Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif;
      font-size: 100%;
      line-height: 140%;
      color: #333333;
      background-color: #eee;
      }
  
  div.content {
      font-size: 80%;
      background-color: #FFFFFF;
      margin-left:200px;
      padding:15px;
      }
  
  div.top-margin{
      height: 15px ;
      background-color:#000;
      }
  
  div.top{
      /*border-bottom: 1px solid #000;*/ 
      width:100%;
      position: relative;
      }
  
  div.left{
      float:left;
      width:200px;
      height:770px;
      border-right: 1px solid #000;
      font-size: 80%;
      padding-top:20px;
      }
  
  div.body{
      height: 770px;
      background-color: #FFFFFF;
      /*margin: 5px 5px 5px 5px;*/
      padding: 6px;
      font-size: 90%;
      }
  
  div.logo{
      height:125px;
      width:250px;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      }
  
  div.main{
      width: 1100px ;
      margin-left: auto ;
      margin-right: auto ;
      }
  
  div.nav-links{
      float:right;
      position: absolute;
      bottom: 0;
    /*  margin-left:250px;*/
      margin-bottom: 0px;
      width:100%;
      }
  
  div.header-link{
      display:inline;
      margin:0 30px 0 0;
      }
  
   .logo-link{
      border-style: none;
      }
  
  div#nav-links ul li {
      float:left;
      overflow:hidden;
      position:relative;
      padding-left:15px;
      /*border-bottom: dotted 1px black;*/
  
      }
  
  
  ul#nav li.about-active {
      /*width:110px;*/
      padding-right:19px;
      /*border-bottom: solid 1px black;*/
      border-left: solid 1px black;
      border-top: solid 1px black;
      border-right: solid 1px black;
      background-color:white;
  
      }
  
  
  ul#nav li.process-active {
      /*width:110px;*/
      padding-right:19px;
      border-left: solid 1px black;
      border-top: solid 1px black;
      border-right: solid 1px black;
      background-color:white;
  
      }
  
  ul#nav li.projects-active {
      /*width:110px;*/
      padding-right:19px;
      border-left: solid 1px black;
      border-top: solid 1px black;
      border-right: solid 1px black;
      background-color:white;
  
      }
  
  ul#nav li.contact-active {
      /*width:110px;*/
      padding-right:19px;
      border-left: solid 1px black;
      border-top: solid 1px black;
      border-right: solid 1px black;
      background-color:white;
  
      }
  
  ul#nav li.about {
      /*width:110px;*/
      padding-right:20px;
  
      border-bottom: solid 1px black;
      }
  
  ul#nav li.process {
      /*width:110px;*/
      padding-right:20px;
  
      border-bottom: solid 1px black;
      }
  
  ul#nav li.projects {
      /*width:110px;*/
      padding-right:20px;
  
      border-bottom: solid 1px black;
      }
  
  ul#nav li.contact {
      /*width:110px;*/
      padding-right:20px;
  
      border-bottom: solid 1px black;
      }
  
      ul#nav li.filler-left { 
      border-bottom: solid 1px black;
      padding-left:311px;
      margin-left:210px;
      /*width:305px;*/
  
      }
  
      ul#nav li.filler {  
      padding-right:20px;
      border-bottom: solid 1px black;
      width:10%;
      }
  
  
  
  ul#nav a {
      text-decoration: none;
      }
  
  ul#nav a:hover {    
      text-decoration: none;
      color:blue;
      }
  
  div.footer{
      float:right;
      font-size: 70%;
      }
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;meta name="generator" content=
      "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" /&gt;
      &lt;meta name="generator" content="" /&gt;
      &lt;title&gt;
        NCB
      &lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="keywords" content="" /&gt;
  
      &lt;link type="text/css" rel="stylesheet" href="http://joe-riggs.com/chip/style.css" /&gt;
  
    &lt;/head&gt;
    &lt;body&gt; 
      &lt;div class="top-margin"&gt;&lt;/div&gt;
      &lt;div class="main"&gt;
        &lt;div class="top"&gt;
          &lt;div class="logo"&gt;
          &lt;a href="http://joe-riggs.com/chip"&gt;&lt;img class="logo-link" src="http://joe-riggs.com/chip/images/logo.jpg" alt="logo" height="125px" width="250px" /&gt;&lt;/a&gt;
  
          &lt;/div&gt;
          &lt;div class="nav-links" id="nav-links"&gt;
            &lt;ul id="nav"&gt;
  
              &lt;li class="filler-left"&gt;&lt;a href="#"&gt;&amp;nbsp;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="about-active"&gt;&lt;a href="http://joe-riggs.com/chip/"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="process"&gt;&lt;a href="http://joe-riggs.com/chip/process"&gt;Process&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li class="projects"&gt;&lt;a href="http://joe-riggs.com/chip/projects"&gt;Projects&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="contact"&gt;&lt;a href="http://joe-riggs.com/chip/contact"&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="filler"&gt;&lt;a href="#"&gt;&amp;nbsp;&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="left"&gt;
          &lt;ul&gt;
              &lt;li&gt;Links&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="content"&gt;
  
        &lt;img src="images/architect.png" alt="me" style="float:left; padding-right:10px;" /&gt;
         So this is the main page - the first page people will see when they come
         to your page.  Maybe we could put a nifty pic of you doing something
         architect looking.  Also a general overview would be nice.  This text
         can go over top of a faded background picture too.
         &lt;br /&gt;
        &lt;br /&gt;
          Donec velit nibh, pellentesque in fringilla a, blandit id nibh. Class
          aptent taciti sociosqu ad litora torquent per conubia nostra, per
          inceptos himenaeos. Nam posuere mattis velit eget rhoncus. Maecenas
          bibendum tristique dolor, nec varius nulla porta eget. Aenean turpis
          ligula, ornare in consectetur vitae, aliquet id nulla. Vivamus bibendum
          sapien id neque lacinia vel viverra ante luctus. Sed lacinia velit id
          diam vulputate sollicitudin. Integer viverra libero vel enim dapibus
          rutrum. Praesent vel ipsum tortor. Pellentesque porttitor ante sed
          felis pretium nec rhoncus eros lacinia. Nam a massa nec sapien eleifend
          condimentum. Fusce ut augue id libero condimentum facilisis.&lt;br /&gt;
          &lt;br /&gt;
          Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
          odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
          rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
          erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
          odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
          in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
          ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
          euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
          id mauris consequat vel luctus quam vulputate. Duis in neque libero.
          Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
          in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
          euismod lacus id pulvinar.&lt;br /&gt;
          &lt;br /&gt;
  
          Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
          odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
          rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
          erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
          odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
          in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
          ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
          euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
          id mauris consequat vel luctus quam vulputate. Duis in neque libero.
          Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
          in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
          euismod lacus id pulvinar.
        &lt;/div&gt;
      &lt;div class="footer"&gt;
      &lt;br /&gt;
      copyright &amp;copy; 2010
      &lt;/div&gt;
      &lt;/div&gt;&lt;!--main--&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>