CSS Menu Bar Text Problem

I am trying to create a menu bar which will consist of a series of icons and text laid out horizontally. I am using an unordered list as the container, but I am having a problem. All of the menu items which contain no text, just an empty anchor tag with a background image, display in-line just fine.

However, whenever I try to use text, instead of a background image as a menu item, the text list item is slid downward. You can see this example on JSFiddle, be sure to rollover each of the items to see how the background color indicator behaves: http://jsfiddle.net/pAfgm/6/.

Notice how each 开发者_运维技巧of the links with a globe icon (yes, I hot-linked from Facebook for this example) displays nice and neat. However the text and it's background indicator are way off alignment. I see this is the case for FF 3.6, Opera 11, but not IE7! For once, IE7 isn't having a problem where other browsers are.

Could someone please show me how I can correct this issue?

Thank you for your time!

You simply need to add vertical-align: top to nav.pluginBar ul.pluginBarLeft li, on which you also have display: inline-block.

See: http://jsfiddle.net/pAfgm/7/

The default vertical-align value is baseline, which is the cause of this problem.

See the difference between different vertical-align values here:
http://www.brunildo.org/test/inline-block.html

See the "baseline" section here for a graphical explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/