title: Regular HTML table border show up very strange in Firefox
body: <p>I created an <a href="http://en.wikipedia.org/wiki/HTML" rel="nofollow noreferrer">HTML</a> table and used the following <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" rel="nofollow noreferrer">CSS</a> to style the border as I wanted:</p>
  
  <ol>
  <li><p>The top row and column are to be one color, and the rest of the table is to be stripes alternative row colors.</p></li>
  <li><p>Regular single black border over each cell</p></li>
  </ol>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#functionMatrixTable td
  {
      border-collapse: collapse;
      border-width: 1px;
      border-color: Black;
      border-style: solid;
  }
  
  #functionMatrixTable th
  {
      border-collapse: collapse;
      border-width: 1px;
      border-color: Black;
      border-style: solid;
  }
  
  #functionMatrixTable tbody tr.odd th, tbody tr.even th {
      background-color: #D8D8D8;
  }
  
  
  #functionMatrixTable tr.odd td{
      background-color: #ffffff;
      padding: 4px;
  }
  
  #functionMatrixTable tr.even td {
  background-color: #CDE0F6;
      padding: 4px;
  }
  
  #functionMatrixTable th
  {
      padding: 4px;
      background-color: #D8D8D8;
      color: #787878;
  }
  </code></pre>
  
  <p>The strange issue in Firefox is that it seems to put a border around half of my table but not the rest. Here is an example image.  It looks fine in IE8.  any ideas what i am doing wrong here?</p>
  
  <p>Screenshot of my HTML table in Firefox. When I click in a cell the border appears. Why?</p>
  
  <p><a href="http://img40.imageshack.us/img40/5126/htmltable.png" rel="nofollow noreferrer">alt text http://img40.imageshack.us/img40/5126/htmltable.png</a></p>