Showing CSS to IE only (The Underscore Hack) [Update]

This page details an inline CSS hack for Internet Explorer 6 on Windows. You can also find an extended version of this hack that works for Internet Explorer 6, 7 and 8.

The best idea, however, would be to serve a separate stylesheet for each browser you’re hacking to.

Recently, I stumbled upon (via Mr. van Kesteren) the best CSS “hack” you’ll ever use in CSS sites.

It allows you to show CSS to Internet Explorer only, omitting Mozilla, Safari and Opera.

This is different from conditional comments in the following way:

  • It allows you to write conditional CSS directly in your stylesheet file, and doesn’t require inline styles
  • It works for IE 5.0, 5.5 and 6.0
  • It’s a hack
  • It’s very simple to work with.

The hack is called the “Underscore Hack”, and apparently it’s been around for a while. For the benefit of those of us who didn’t know about it, I’m posting it here:

body {
    background: green; /* show to Mozilla/Safari/Opera */
    _background: red; /* show to IE */
}

Cons

Sample Page

View sample page, including CSS

More Information on CSS filtering

John Serris has done an indepth write-up on various other methods of filtering CSS. It is definitely worth a visit:

Managing CSS Hacks

49 thoughts on “Showing CSS to IE only (The Underscore Hack) [Update]”

  1. It looks too good to be true! The stylesheet won’t validate, though?

  2. Joen says:

    No, I’m pretty sure the CSS won’t validate. I should probably add that to the article.

    I also just remembered: what about macs? I haven’t been able to test it on any macs or their browsers. If anyone can do so and leave a note?

  3. Jeff says:

    I always prefer the hack below:

    `* html body {

    background: red;

    }`

  4. Joen says:

    Nice one, but would you be able to do this:

    Moz, Saf, Opera:

    .box {
    width: 340px;
    }

    IE:

    * html .box {
    width: 300px;
    }

  5. Jeff says:

    I don’t see why not?.

  6. Joen says:

    Hmm, yes, that does work! Good hack Jeff, why didn’t I hear about that either?

    However, unless this hack validates, I don’t see how it’s preferred over the underscore hack—the latter being much simpler to integrate in the CSS.

  7. Jeff says:

    It does validate ;).

  8. Chris says:

    Good hack Jeff, why didn?t I hear about that either?

    Joen , do you get the feeling the despite the fact that you and I are two wild and crzy guys that someone has been holding out on us?

  9. Joen says:

    Joen , do you get the feeling the despite the fact that you and I are two wild and crzy guys that someone has been holding out on us?

    Oh most definitely! How come no-one told me about these hacks!?

  10. steve says:

    Can these hacks be platform specific too?

    I have a site I’m developing and for some reason IE on a PC blows the nav 200 px to the right, on MAC, IE puts the nav where it should be buts puts the unordered list back into a list with no decoration.

    These hacks would be a perfect solution if I could define the platform too.

    You can see for yourself the site if you have IE…

    http://www.fifthroomcreative.com/oracle/site

    Thanks,

    Steve

  11. Joen says:

    Steve,

    Yes that is possible.

    My suggestion would be to first of all, design the site so it works in Firefox or Safari—that way you’ll know that the CSS is like it’s supposed to be.

    Then apply the hacks. The underscore hack will show the CSS to IE Windows only, so you could do something like:


    .navigation {
    width: 200px; /* the right width <strong>/
    _width: 300px; /</strong> width shown to buggy IE, overwrites prior value <strong>/

    }

    To show CSS specific to IE/Mac (I’m guessing this is version 5.2?), you can use the band pass filter hack to further show CSS:


    .navigation {
    width: 200px; /</strong> the right width <strong>/
    _width: 300px; /</strong> width shown to buggy IE, overwrites prior value <strong>/
    /</strong>*//*/
    width: 400px;
    /**/
    }

    In this example, Firefox and Safari should read a 200px width, IE/Win should read a 300px width, and IE/Mac should read a 400px width.

    Just fill in the right values, I just chose “width” as an example.

    Edit: On first attempt I wrote faulty code, fixed it.

  12. steve says:

    Joen,

    Thanks… Works great in Mozilla, Firefox, and Safari, just IE on both platforms throws funky things at me. Thanks for the tips… I’m going to put them into action tonight. I’ll let you konw how it goes.

    Steve

  13. Jonas Rabbe says:

    Oh most definitely! How come no-one told me about these hacks!?

    It’s like fight club, although I fear I have already said too much…

  14. John Serris says:

    Recently I’ve started handling my css hackage the following way:

    Create 1 master style sheet (linked normally in the html head) that only contains IMPORTS like so:


    @import "all.css";
    /**/ @import "ie-pc-hacks.css"; /**/
    /**//*/ @import "ie-mac-hacks.css"; /**/

    First import is for all browsers (all lines are ignored by old browsers like NN4 which don’t support this import syntax).

    Second line imports a style sheet containing a mixture of * html hacks for ie 5+ PC and this hack for ie 5 css that differs from ie6. This is hidden from IE MAC via the comments.

    Third line imports hacks for IE MAC. No other browser imports this style sheet due to the IE5 MAC band pass filter.

    I use this method on my own site right now. Seems to work well.

  15. Fabian says:

    One thing about validation:

    According to this website it should validate against CSS 2.1 specifications.

    BTW I like this hack BECAUSE it is only for IE-Win. IE-Mac does not really act like an IE and therefore most of the hacks have to be hidden from IE-Mac.

  16. Supahank says:

    I use the star hack: instead of an underscore, using an asterisk in the same way. But someone told me that the page renders quicker with the underscore…do you know if this is true?

  17. Joen says:

    Supahank, I suppose that is true… after all, the underscore hack requires much less code to achieve the same, so the filesize should be smaller: hence faster loading.

    On the other hand, we’re talking a few bits… I don’t think anyone will notice the difference.

  18. ryan says:

    Thanks for this. Just what I needed for a problematic page I have been working on tonight. Two underscores just solved the problem! Thanks again.

  19. melanie says:

    I just want to say, thank God!!!!!!! I was getting ready to hang myself above my desk. It worked great, thanks!!!!!!

  20. Ken says:

    I’d just like to say that I love the design of your site. Truly talented you are! The hack is great as well!

  21. Zeke says:

    I used the underscore hack with my new forums, and I must say, it worked as advertised. While there are better ways of doing it, this is the easiest. And I don’t care about my css validating (it’s difficult enough for me to keep my pages validating!)

    Thanks! =]

  22. It must be noted that IE 7 doesn’t like it much.

    IF IE statements are much prefered (alas, but true!).

  23. Simon says:

    Nicely done, I knew abotu this before, just googled for it because I couldnt remember how. An underscore, so very easy… works because in css an underscore is a comment while IE isnt css compliant and ignores it. I wonder if that is why microsoft kept it?

  24. ceronne says:

    thank you .. u helped me a lot

  25. v says:

    Doesn’ seem to work in the newest version of ie (6.0.2900.2180 sp2)

  26. Jesse says:

    Works for me on that version of IE just fine.

  27. VAInternet says:

    This works better for us

    padding-top:12px;

    *padding-top:14px;

    padding-bottom:13px;

    *padding-bottom:10px;

  28. BAM says:

    Wow, this is one of the best tips I have EVER come across. Seriously, if I only knew this a year ago, days of my life would have not been lost! Thank you for sharing this! Awesome!

    I am using in this way: _height:100%; _overflow-y:auto;

    …so that I can use position:fixed bottom:0 in IE

  29. I love this trick, and miss it in IE7 🙂

  30. nice tip, works in IE7 and IE8 beta 2 ( Browser Mode: IE7 / IE8 compatibility view / IE8 with Document Mode:Quirks ( Page Default ) ) also.

  31. c says:

    it is compatible with ie7 and ie8 in quirks mode as I mentioned above. This means you need a non valid HTML page 🙁 for this to work.

  32. webdesign says:

    Great hack! Nice it works in IE8 too. care if it’s not valid, as long as it works 🙂

  33. Thanks Dear,,,

    Its really works

  34. This is rather outdated. Please, please use conditional comments. They are far, far, less likely to break things in the future. (As long as you don’t target future IE versions)

    Read more about it at sitepoint: http://reference.sitepoint.com/css/conditionalcomments

  35. Prasad says:

    I’m not able to use this hack, as it is not working with my IE7 version 7.0.5730.11

    How come?

    1. Joen says:

      Because the underscore hack is for IE6 only.

      You can use these hacks for IE7:

      http://noscope.com/journal/2008/11/ie6-ie7-inline-css-hacks

      though you should consider using a separate IE7 stylesheet using conditional comments:

      http://noscope.com/journal/2004/04/ie-conditional-comments

  36. Found a lovely underscore hack for IE specific CSS. This will be very handy! http://bit.ly/1z1FDh

Comments are closed.