Stuck on a stupid CSS problem

Can anyone help me with this one?  I'm just styling up my new Rails app and I noticed that Firefox isn't doing what I'd expect in the CSS.  If you look at "this page":http://www.contributionmanager.co.uk/test.html in Firefox, you'll see that the nav has detached itself from the banner.  In IE, it's where I'd expect it to be.

The really odd thing is that if I put a 1px border around the header area (to see where it ends), the nav then jumps up and slots in just underneath.  If I take the border back out, it drops down again.  The border makes no difference to the positioning in IE.

What have I done?!

The CSS is really simple as I've only just started styling.

.hidden { display: none; }

/* Typography */

body, td, th {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: white url(/images/about-header-bg.jpg) repeat-x 0% 65px;
  margin: 0px;
  padding: 0px;
}

#wrapper {
  width: 740px;
  margin: 0 auto;
  text-align: left;
  padding: 0px;
}

#wrapper img {
  margin: 5px 0px;
  padding: 0px;
}

#header {
  position: static;
  margin-top: 0px;    /* To leave room for the logo */
  height: 235px;
  color: white;
  padding: 0px 400px 0 0px;
  margin: 0;
}

#header h1 {
  margin-top: 35px;
  font-size: 130%;
}

#navoutside {
  margin: 0px;
  padding: 0px;
  height: 36px;
}

#navoutside ul {
  margin: 0px;
  padding: 0px;
}

#navoutside ul li {
  margin: 0px;
  padding: 0px;
  list-style: none;
  float: left;
  width: 100px;
  padding: 7px 0 11px 25px;
  background: #ccc url(/images/about-nav-image.jpg) no-repeat 5px 12px;
}

#navoutside ul li a {
  font-size: 80%;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

#content {
  clear: left;
}