Target Operating system with CSS?

Question

My understanding is that such a thing is impossible. But a website I developed for a friend renders differently in Chrome for Windows 7/8 vs Chrome for Mac OS X.

Link to Site in Question: Phillip Elder Music

Note the hanging off of the Contact tab in one of the versions.

Rendering in IE9 showed the same problem, but I was able to create an IE specific sheet that aligned everything.

Here is the CSS used by Chrome currently. Please let me know how I can have the bottom align on both operating systems.

    /*________Navigation and Body_________*/
body {
    background-image: url(../images/drumKeyboard.png);
    background-color: #fbfbfb;
    background-size: 960px 208px;
    background-repeat:no-repeat;
    background-position: top center;
}

nav ul {
    font-family: 'Cabin', sans-serif;
    list-style: none;
    text-align: right;
    margin-top: 30px;
    margin-right: -15px;
}

nav ul a {
    text-decoration: none;
    color: black;
}

nav ul li:hover {
    background-color: black;
    color: #fbfbfb;
}

nav ul li {
    padding: 3px 20px 6px 0px;
    margin-left: 25px;
    margin-bottom: 3px;
    border-radius: 13px 0px 0px 13px;
}

img.logo {
    border: none;
    height: 180px;
    width: 180px;
}

/*________Content________*/

.tabs .active {
    color: #fbfbfb;
    position: relative;
}

.tabs .active li {
    background-color: black;
}

.panelContainer {
    clear: both;
    margin-bottom: 25px;    
    padding: 10px;
    font-family: sans-serif;
}

.panel p {
    color: black;   
}

/*_________Unordered Lists CSS______*/

ul.upcoming {
    list-style: none;
    margin-left: -40px;
}

ul.upcoming li {
    margin:31px 0px 0px 0px
}

ul.media {
    list-style: none;
    margin-left: 0px;
}

ul.media li {
    margin:24px 0px 0px 0px
}

ul.works {
    list-style: none;
    margin-left: -40px;
}

ul.works li {
    margin:24px 0px 0px 0px
}

/*____________Link CSS_____________*/

a {
    border: none;
    color: #73b3e1;
}

a:visited {
    border: none;
    color: #73b3e1;
}

a.media {
    border: none;
    color: #000000;
}

a.media:visited {
    border: none;
    color: #000000;
}

/*__________Images CSS___________*/

img.follow {
    border: none;
    height: 70px;
    width: 320px;
}

img.social.first{
    border: none;
    padding-left: 40px;
    padding-right: 20px;
    width: 8%;
}

img.social.middle{
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    width: 8%;
}

img.social.last{
    border: none;
    padding-left: 20px;
    padding-right: 40px;
    width: 8%;
}

Can you provide screenshots of the problem ? Also : targeting IE width conditional comments won't work anymore on IE10. — mddw, Feb 24 '13 at 19:06
Try validating your html http://validator.w3.org/check?uri=http%3A%2F%2Fphillipeldermusic.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 — graphicdivine, Feb 24 '13 at 19:32
Trying to feed specific styles based on OS is just asking for trouble. — cimmanon, Feb 24 '13 at 20:56

score 1 · Accepted Answer · edited May 23 '17 at 12:07

You can use msie conditional comments to target different msie versions:

<!--[if IE 7]><body class="lt-ie10 lt-ie9 lt-ie8 ie7"><![endif]-->
<!--[if IE 8]><body class="lt-ie10 lt-ie9 ie8"><![endif]-->
<!--[if IE 9]><body class="lt-ie10 ie9"><![endif]-->
<!--[if gt IE 9]><!--><body><!--<![endif]-->

You can use some media queries inside css to filter webkit/moz:

@media screen and (-webkit-min-device-pixel-ratio:0) {

    button>span+span, .button>span+span {
        margin-left: 7px;
    }

}

And for everything else, you can use javascript to find out things like jQuery/Javascript to detect OS without a plugin?

But, the thing is, try to fix it without all that stuff first.

UPDATE:

You are wrapping li's with a's, maybe that's why you are getting inconsistent behavior.

Try this: http://jsfiddle.net/cwNKX/1/

HTML

<div id="menu">
    <div>
        <a href="#">Home</a>
        <a href="#">Biography</a>
        <a href="#">Works</a>
        <a href="#">Media</a>
        <a href="#">Contact</a>
    </div>
</div>

CSS

#menu {
    position: relative;
    width: 587px;
    height: 208px;
    background: #fbfbfb url("http://phillipeldermusic.com/images/drumKeyboard.png") no-repeat -1522px 0;
}

#menu div {
    position: absolute;
    bottom: 0;
    right: 477px;
    width: 110px;
}

#menu a {
    display: block;
    padding: 5px;
    text-align: right;
    font-family: Cabin, sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    color: #000;
    border-radius: 15px 0 0 15px;
}

#menu a:hover {
    color: #fff;
    background-color: #000;
}

#menu a + a {
    margin-top: 3px;
}

And btw, resize that background image.

Mitya · Answer 2 · 2013-02-24T20:43:45.587

This is not possible in CSS alone. Instead, detect browser via JavaScript and act accordingly.

One common means of doing this is to have JavaScript add body classes denoting browser, browser version, platform, or whatever. Something like BAPS does this for you (inspect the DOM on the demo page and you'll see the body classes it's added).

So for example if you wanted to add some styles only for users on Mac Opera, you could include the BAPS JS script into your page then write the following in your CSS:

.opera.platform-macintel .some_class { /* styles only for Opera on Mac */ }

score 0 · Answer 3 · answered Jun 19 '14 at 16:03

Forget to fix the symptons. Go for the cause. This article will tell you everything you should know about this problem: PNG gamma correction.

The most useful solution is to stripe color profiling from the PNG image. I've done that with

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

pngcrush official site

Target Operating system with CSS?

3 Answers3