Singling out Internet Explorer with CSS

I am constantly bemused, as I expect most web developers are, at the strange and pointless design choices (CSS bugs) various versions of Internet Explorer feature. Be it the wonderful double margin added when an element is given a left float or flawed interpretation of the CSS box model (for a more comprehensive list of IE related issues visit PositionIsEveryThing.net for an extensive list of IE bugs). So how do you fix issues in IE without breaking your pages in standards compliant browsers?

HTML Solution

Using “special” conditional comment statements you can apply simple logic within your HTML. This logic is only processed by Internet Explorer, because normal browsers don’t need hacked adaptations of HTML comments, and is therefore treated as standard comments and ignored elsewhere.

<!--[if lte IE 6]>Some code just for IE<![endif]-->

The example above targets IE browsers with a version number less than or equal to 6. Within these comments you can include any CSS links, as well as HTML or JavaScript, you want to only be used for IE. For a more complete list of the available syntax you can visit the MSDN web page detailing the use of conditional comments. However, the downside of this method is that you will need to maintain multiple style sheets going forward and users of IE will have to download extra style sheets; haven’t they been through enough already?

CSS Solution

My preferred solution; CSS hacks, but tidy ones. Simply adding any ASCII symbol immediately before a CSS declaration renders it invalid and any good browser will ignore it, true? Well not quite when it comes to IE. Any CSS declarations with a hash prefix are still interpreted by all IE versions as normal CSS – so wherever a fix for IE is required simply follow your normal CSS declaration with another prefixed with a hash symbol for dumb (i.e. IE) browsers. “But the same CSS fix won’t work in IE6 and IE7″ I hear you cry? Of course not, that would be too easy and strangely consistent for IE – in order to target the different versions independently simply prefix another CSS declaration with an underscore to target IE6 and below as IE7 ignores CSS with an underscore prefix. Confused? The snippet below shows how to do this effectively:

div.myClass{
  margin:16px 8px;
  #margin:16px 8px; /* IE7 and below */
  _margin:16px 8px; /* overrides previous style in IE6 and below */
}

A note of caution, be sure to declare your hash prefixed CSS for IE7 before your underscore prefixed CSS for IE6 and below otherwise the hash prefixed CSS will apply to all versions of IE. As for IE8, I’m holding out for a “!” prefix.

An alternative?

Allan Jardine has created an application, available in PHP, C or C#, which allows you to “write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers”. This is achieved at the server by intercepting style sheets called from web pages and parsing additional conditional logic within them. The conditional logic targets CSS declaration at specific browsers by using the User-Agent value in the HTTP request to identify the browser.

a.button_active, a.button_unactive {
  display: inline-block;
  [if lte Gecko 1.8] display: -moz-inline-stack;
  [if lte Konq 3.1] float: left;
  height: 30px;
  [if IE 5.0] margin-top: -1px;
  text-decoration: none;
  outline: none;
}

In my experience this is a very reliable solution to addressing cross-browser inconsistencies and can also be used to compress multiple style sheets. For more information see the Conditional-CSS website.