Archive | May, 2011

IE Only CSS

15 May

Target IE only with CSS – the easy way

Using the methods below, you can target IE only with CSS. This is very useful, as many times Internet Explorer and Firefox display pages differently, and it is much easier to write different code for the browsers than to try to use weird hacks to fix IE bugs.

Easy Method #1

This will allow you to target not only IE, but also different versions of IE. Does it work in IE 6 but not IE 7? This is the best way to fix it!

Add the following code in the <head> section of your page, and create the linked CSS files (ie.css) and upload them.

IE only

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

IE 6 only

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

IE 7 only

<!--[if IE 7]>

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

<![endif]-->

Less than IE 7

<!--[if lt IE 7]>

<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

Greater than IE 6

<!--[if gte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

It should be noted that this only applies to IE. So you’ll want to code for Firefox, then override it with these CSS files. The best way to do this is be more specific. So if you want to override a navigation link:

Normal CSS for Firefox

#nav a { padding: 4px; }

CSS in ie.css

#container #nav a { padding: 6px; }

Quick IE 6 hack

If to only need to apply css to internet explorer 6, use this simple hack in your normal css file:

Add “* html ” in front of any declaration

* html a { font-color: #000; }

This will only be used by IE 6

IE Targets

15 May

IE8 and Below

The key to targeting Internet Explorer 8 and below, with a hack, is to append “\9″ to the end of your style. For example:

  1. body {  
  2.  colorred/* all browsers, of course */  
  3.  color : green\9; /* IE8 and below */  
  4. }  

It’s important to note that it must be “\9″. Unfortunately you can’t replace this with something along the lines of “\IE”, like I attempted to do so. Even “\8″ won’t work; it must be “\9″.

IE7 and Below

As we learned in the quick tip from January, we can use the * symbol to target IE7 and below, like so:

  1. body {  
  2.  colorred/* all browsers, of course */  
  3.  color : green\9; /* IE8 and below */  
  4.  *color : yellow/* IE7 and below */  
  5. }  

IE6

Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.

  1. body {  
  2.  colorred/* all browsers, of course */  
  3.  color : green\9; /* IE8 and below */  
  4.  *color : yellow/* IE7 and below */  
  5.  _color : orange; /* IE6 */  
  6. }  

A Note About CSS Hacks

It’s worth noting that I’m not advocating the use of hacks in your stylesheets in any way. On the contrary, you should almost always use conditional comments. However, that doesn’t mean that it isn’t helpful to know what you can technically get away with, whether it be for debugging, or showing off to your friends!

The biggest concern is that hacks aren’t future proof, at least not really. For example, what if, with the release of Firefox 4, they, too, recognized properties prepended with the * hack. They probably never would for compatibility reasons, however, if they did, that could potentially ruin a portion of your layout. Ultimately, just be wise when using hacks. If you only need to change one or two properties to make IE6 happy, then I don’t see any harm in using the underscore hack directly in your stylesheet. The world won’t end. However, if there are a handful of changes, be sure to use conditional comments!

  1. <!–[if lte IE 7]>  
  2. Make IE7 happy.  
  3. <![endif]–>  

Thanks for reading and watching!