Dave Woods - Freelance Web Design Warwickshire

IE CSS Conditional Comments

Consistency across browsers is obviously extremely important and Internet Explorer 6 just won’t go away so unfortunately from time to time we need to use hacks to get around certain bugs and that’s where conditional comments can come in extremely useful.

I’ve stayed away from using conditional comments in the past mainly due to bad experiences of using browser sniffing in the past but having used them on a project recently I can see their advantages.

How to use conditional comments

Before you get carried away and start filling your HTML code with conditional comments, I’d like to be clear that they shouldn’t be used to litter your markup and hack at the HTML code until the presentation looks right in IE6.

Conditional comments should be used simply to include a separate CSS style-sheet which you can then use to target a specific browser with CSS applied to the same HTML.

IE6 conditional comments

Ok, so here’s the important part. You’ve written an HTML page, included a CSS style-sheet and now IE6 is causing problems.

You could use a hack (* html) to target IE6 but this can lead to a clutter of CSS with hacks in amongst the rest of your CSS.

However, using the following you can create a stylesheet that only gets included for IE6

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

This code will only target IE6 so any code can easily be placed in ie6.css safe in the knowledge that no other browser will implement this fix.

But what about IE5 and IE5.5

The good news is that it supports all Internet Explorer versions from version 5 upwards and can even be used to include greater than, greater than or equal, less than and less than or equal comments.

Conditional comments for a specific version of IE

Conditional comments for IE

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

Conditional comments for all versions of IE5

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

Conditional comments for IE5

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

Conditional comments for IE5.5

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

Conditional comments for IE6

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

Conditional comments for IE7

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

Other conditional comments

Greater than

<!--[if gt IE 6]>
<![endif]-->

Greater than or equal to

<!--[if gte IE 5]>
<![endif]-->

Less than

<!--[if lt IE 6]>
<![endif]-->

Less than or equal to

<!--[if lte IE 5.5]>
<![endif]-->

Summary

As you can see from the options above, you should be able to target the specific IE browser that is causing those inevitable problems. However, I’d encourage you not to go overboard, always validate your HTML and CSS and ensure that there isn’t an easy work around first.

I’d also suggest that targeting Internet Explorer 6 will usually be enough to solve the majority of problems although if support for Internet Explorer 5 and 5.5 is required then you may also need to include a less than IE6 comment to cater for the box model problem.

Personally, I’d still considered this to be a hack so use conditional comments sparingly and only where they’re absolutely necessary but for those browser bugs that are well known it’s an excellent solution.

12 comments on “IE CSS Conditional Comments

  1. rexus

    Thanks Dave for the useful material. Just the thing I need. But I did face a problem.

    If I place this codes

    e.g.

    inside a Dreamweaver template I notice that the codes get greyed out… (that would mean a comment) and if the directory structure changes, the paths does not get updated. Help

  2. rexus

    Thanks Dave for sharing the information. I did learn a lot on implementing base tags. But this does not solve my problem as the rest of the site including CSS uses document relative paths.

    I must be dumb but all I had to do was change the links to site relative paths. You could alternatively use absolute paths.

    Hopes this helps someone else.

  3. dyedaysiche

    BASINGSTOKE, England and CAMBRIDGE, Massachusetts, July 15, 2008 /PRNewswire-FirstCall/ — Shire restricted , the extensive specialty biopharmaecutical Bew Zealand, notes that Jerini AG has announced today that the European Commission has granted the retinue marketing authorization for its round combination FIRAZYR(R) (Icatibant) in the treatment of critical attacks of genetic angioedema (HAE). HAE is a debilitating and potentially sprightliness-intimidating genetic blight characterized by insitnctual and recurring aattacks of edema.

    As announced by Shire on 3 July, 2008, Maia Elfte Vermogensverwaltungs-GmbH, to be renamed “Shire Deutschland Investments GmbH”, a German wandering subsidiary of Shire reduced, has launched a unasked apparent takeover suggest for all apportionments in Jerini AG. Jerini’s managerial and supervision Boards unanimously second the annals and are recommending acceptance of the bid to its allotmentholders. submissive to to finishing of undoubted cut-price and win agreements and regis
    tration of the newly issued cuts, Shire discretion receive rights to nearly 75% of Jerini’s cut cap previously the reception of any takeover step acceptances. It is antticipated that the step last wishes as be communicate for acceptance by the unused cutholders until the end of Q3 2008 and is contingent upon the dischargeof undoubted everydzy terms and conditions, including put one’s imprimatur on by appropriate combination power authorities.

  4. Andy

    After having problems getting conditional comments to work with Dreamweaver templates I thought I’d share the following:
    Pages based on DW templates DONT change the path to css or javascript inside conditional comments. So if your ccs, javascript and templates are in the css, js and templates folders respectively you will need to change their references like this (absolute paths are not necessary):

  5. werutzb

    Hi!

    I would like improve my SQL knowledge.
    I red really many SQL resources and want to
    get more about SQL for my position as db2 database manager.

    What would you recommend?

    Thanks,
    Werutz