Different CSS depending on OS (Mac or PC)

[mab240976]

I need some help. This may be quite basic to you guys. I've found the following script below to switch the CSS style sheet for appearing on mac or PC. However I can't work out which bits I edit or where to put the info. This is probably really simple. Please help. Many thanks.

I have two style sheets macstyle.css & pcstyle.css

<script type="text/javascript">

/***********************************************
* Different CSS depending on OS (mac/pc)- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var csstype="inline" //Specify type of CSS to use. "Inline" or "external"

var mac_css='body{font-size: 14pt; }' //if "inline", specify mac css here
var pc_css='body{font-size: 12pt; }' //if "inline", specify PC/default css here

var mac_externalcss='/style/macstyle.css' //if "external", specify Mac css file here
var pc_externalcss='/style/pcstyle.css' //if "external", specify PC/default css file here

///////No need to edit beyond here////////////

var mactest=navigator.userAgent.indexOf("Mac")!=-1
if (csstype=="inline"){
document.write('<style type="text/css">')
if (mactest)
document.write(mac_css)
else
document.write(pc_css)
document.write('</style>')
}
else if (csstype=="external")
document.write('<link rel="stylesheet" type="text/css" href="'+ (mactest? mac_externalcss : pc_externalcss) +'">')

</script>

[kepler]

If I can make a suggestion, don't use JavaScript to switch styles. The problem with using JavaScript is some people disable JavaScript in their browsers. Instead do the switching on the server.

You can do it easily if you are using an Apache server with PHP installed. Use my (free) dynamic CSS library at www.coolphptools.com/dynamic_css (http://www.coolphptools.com/dynamic_css). Then create a style.css that contains:


/*
* Loads the appropriate CSS file based on OS
*/

eval $user_agent = $_SERVER['HTTP_USER_AGENT'];

if ( strstr( '$user_agent', 'Mac' ) !== false )
@include 'macstyle.css';
else
@include 'pcstyle.css';
endif



This assumes all your CSS files are in the same directory. If not change the include path.

Finally just have the following link in your HTML:

<link rel="stylesheet" type="text/css" href="style.css" />

The switching will be done on the server.

[kepler]

By the way, if you are using external style sheets, change the following line:

var csstype="inline"

to

var csstype="external"

If you decide to use the JavaScript solution.

[Medyman]

The highlighted parts are what you can/should edit.


var csstype="inline" //Specify type of CSS to use. "Inline" or "external"

var mac_css='body{font-size: 14pt; }' //if "inline", specify mac css here
var pc_css='body{font-size: 12pt; }' //if "inline", specify PC/default css here

var mac_externalcss='/style/macstyle.css' //if "external", specify Mac css file here
var pc_externalcss='/style/pcstyle.css' //if "external", specify PC/default css file here

I'd recommend using external CSS files here. It will be much easier to maintain that way.

Can I ask why you want to use OS-dependant CSS? It's usually much better practice to use browser-dependant CSS if you're trying to fix any bugs.

If you're using OS-dependant CSS for content-related changes, then I would also suggest what kepler did above -- use server side scripts.

[harryknight]

Hi, I am still learning but my website with CSS can be seen by both a Mac and a PC - I've tested it.

So how come you need two types of CSS?

Thanks

[mab240976]

Thanks guys. That should do the trick.

The main reason for doing this is because my client likes things to line up. For example the bottom of images to the bottom of a line of text. Now this is all well and good, but to achieve this on both PC and Mac is difficult without two sets of style sheets due to the way a Mac a PC view font sizes.

Would be fantastic if they both got together to develop one standard size and browser that viewed the same on both platforms.

Anyway enough of my waffle. Thanks for the advice I will try it out today.

[Medyman]

That's not just a Mac vs. PC problem. That's going to vary from browser to browser, within operating systems. If you define everything in pixels, intead of points(pt) or EM units...you won't have the problem of font's being "different sizes".

[mab240976]

That's not just a Mac vs. PC problem. That's going to vary from browser to browser, within operating systems. If you define everything in pixels, intead of points(pt) or EM units...you won't have the problem of font's being "different sizes".

I am defining sizes as pixels but PC's seem to view it slightly bigger. I'm working on a Mac and when I've made changes the browsers I test the site on (Firefox & Safari), show the same results where as Internet Explorer on the PC shows the font size larger also spacing is an issue on the PC between paragraphs. All very odd.

I'm open to suggestions, as I'd prefer just to have one style sheet. But as I mentioned my client is viewing the site on a PC and using Internet Explorer and wants it to view properly on his computer. We're due to send an email around to about 10 people to test the site and give feedback, to see if there are any other issues.

[mab240976]

If I can make a suggestion, don't use JavaScript to switch styles. The problem with using JavaScript is some people disable JavaScript in their browsers. Instead do the switching on the server.

You can do it easily if you are using an Apache server with PHP installed. Use my (free) dynamic CSS library at www.coolphptools.com/dynamic_css (http://www.coolphptools.com/dynamic_css). Then create a style.css that contains:


/*
* Loads the appropriate CSS file based on OS
*/

eval $user_agent = $_SERVER['HTTP_USER_AGENT'];

if ( strstr( $user_agent, 'Mac' ) !== false )
@include 'macstyle.css';
else
@include 'pcstyle.css';
endif



This assumes all your CSS files are in the same directory. If not change the include path.

Finally just have the following link in your HTML:

<link rel="stylesheet" type="text/css" href="style.css" />

The switching will be done on the server.
Below you mentioned creating a style.css with the following info. Can you explain the process to do this as I can't seem to make it work. Thanks.
Mark

Then create a style.css that contains:


/*
* Loads the appropriate CSS file based on OS
*/

eval $user_agent = $_SERVER['HTTP_USER_AGENT'];

if ( strstr( $user_agent, 'Mac' ) !== false )
@include 'macstyle.css';
else
@include 'pcstyle.css';
endif

[Medyman]

So you're comparing the results between Fx and Safari on the Mac vs IE on a PC? Have you considered the fact that it could just be IE's box model that's screwing you up?

In all the websites that I've made (a good 50 by now, probably) I've never had much trouble with Fx and Safari rendering different on a Mac than on a PC. Yes, they're slightly different but the positioing has always been relative. So, if the font renders larger, the positioning is still relative to that font size. And I haven't been doing anything special to make this happen.

I would look into the possibility of it being an IE issue rather than a Mac - PC issue.

[mab240976]

So you're comparing the results between Fx and Safari on the Mac vs IE on a PC? Have you considered the fact that it could just be IE's box model that's screwing you up?

In all the websites that I've made (a good 50 by now, probably) I've never had much trouble with Fx and Safari rendering different on a Mac than on a PC. Yes, they're slightly different but the positioing has always been relative. So, if the font renders larger, the positioning is still relative to that font size. And I haven't been doing anything special to make this happen.

I would look into the possibility of it being an IE issue rather than a Mac - PC issue.
I appreciate what you are saying but this guy is a perfectionist and wants it to view the same on all browsers. Bit of nightmare situation to be honest as he wants all text and images to line up perfectly.

have a look http://www.ace-propertyfinders.com/TEST/index.html compare the difference on mac and pc if you're able to. At the moment on the mac I've compromised the way it looks so that the PC version on IE works how he wants it.

Must be a way around this??

:)

[Medyman]

I feel your pain. A client that wants all browsers to mimic IE. Ouch! Is he testing in IE7 at least?

Out of curiosity, I did take a look. I can see the minute differences. I'm not sure there is another way than how you're already doing it, I guess. To me the entire logic is wrong. I mean to ingrain broken behavior in your coding, that doesn't make sense to me. I get that your hands are tied by your client, though.

Thank god I haven't had these difficult clients that every posts here about. Well, I've been able to handle them.

Good luck with your site. It's very well made, by the way.

[kepler]

Below you mentioned creating a style.css with the following info. Can you explain the process to do this as I can't seem to make it work. Thanks.
Mark

Then create a style.css that contains:


/*
* Loads the appropriate CSS file based on OS
*/

eval $user_agent = $_SERVER['HTTP_USER_AGENT'];

if ( strstr( $user_agent, 'Mac' ) !== false )
@include 'macstyle.css';
else
@include 'pcstyle.css';
endif

Hi Mark,

Did you download the code from http://www.coolphptools.com/dynamic_css ? After you download the code, add the 3 files in the css directory to your directory that contains the CSS. Please note this code will only work with Apache servers that have PHP installed and are configured correctly. I personally test locally on my PC using XAMPP (http://www.apachefriends.org/en/xampp.html). To see if your CSS is working, put the path to the CSS file into your browser's address box at the top. If you are using FireFox it will display the CSS right in the browser.

Best of luck to you.

[kepler]

Please download the latest version of the dynamic css library (http://www.coolphptools.com/dynamic_css). I fixed a bug where the includes would always execute even in an if statement that was false.