FireFox 4 padding wrong in a horizontal CSS Menu

I have a horizontal CSS menu at this page:

http://72.47.251.205/ak9

In Chrome, Safari and Internet Explorer 8 it renders perfectly. In FireFox 4, each <li> is just slightly too narrow, leaving a gap between the last two items.

Here's a quick example of the HTML:

<ul id="top-nav">
 <li><a href="#">Menu Item 1</a></li>
 <li><a href="#">Menu Item 1</a></li>
 <li><a href="#">Menu Item 1</a></li>
 <li class="last-item"><a href="#">Menu Item 1</a></li>
</ul>

And the CSS:

#top-nav {
 position: relative;
}

#top-nav li {
 float: left;
 height: 46px;
 line-height: 46px;
 width: auto;
}

#top-nav li.last-item {
 position: absolut开发者_运维百科e;
 top: 0;
 right: 0;
}

#top-nav li a {
 display: block;
 padding: 0 38px;
}

I tried using the -moz-box-sizing CSS attribute on the body tag, but to no avail.

Thanks to anyone who has any ideas.

UPDATE

It was brought to my attention that FF 4 in Windows renders this appropriately, but IE 9 does not. It appears that this is a cross-platform as well as cross-browser inconsistency. It's really starting to concern me.

Also, I used absolute positioning on the last item to ensure that it stays flush right with the .wrapper div that keeps everything centered. That way, browser inconsistencies in rendering box-width would never be able to "break" the menu by forcing the last item to the second line, something way worse than what's going on now.

---

Are you sure you got it right mate? I have looked the same in IE8, FF 4.0 and FF 4.0.1, and they look right. However in IE9, the problem you describe happens as there is a gap between the last two items, Media and Blog!

IE9

FF 4.0.1

The reason the gap is there because you have set position: absolute on the last list item with offset properties set at top: 0; right:0; - If you remove this, the gap will be gone.