4

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?

Improve this question
5
  • 8
    I'm not exactly sure what you're talking about but a properly constructed site should look practically the same in Firefox regardless of the operating system. Also, fix this HTML error and see if your problem clears up before constructing a bunch of conditional CSS. Commented Apr 20, 2012 at 13:56
  • 1
    You should really switch to a strict doctype otherwise you will see differences between browser Commented Apr 20, 2012 at 14:01
  • For what it's worth, the site looks identical in FF and Safari on Mac. Commented Apr 20, 2012 at 14:03
  • @F.Calderan, I'm not sure about that. My sites look the same cross-browser and I'm not using a strict doctype. Commented Apr 20, 2012 at 14:04
  • 1
    Please post a full working URL (do not use URL shorteners) or your actual code. Right now your page is giving a 404 error. As it stands, this question will not be helpful to anyone else in the future. Commented Apr 20, 2012 at 16:24

5 Answers 5

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This seems to be my best bet but I am using this and Mac browsers are not detecting it and using the mac.css <script type="text/javascript"> if (navigator.userAgent.match(/Macintosh/)) // <link rel="stylesheet" type="text/css" href="mac.css" /> </script>
structure wise you forgot the brackets {} for your if statement and the semi colon ; to end the code statement.
Also you want to use navigator.platform , not userAgent
4

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.

Improve this answer

Comments

2

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

Improve this answer

Comments

0

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

Improve this answer

Comments

-2

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.

Improve this answer

10 Comments

That's for special webkit only properties. It will have no effect on Firefox, nor can it be applied to just any CSS property.
And it would target Chrome/Safari/Other webkit browsers on non-mac platforms including Windows and Android.
I had same css with and it was displayed in chrome (windows) differently then in safari (mac).
Yes it will affect all webkit browsers. But presumely it will fix the same problem in all browsers not just safari. Since they essentially behave in same way.
Quote: "Since they essentially behave in same way." Yes, they should but that's not what the OP was reporting.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.