Hack-free CSS for IE

“Jeffrey Zeldman reports”:http://www.zeldman.com/daily/0204b.shtml that the CSS validator currently regards the “Box Model Hack”:http://www.tantek.com/CSS/Examples/boxmodelhack.html as invalid CSS.


I’m not going to get into a philosophical debate over whether the validator or Zeldman is correct. Instead I’m going to suggest that there is a _better_ way than the box model hack if you want to use style definitions specifically for specific MSIE versions. A way that may make the “IE Factor”:http://www.stopdesign.com/log/2004/01/26/ie_factor.html smaller.
h3. Conditional Comments
MSIE for Windows has for a long time had a feature named “Conditional Comments”:http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp that allows content to be visible only for MSIE. Use of conditional comments instead of other css hacks is simple:
# Create a stylesheet common for all browser, without using any hacks to work around rendering problems in MSIE.
# Create a stylesheet common for all versions of MSIE
# Create a separate stylesheet for each of the MSIE versions you want to target.
# Include the stylesheets from 2 and 3 by using a conditional comment
h3. Conditional comment syntax
The conditional comment is just a specially formatted HTML comment that is picked up only by various flavors of Internet Explorer for Windows. You could for instance use this to apply the “PNG Behavior”:http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
The following conditional comment is being picked up by IE5, IE5.5 and IE6:
==

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

==
h3. Targeting IE5
If you need to target IE5 specifically, you do so by appending a version number:
==

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

==
h3. Targeting IE5.5
If you specifically need to target IE5.5, it’d look like this:
==

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

==
h3. Targeting IE6
The same goes for IE6:
==

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

==
h3. IE5 and IE5.5 – box model hacking
If you need to work around IE5’s broken box model, using conditional comments, you can use several alternative syntaxes.
The first syntax will apply the stylesheet to any version of IE whose version number starts with 5:
==

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

==
Alternatively, you could say that stylesheets should be applied to any IE version whose version number is less than 6:
==

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

==
h3. Order
If you don’t want your IE-specific styles to be overridden by your regular stylesheet, source order is significant; you’d want to specify the common stylesheet first, with the IE-specific versions following:
==

<link rel="stylesheet" type="text/css" href="common.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

==
h3. Added bonus: (More) Accurate browser statistics
By using conditional comments you also get a more accurate measurement of browser versions.
* A browser that identifies itself as MSIE but really is another browser will not fetch the stylesheets specifically for IE. This can be used to get accurate reports on “MSIE overreporting”:http://virtuelvis.com/archives/2003/02/properly-measuring-msie
* If you use separate stylesheets for each version of IE, you can get an accurate report on which versions of IE people actually use, without error sources such as bots and browsers faking their identity.
h3. Valid
The perhaps most reassuring part of this technique is that your main CSS and your carefully authored HTML/XHTML documents will remain valid until the end of time.
h3. Update
If you are running multiple versions of IE, “read the update”:http://virtuelvis.com/archives/2004/02/multiple-ie-problems

26 Comments

  1. I agree that conditional comments is a lot more elegant as a solution to the broken box model (and other non-working IE stuff) than the aural CSS hack.

  2. I’m trying to use this technique but the CSS doesn’t seem to load for me in IE 5.5.
    I couldn’t find your e-mail here, so please contact me and I’ll mail you the URL of the site I’m working on. Thanks.

  3. I never used the Box Model Hack. Whenever I need to correct something for IE, I add incremental overrides, like so:

    div {...} /*style for all*/
    * html div {...} /*style for IE*/
    

    Easy to track via site-wide search. I always know where I have IE hacks, and never worry about replacing them. IE overrides are thus never mixed with the proper CSS, are always just below the rule I need to override, and are always working, not to mention that I don’t need to pollute the markup.
    I don’t see the reason for BMH, and it is the last thing I would recommend to newbies or intermediates in CSS. Sadly, this hack is very popular, for no reason.
    Besides, the validator has many, many bugs. So many, that I have stopped validating my CSS more than half a year ago. Yet I find it amusing that only now “all of a sudden” everyone is talking about it.
    M.

  4. Browser Specific “Override” Stylesheets with PHP

    I tried using the technique recommended in the comments, but couldn

  5. IE5 is IE5 except when it isn’t

    Arve Bersvendsen on hack-free CSS for Internet Explorer: IE5 is IE5 except when it isn’t……

  6. Conditional comments supersede the box model hack for IE

    http://www.virtuelvis.com/archives/158.html

  7. CSS hack – eller ikke?

    W3C har gjort endringer i CSS-validatoren. Det går ikke upåaktet hen. Arve Bersvendsen kommer med alternative løsninger….

  8. Brian

     /  2004-03-04

    Another approach is to use IE’s CSS-BE support:

    width: 300px;
    /* any IE */
    width: expression('312px');
    /* IE 5.x */
    width: expression( document.implementation ? '100%' : '40%' );
    /* IE 5.0 only */
    width: expression( document.body.contentEditable!='inherit' ? '200px' : null );
    /* IE 5.5+ */
    width: expression( document.body.contentEditable=='inherit' ? '100%' : null );
    /* ad infinitum... */
    
  9. jay

     /  2005-09-10

    just caught this article cause i’m trying to fix problems in ie without hacking away too much. have the latest version of 6 and the conditionals just aren’t working.

  10. Jay: Do you have a specific example, so I can investigate?

  11. jay

     /  2005-09-10

    wow! thanks for the quick reply!
    the exact markup was (in the head tag)
    ==

    <!--[if IE]>
    @import url(ie-styles.css);
    <![endif]-->

    ==
    just like in your article. verbatim. also tried with the standard link rel for loading the stylesheet.
    the way i tested to see if it was loaded is by adding a h1 definition in the ie file with a ginormous font size. h1 wasn’t defined in the global stylesheet.

  12. Jay, your example is invalid: The conditional comment syntax is a HTML/markup construct, and cannot be used inside @@, nor can it be used in CSS files. Thus, the correct way would be:
    ==

    <!--[if IE]>
    <style type="text/css">
    @import url(ie-styles.css);
    </style>
    <![endif]-->

    ==

  13. jay

     /  2005-09-10

    totally makes sense now. i should have caught that. thanks so much for the help!

  14. Jeff Rechten

     /  2005-09-30

    Wow, this is awesome. I saw a webpage using this for the first time today, and I’m wondering why I haven’t seen this in more pages. Are there any drawbacks to using this method?

  15. Jeff: None whatsoever. This is the only hack to target IE that I would consider safe.

  16. Thanks for this article. I came across it on while doing research on a wikipedia article on the box model hack.
    I also found an article from Microsoft with more details on the use of the conditional comments:
    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

  17. One question: Isn’t it smarter to link to the different stylesheets dynamicly with php depending on the useragent sent by the browser?
    Only the people faking their useragent are a problem. But I think these users are to bear the blame themselves.

  18. Serpedon: Any decision based on the user-agent string is a bad decision. Period.

  19. Hi all. I am very new to css, and making wesites at all for that matter, (started less than a week ago), and I am having problems with the way my pictures gallery shows up in IE. I came across this site and tried the conditional format above. I setup a new stylesheet just for IE, and got everything working right for both IE and Mozilla when I would preview it from HTML-Kit (awesome, I was stoked). Then I uploaded it to my host, and went to my website. Everything looks the same for Mozilla, but in IE it still looks like crap. I rechecked everything, uploaded files several times again, still now good. Works fine in previews, but not on my actual site. Any idea what is going on? Here is the code I am using:
    ==

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

    ==
    p. styles.css is my generic styles which is setup for mozilla.
    Thanks For Your Help,
    Mike

  20. Ok, apparently I can’t just type code in this box, it doesn’t show up. Told ya I was new to this. Anyways, I have my generic stylesheet listed first, and then I have the 1st conditional comment from this page after that. Like I said, works like a charm when I test it, but once I uploaded all the files, it doesnt seem to work.
    Thanks,
    Mike

  21. doh, now the code shows up

  22. Mike: Posting HTML with comments inside is non-intuitive. I fixed it manually.

  23. Paolo

     /  2005-12-20

    Hello I tried the code and i found it very usefull, I just want to point out that the corretct code conditional is

  24. ferpont

     /  2006-02-22

    I tried the code and didn’t work (I must say I’m a newby) I must be doing something wrong.. this is what I did:
    ==

    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Pompi Gutnisky - Photographer</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <!--[if IE]>
    <link href="all_IE.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    

    ==
    p. I does not catch the IE stylesheet…

  25. Naza

     /  2006-04-15

    I must say thank you to all those of you who have put forth your minds. I am so tired of making my pages look great in firefox and safari just to be disappointed by IE.
    Is there a program out there that will generate CSS specific to IE. I ask this because I am using GoliveCS2 and like I said,looks fine in Firefox and safari. For some reason IE wants to center EVERYTHING. I should also mention that I am very new to CSS.
    If any of you have an suggestions of a more appropriate method / theory of creating CSS, i would greatly appreciate it.
    body { font-size: small; background-image: url(../images/bk.gif); background-repeat: repeat-x; background-attachment: scroll; }
    p { text-align: left; }
    td { font-style: inherit; }
    a:link { }
    a:visited { }
    a:hover { }
    a:active { }
    #title, #title a { color: #fff; font-size: 30px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-style: italic; text-decoration: none; border-bottom: 1px solid #069; }
    #title a:hover { color: #fff; text-decoration: none; border-bottom: 1px solid #fff; }
    h1 { color: #069; font-size: 23px; font-weight: bold; font-style: italic; }
    code { color: #f30; }
    #page_title { color: #069; font-size: 26px; font-weight: bold; font-style: italic; }
    #content { background-color: #fff; }
    #foot_cc { color: #686868; font-size: x-small; text-align: center; }
    #foot_cc a { color: #73738c; }
    #foot_cc a:hover { color: #fff; }
    span { font-size: small; }

  26. OK, here’s a challenge:
    Is there any way I can do something similar to conditional comments _within_ a css?
    Trouble is, I don’t have access to the html of my Pbase galleries. My only option of customizing, is through css. I use a hover command in my css, which is not supported in IE (not a link), but works well in Firefox and Safari, (the browsers I use myself). When the hover command doesn’t work (i.e. in IE) the text under my thumbs never appears, which is a problem.
    http://www.pbase.com/olafdk