views:

243

answers:

4

Hi I've cross browser fixed a site on all thinkable PC browsers, including Safari. Now my smart ass designer sent me a screen shot of the whole layout collapsing on mac. I have an idea how to solve it (reduce the margin on an element by a few pix), but i don't know how to target Safari only, preferably Safari mac only.
What's the best way to do this?

+1  A: 

The user agent string contains operating system information, and you are probably already checking the user agent string for the browser type.

A mac browser will have the string "Mac OS X 10." in the user agent string.

mvid
+1  A: 

You probably need to run a regex query against the User-Agent and selectively load a CSS file just for Safari for Mac.

Also: Are you sure that Safari for mac and safari for windows render the same page drastically different?

webdestroya
yes, i have safari for win, designer has safari for mac
Moak
@Moak - No, I meant, don't they essentially have the same engine. I can't imagine that the page 'falls apart' maybe that the fonts are slightly off.
webdestroya
@webdestroya - he said it's off by "a few px". I agree it might be an issue related to how fonts are rendered. Just a guess.
Rob
+1  A: 

You can use JavaScript to detect the browser, and the platform, as detailed here.

There are some CSS-only hacks which take advantage of bugs in some very specific browsers (mostly different versions of IE) but none of these target Safari Mac. So JavaScript browser detection and altering of the style attributes is your best bet.

Pepijn
+1  A: 

In my opinion browser detection is a very bad idea. If you can make it work in IE you should have no problem making it work in Safari. Please post a link and I will take a look.

Jared Christensen
www.bostonteaclub.com chinese version (ugly site, i know)
Moak