CSS border and Nav menu height different in Firefox vs Chrome

In my website strongape.com, the firefox top and bottom border don't align as well as the navigation menus overlap slightly. Can someone help me debug this? Thank you. Here's my css file:

html{
    height: 100%;
}

body {
  padding-top: 50px;
  height: 100%;
  font-family: Verdana, Helvetica, Arial;
  margin-bottom: 100%;
  margin-top: 0px;
  font-size: 14px;
    /* fallback (Opera) */
    background: #008800;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #617C58, #00FFFF);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
            left top, left bottom, from(#617C58), to(#00FFFF));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
            StartColorStr='#617C58', EndColorStr='#00FFFF', GradientType=0);
}

#binder {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10%;
  padding-right: 10%;
  background: url(/images/middle.png);
  background-size: 100%;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-repeat:repeat-y;
  font-size: 12px;
  padding-bottom: 20px;
  padding-top: 20px;
}

#top_bar {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  padding-right: 10%;
  padding-left: 10%;
  margin-bottom: 0px;
  margin-top: 0px;
  padding-bottom: 30px;
  padding-top: 0px;
  background: url(/images/top_and_bottom_bar.png);
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  -moz-border-radius-topright: 25px 50px;
  -webkit-border-top-right-radius: 25px 50px;
  border-top-right-radius: 25px 50px;
}

#bottom_bar {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  padding-right: 10%;
  padding-left: 10%;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 30px;
  background: url(/images/top_and_bottom_bar.png);
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  -moz-border-radius-bottomright: 25px 50px;
  -webkit-border-bottom-right-radius: 25px 50px;
  border-bottom-right-radius: 25px 50px;
}

/* Navigation Tab开发者_如何学编程s http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html */
/* http://www.cuberick.com/2010/05/simple-tabbed-navigation-in-rails.html */
.menu {
    margin-left: 30%;
    margin-bottom: 57px;
}

.menu ul {
    list-style:none;
}

.menu ul li {
    display:inline;
    float:left;
}

/* :first-child pseudo selector with rounded top left corner */
.menu ul li:first-child a {
    -moz-border-radius-topleft: 12px;
    -webkit-border-top-left-radius:12px;
}

/* :last-child pseudo selector with rounded top right corner */
.menu ul li:last-child a {
    -moz-border-radius-topright: 12px;
    -webkit-border-top-right-radius:12px;
}

/* background color set to RGBA, with opacity on 0.3 and also using text-shadow */
.menu ul li a {
    padding:20px;
    background: rgba(255,138,30,0.3);
    text-decoration: none;
    font: bold 20px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    color: #402e16;
    text-shadow: #eee 0px 0px 2px;
}

/* hover state shows a linear gradient and opacity it brought down to 0.9 and also shows a very slight grey shadow on top */
.menu ul li a:hover {
    -moz-box-shadow: 0 -5px 10px #777;
    -webkit-box-shadow: 0 -5px 10px #777;
   background: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;
   background: -moz-linear-gradient(right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;
   background-color:rgb(255,173,10) !important;
   -moz-opacity:.90;
   filter:alpha(opacity=90);
   opacity:.90;
}

/* another RGBA background, now with an opacity of 0.8 */
.menu ul li a.active {
    background: rgba(255,138,30,0.8) !important;
}

#bottom {
  padding-top: 12px;
  font-size: 12px;
  text-align: center;
}   

.homepage {
    width: 100%;
    font-size: 24pt;
}

.homepage_border {
    border-style: none;
    border-width: 1px;
}

.top_border{
    border-width: 1px;
    border-style: solid;
    border-bottom: none;
    border-right: none;
    border-left: none;
    margin-left: -1em;
    margin-right: 1em;
}

Here's the HTML. You can view the source on the website if that's easier. Thanks again.

<!DOCTYPE html>
<html>
<head>
  <title>StrongApe</title>
  <link href="/stylesheets/application.css?1308946065" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery-ui-1.8.4.custom.css?1299304515" media="screen" rel="stylesheet" type="text/css" />
  <script src="/javascripts/jquery.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/application.js?1309552670" type="text/javascript"></script>
  <script src="/javascripts/jquery.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script>
  <link href="/stylesheets/application.css?1308946065" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery-ui-1.8.4.custom.css?1299304515" media="screen" rel="stylesheet" type="text/css" />
  <script src="/javascripts/jquery-1.6.1.min.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/jquery-ui-1.8.4.custom.min.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/jquery.cluetip.min.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/jquery.flot.pack.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/jquery.flot.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/jquery.flot.resize.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/excanvas.pack.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/excanvas.min.js?1308722519" type="text/javascript"></script>
  <meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="pf43on62OPA7k0rJbvtBiw6wyrdmbJTpauHcH48Jz9I="/>
  <div class="menu">

    <ul>
      <li>

    <a href="/home/index" class="active">Home</a></li>
      <li>
    <a href="/athletic_programs" class="">Workout Routines</a></li>
      <li>
    <a href="/date_of_workouts" class="">Workout Log</a></li>
      <li>
    <a href="/home/about" class="">About</a></li>

      <!--<li>
    <a href="/metrics" class="">Health</a></li>-->
    </ul>
  </div>
</head>
<body>
  <div id="top_bar"></div>
    <div id="binder">
    <div class="hmenu">
        <a href="/users/sign_up">Register</a>

      <a href="/users/sign_in">Login</a>

    </div>
    <p id="notice"></p>
    <p id="alert"></p>
    <img alt="StrongApe" id="gorilla" src="/images/banner.png?1299304515" />
<table class="homepage">
  <tr>
    <th class="header1"><a href="/users/sign_up">Register</a></th>

    <th class="header1"><a href="/users/sign_in">Login</a></th>
  </tr>
</table>
<table class="homepage">
    <tr>
      <tr>
    <th class="header2">Fitness Routines</th>
      </tr>
      <tr>

    <td class="homepage_border">
      <li>Fully Customizable</li>
      <li>Printable</li>
      <li>Save and Share with Anyone</li>
      <!--<>Quickly Email</li>-->
    </td>
      </tr>

    <tr>
      <th class="header1"><a href="/athletic_programs">Create or Find a Workout Routine</a></th>
    </tr>
    </tr>
    <tr>
    <tr>
      <th class="header2">Fitness Log</th>
    </tr>

    <tr>
      <td class="homepage_border">
        <li>Track Progress</li>
        <!--<>Use from Mobile</li>
        <li>Track Any Variable</li>
        <li>Graph Progress</li>-->
      </td>
    </tr>
    <tr>
      <th class="header1"><a href="/date_of_workouts">Log Your Activity</a></th>

    </tr>
    </tr>
</table>

    </div>
  <div id="bottom_bar"></div>
</body>
</html>

.menu { margin-bottom:0; }
.menu ul { margin:0; overflow:hidden; }
.menu ul li a { display:block; }

You have a lot of duplicate CSS - it appears you're loading some files twice.

Your code is also, quite, well, unusual. Might want to rethink your approach.

The fix above certainly works in FF5.0, but I haven't tested the changes in chrome.