Firefox Mac JavaScript Hack

Have you noticed the that FireFox for PC and Mac OSX work differently. Have you noticed the that Safari for PC and Mac OSX work differently.

(Note: I hope you understand Order of Operation. Basically, CSS will override the previous CSS if you write another revision after it.)
An example:
.header {height:300px;}
.header {height:250px;}
Based upon Order of Operation you browser will assume the height of 250 pixels and ignore the 300 pixels.)

Below is an example of how you would hack for Firefox for Mac User Agent using CSS and JavaScript.

Code Example:

<html>
<head>
<style type="text/css">
.header{width:200px;height:100px;background:#f00;}
</style>
<script language="javascript" type="text/javascript">
  if(navigator.userAgent.indexOf('Mac') > 0 && navigator.userAgent.indexOf('Firefox') > 0)
  {document.write ('<style type="text/css">.frontBack div{top:2px;}.other div{top:12px;}</style>');}
</script>
</head>
<body>
<div class="header"></div>
</body>
</html>

Explanation:

gear

What’s going on in the script is that it is placed under the css style tag and therefore over-rides the width of the header tag for anyone using a Mac to 210 pixels.

The nuts and bolts of the script work as follows: The script says if the "navigator.userAgent" (The Browser) ".indexOf('Mac') > 0" (Is Running On A Mac), and "&& navigator.userAgent.indexOf('Firefox') > 0" (Is Running On Firefox)then "document.write()" (Write Another Script CSS Tag).

Basically this is the equivalent of stacking two script tags on top of one another. The Java Script writes the 2nd one if you are on Mac OSX.

Note:
Note: You can also use this script if you want to specify if you want Safari Mac OSX and Safari PC to render differnetly, or for that matter FireFox Mac OSX and FireFox PC to render differently.
Safari Hack
FireFox Hack