Can you attach screenshots to illustrate what you mean? *http://en.wikipedia.org/wiki/Screenshot Use a compressed image type like PNG or JPG to save the screenshot and make sure that you do not exceed the maximum file size (1 MB).

   if(navigator.userAgent.indexOf('Mac') > 0 && navigator.userAgent.indexOf('Firefox') > 0)
   {document.write ('<link rel=\"stylesheet\" href=\"http://domain.com/sites/all/themes/mytheme/ffxosx.css\" type=\"text/css\" media=\"screen\" />');}
 </script>

[http://i56.tinypic.com/5ycdwn.jpg Display on PC] [http://i52.tinypic.com/addylk.jpg Display on Mac] I solved this by using a conditional css file and a javascript that detects the platform. Not the best practice, but it does the job for the time being. Question is, what will it do once the bug in Firefox gets fixed - if it's considered as such ofcourse. On second thought: this may be a font bug after all. The current font of the menu items is Melbourne Regular, using [http://www.fontsquirrel.com/fontface/generator font replacement]. It's possible to lay both images over each other to see what the differences are between fonts on both the platforms. Fact is: the height of the characters itself doesn't seem to be the issue, but rather the (horizontal) spacing. What it does to the vertical spacing is not really clear, and that's where the mentionned issue seems to be. There seems to be an extra 2px margin on top of the menu item. The script that detects the platform in order to enable the conditional css for FIrefox on Mac OSX: <script language="javascript" type="text/javascript"> if(navigator.userAgent.indexOf('Mac') > 0 && navigator.userAgent.indexOf('Firefox') > 0) {document.write ('<link rel=\"stylesheet\" href=\"http://domain.com/sites/all/themes/mytheme/ffxosx.css\" type=\"text/css\" media=\"screen\" />');} </script>