Question : CSS Border Spacing Issue

I am just starting work on a new site for a client.  One of the requirements is that when hovering over a link in the "topmenu", the background needs to change.  No problem with the background changing color, however, except for the first menu item, the color change did not extend completely to the left of the preceeding border, which is used to separate menu items.  To investigate the problem, I added a left border and noted that there are about 5 pixels between the right border of one menu item and the left border of the next menu item.  I can't figure it out.

Here's the code:
=======================================

<?php

/**
 * @author Alan Pollenz
 * @copyright 2010
 */

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <meta name="author" content="Alan Pollenz">

      <title>Untitled 2</title>

<style type="text/css">

body{
      height: 100%;
      padding:0px;
      background: #ffffff;
      text-align: center;
      }

/* style ids */

#container {
      width: 1000px;
      margin: 0 auto;
      border: 1px solid black;
      padding: 5px;
      overflow: auto;
      }
      
#banner {
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
      }

#logo {
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
      }

#topmenu {
      width: 100%;
      text-align: left;
      margin-bottom: 5px;
      border: 1px solid black;
      }

#sidemenu {
      width:125px;
      height: 100%;
      text-align: left;
      color:white;
      border: 1px solid black;
      float:left;
      background-color:#4852B7;
      margin-right: 5px;
      padding: 5px;
}

#content {
      width:838px;
      height: 100%;
      text-align: left;
      float:right;
      padding: 5px;
}

/* style classes */

a.topmenuitem:link {
      text-align: center;
      font-weight: bold;
border-right: 1px black solid;
border-left: 1px black solid;
border-spacing: 0px;
      text-decoration: none;
      padding: 0px 5px 0px 5px;
      color: #000000;
      background-color: #ffffff;
      }

a.topmenuitem:visited {
      text-align: center;
      font-weight: bold;
border-right: 1px black solid;
border-left: 1px black solid;
      text-decoration: none;
      padding: 0px 5px 0px 5px;
      color: #000000;
      background-color: #ffffff;
      }


a.topmenuitem:hover {
      text-align: center;
      font-weight: bold;
border-right: 1px black solid;
border-left: 1px black solid;
      text-decoration: none;
      padding: 0px 5px 0px 5px;
      color: #000000;
      background-color: #00ff00;
      }

</style>

</head>

<body>

<div id="container">
  <div id="banner">
    ... contents of banner DIV...
  </div>
  <div id="logo">
    ... contents of logo DIV...
  </div>
  <div id="topmenu">
    <a href="#" class="topmenuitem">HOME</a>
    <a href="#" class="topmenuitem">ABOUT US</a>
    <a href="#" class="topmenuitem">CONTACT US</a>
    <a href="#" class="topmenuitem">RESOURCES</a>
  </div>
  <div id="sidemenu">
    ... contents of sidemenu DIV...
  </div>
  <div id="content">
    ... contents of content DIV...<br><br><br><br><br>
  </div>
</div>

</body>
</html>

=======================================================

Thanks.

Alan

Answer : CSS Border Spacing Issue

I haven't quite figured out why, but the space goes away when you arrange the links like this:

1:

<a href="#" class="topmenuitem">HOME</a><a href="#" class="topmenuitem">ABOUT US</a><a href="#" class="topmenuitem">CONTACT US</a><a href="#" class="topmenuitem">RESOURCES</a>
Random Solutions  
 
programming4us programming4us