Can I code CSS specifically for Mac browsers?

Question

Site: http://clientfiles.priworks.com/lgmanagedportfolios/test/investment.html

I have been working at this web page for a while now trying to get the left side of the first submenu link to line up with the left of the 1st parent/main menu link.

I don't think there is a logical way of doing it but after much fudging I am close to getting it just right. The position is consistent for all win browsers and all Mac browsers (with some conditional CSS) but not for Win and Mac browsers together, for instance in Mac Firefox the text is too far right while in Win Firefox it's perfect.

Question: Is their a way to adjust the padding specificly for Mac browsers?

Answer 1

I don't believe you can do this with pure css, but you can detect the OS with javascript, and then use that to load different css.

http://www.quirksmode.org/js/detect.html

Answer 2

You mentioned an inconsistency in text sizing/positions, have you tried using something like Eric Meyer's CSS Reset or Normalize.css? They tend to solve issues like that.

By the way, those issues with text differences are caused by Windows and Macs using different fonts as their defaults, so using your CSS to make it the same size and font family may be just what you need instead of using different stylesheets per OS.

Answer 3

Heres the proper code for what you were trying to achieve in one of your comments above

if (navigator.platform === 'MacIntel' || navigator.platform === 'MacPPC') {
    $('head').append('<link rel="stylesheet" type="text/css" href="mac.css" />');
}​ else {
    $('head').append('<link href="main.css" rel="stylesheet" type="text/css" />');
} 

The reason your mac wasnt detecting it was that A. Your syntax was wrong and B. Looking at the source of your site if you leave <link href="main.css" rel="stylesheet" type="text/css" /> in the head section then the mac browsers are still gonna be reading that css file. Using my code above the browser will only be given the mac.css file if a mac is browsing the site or else it loads the default css

Answer 4

Use a CSS Reset sheet or normalize and it will make all the browsers display ABOUT the same by stripping the default styles

or just use * { padding: 0;} to set all padding to 0, but then you will have to set the padding for all your css

Answer 5

Update:

You might want to use jQuery to apply CSS on fly to a particular browser on a particular OS. You will need some help from Scripting language as well.

Use $_SERVER['HTTP_USER_AGENT'] super global variable to retrieve information of the browser and OS type. Set a flag if OS = LION and browser is Safari.

Use this flag in jQuery to apply CSS only if the flag is set.

Old Answer:

This would be CSS for Safari and Chrome, but will also affect the same browsers on a Windows plateform also.

Safari and google chrome use the same engine called webkit. You can target these two browsers using

-webkit-properties

check out this link

Here is a list of webkit properties, you can use.

some examples

-webkit-animation
-webkit-animation-delay
-webkit-animation-direction

They are mostly advance properties though, not basic.