Font Family Float Drop Issues

Recently I ran into a font family float drop issue while working on a new project for a client, (more specifically the navigation bar). The nav bar was your usual horizontal navigational menu that ran along the bottom of the header and the top of the content.  The containing element for the nav bar was a fixed width of 940 pixels. I had the anchor tags set to display block and floated left with a fixed left and right padding. The font family chosen for the navigation menu was plain ole Arial. On a PC the menu looked perfect in IE 8 and below, Firefox (all versions), Safari, Opera, and Google Chrome. HOWEVER, on a MAC the last anchor menu item dropped out of the navigation bar breaking the page as well as IE9 beta on a PC.

Has this happened to you? Here’s the scoop I found. Apparently on Mac’s and IE9 beta, they render Arial typeface slightly thicker than a PC thus making the anchor tags wider in pixels.

The fix? Use a wider font family like Verdana or Geneva. Once I changed the font to Verdana, and changed a few css issues, the float drop problem was solved on all browsers, both PC and Mac. In fact, if you have firebug and access to a PC and a MAC, change the font family of the nav bar on this website to Arial and you’ll see exactly what I’m talking about.

Share any other odd font family cross compatibility issues you’ve found below.