Code CSS only to Firefox, IE, or Safari

Posted on Aug 14, 2009 in Tutorials

Cross-browser compatibility is, of course, a hassle. However, there are a few “hacks” as they are called, to allow targeting of certain browsers.

While it may be a bit more work, these properties are important for when you need an element positioned differently because of the way that different browsers do or don’t render certain elements in Cascading Style Sheets.

Here’s how to work around the browser rendering differences.

Firefox

As a rule, I tend to code most of my pages to Firefox and then if necessary, update for compatibility with Safari and Internet Explorer. Firefox is standard, and is also becoming more and more popular in the browser battle.

For this code snippet, the #div indicates the element id or name that you want to style.

/*FireFox 2 */
#div, x:-moz-any-link {

margin-top:10px;

}
/*FireFox 3*/
#div, x:-moz-any-link, x:default {

margin-top:10px;

}

Internet Explorer

IE, while likely the most popular browser, can be somewhat of a hassle to design web sites for, since it is not standards compliant. Internet explorer 8 tends to render web sites better than 7, but for 7, there are a few ways to change your CSS.

The first method works with a different style sheet. By detecting the browser, it links to a different CSS file, which is here ie.css (please note there are TWO dashes, not just one).

<!–[if IE 7]>

<link rel=”stylesheet” type=”text/css” href=”ie.css”>

<![endif]–>

The second method is a CSS addition, and is only read from that file by Internet Explorer 7. I tend to use this method more as I like all my elements easy to find and edit together.

Adding an asterisk * before a CSS element makes the other browsers besides IE 7 ignore it.

#div {
margin-top:10px;
*margin-top:20px;
}

This code changes the margin-top property to 20 px if the browser is IE 7, because the other browsers will ignore the information after the asterisk.

There are other ways to target Internet Explorer, but these are the most common, since IE 7 is the most used nowadays and somewhat troublesome at times to code for.

Safari

Like Internet Explorer 7, Safari 3 can be targeted with a browser check or with a CSS “hack.” The browser check works very similarly to that of the IE 7 method provided earlier, but uses javascript.

<script type=”javascript”>

isSafari3 = false;

if(window.devicePixelRatio) isSafari3 = true;

</script>

This CSS method also works very well, but it also works toward Opera 9, so make sure you code accordingly for the most compatibility.

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

#div {

margin-top:10px;

}

}

There you have it! You can now code your sites to look the same or at least display properly in the three most common browsers that tend to start up issues. Feel like you have any more tips to add or any thoughts? Leave a comment and let us know!

Like this post?
Subscribe for more:
RSS Feed
By Email
Or share this post:

Tags: , , , ,

Comments
  • Magda

    Hi,

    I am totally new to CSS. I have made my pages work in IE8 but nothing seems to work in FF? Why is that and how can I update my code to work with FF? Is there a useful publication I could buy?
    Thanks, Magda

    Reply January 26, 2010 at 11:41 am
    • Stephen

      Hey there Magda,
      It really depends on your specific design and what’s not working. If you’re in need of fixing positioning, it could be that there is some discrepancy in your code. You can try checking it on w3c to validate as well – http://validator.w3.org/
      Stephen

      Reply January 27, 2010 at 6:21 pm
Leave a Comment