Javascript: Detect MAC Apple platform to change CSS

75

The letter-spacing is treated differently on OSX than Windows XP. This can cause problems if you basing a design off text-based CSS. This fix works perfectly if you using a simple dropdown menu that uses absolute positions and auto margins, so its not a child of the initial menu you made, an example can be seen here: www.cmcri.org

A simple javascript code can detect a MAC platform with an IF statement, IF it is MAC then write to document a style. This code must be inserted after your initial call for your style sheet so it overwrites the original CSS code.

if(navigator.userAgent.indexOf(‘Mac’) != -1)

{document.write (‘<style type=”text/css”>#header ul li a{letter-spacing:.025em;}</style>’);}

Easy fix!



1 comment so far ↓

If you found this post useful click the share this button. Contribute below by adding a comment, no registration is required.

  • ryan says on 08.23.09 at 9:26 pm comment #1

    Hi
    I have not tryed your code yet becouse I don’t know if it works in my case.
    I have mac osx, would like other to see the same as I do.
    I am testing my site on safari,Explore 5.2.3 Navigator 9 .
    I had to make 3 diffrent index and would like the right one to pop up
    when someone goes on it, can you help me Thanks
    Ryan

Leave a Comment