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

Website (css stylesheet) differences between PC and Mac

  • 2 replies
  • 5 have this problem
  • 1 view
  • Last reply by 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.

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