This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Èròjà atẹ̀lélànà yii ni a ti fi pamọ́ fọ́jọ́ pípẹ́. Jọ̀wọ́ béèrè ìbéèrè titun bí o bá nílò ìrànwọ́.

Website (css stylesheet) differences between PC and Mac

  • 2 àwọn èsì
  • 5 ní àwọn ìṣòro yìí
  • 1 view
  • Èsì tí ó kẹ́hìn lọ́wọ́ knalstaaf

more options

Firefox 6.0 on a PC (Vista - 32bit) interprets stylesheets differently than on Firefox 6.0 on Mac (OSX - 10.5.6). It doesn't seem to be a font-issue, but rather a margin/padding issue.

Firefox 6.0 on a PC (Vista - 32bit) interprets stylesheets differently than on Firefox 6.0 on Mac (OSX - 10.5.6). It doesn't seem to be a font-issue, but rather a margin/padding issue.

Ti ṣàtúnṣe nípa knalstaaf

All Replies (2)

more options

Can you attach screenshots to illustrate what you mean?

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).

more options

Display on PC

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 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>