Targeting different pc and mac separately and calling different stylesheets

StackOverflow https://stackoverflow.com//questions/10694735

  •  12-12-2019
  •  | 
  •  

Question

First a link to the site: www.fish-fry.com

I know this is considered bad practice, but I have been dealing with this issue for about a months, the site I've built is now 100% finished except for this issue and I can't get paid until it's resolved.

When viewing from Mac, site looks good on all major browsers, when viewing from PC, my navmenu and search bar input are 2px lower.

I've found some code that seems like it will let me call different stylesheets pending the platform, but it's not working for me, wondering if anyone here has any insight:

<script type="text/javascript">
} if (navigator.userAgent.indexOf('Windows NT')) {
    document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style-windows.css" />');
}
else {
    document.write('<link rel="stylesheet" type="text/css" href="<?php     bloginfo('template_directory'); ?>/style.css" />');
}
</script>

Any help is greatly appreciated!

@sarnold, no validation errors.

Though removing the closing bracket did not seem to work either. Originally it screwed how things looked on a mac, so I changed it to this: 

<script type="text/javascript">
if (navigator.userAgent.indexOf('Windows NT')) {
    document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style-windows.css" />');
}
elseif (navigator.userAgent.indexOf('Mac OS')) {
document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />');
}
</script>`

but, when I open chrome or firefox from Windows, it's still reading from the default stylesheet.

Is anyone familiar with the script above? Not sure why my PC is still referencing the Mac stylesheet. Thanks in advance for any help!

I've tried this script too, seems that still, both platforms are only referencing 'style.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="external" //Specify type of CSS to use. "Inline" or "external"

var mac_externalcss='http://www.fish-fry.com/dev/wp-content/themes/FISH-FRY-MUSIC-AND-SOUND-CUSTOM-THEME/style.css' //if "external", specify Mac css file here
var pc_externalcss='http://www.fish-fry.com/dev/wp-content/themes/FISH-FRY-MUSIC-AND-SOUND-CUSTOM-THEME/style-windows.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>

Any help? This is driving me bananas :|

No correct solution

OTHER TIPS

Your problem is the stray closing brace at the beggining of the script

As a suggestion for future projects, you may want to use reset stylesheets to synchronize all browsers. This will help avoid viewing headaches. Any of these are a good starting point:

Yahoo's reset is probably the oldest and most outdated. Search for most recent, most popular reset stylesheets in the past year for the poison of your choice.

I guess from the comments above that you found the problem in the stylesheet and fixed it - which is great news.

But for those situations where it's the browser which is buggy, the approach used by the developer of Thematic is really elegant:

They have created a nice bit of code in the theme which adds styles to body that you can hook styles into throughout the site if you need. Here's a real example:

<body class="home page page-id-5 page-template-default windows firefox ff1">

That means you can have one stylesheet with css like:

.firefox #menu { margin-top: 2px; }
.IE6 #menu { margin-top: 4px; }

If you want to play with different user agents check out the Thematic theme website or if you prefer go to my website.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top