White gap and break in Apple-style CSS spritesheet menu

Please see http://shivimpanim.org/testsite/

It is very simple css, and my goal is to essentially duplicate Apple's menubar

Strangely- I'm getting a white gap between several of the buttons, and开发者_Python百科 the last button is breaking onto the next line!

For right now, I've eliminated the dividers in the graphic to be sure that it's definitely an html/css error and not the divider I'm seeing.

Please help :)

Thanks!

I am afraid I don't see the white gaps you are talking about in Firefox 5 or IE8 (which browser are you using?). However the reason the last <li> is dropping to the next line is because your button widths are too wide for the container.

Your <ul> is 960px wide, but the sum of your individual <li> widths is 970px. So if you reduce a few of your <li> items down by a total of 10px it will all fit in.