I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE.

This is the only affecting css:

#header ul
{
  display: inline;
}
#header ul li
{
  list-style-type: none;
  background: #000;
  display: inline;
  margin: 0;
  padding: 0; 
}
#header ul li a
{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  text-align: center;
}

And this is the HTML:

  <div id="header">
    <ul id="toplinks">
      <li><a href="#">Hello</a></li>
      <li><a href="#">Herp</a></li>
      <li><a href="#">Derp</a></li>
    </ul>
  </div>

As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...