Grow your CSS skills. Land your dream job.

How To Create an IE-Only Stylesheet

Published by Chris Coyier

ie-only-css.gif

This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you've had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can't predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Why use conditional stylesheets?

  • You got problems, they need fixin'
  • Keeps your code hack-free and valid
  • Keeps your main stylesheet clean
  • Perfectly acceptable technique, sanctioned by Microsoft

And remember, these conditional tags don't have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.

The Code

This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that's just regular ol' HTML comments. Then between the brackets, "IF" and "IE" should be fairly obvious. The syntax to note is "!" stand for "not", so !IE means "not IE". gt means "greater than", gte means "greater than or equal", lt means "less than", lte means "less than or equal."

Note that IE 10 and up DO NOT support conditional comments at all.

Target ALL VERSIONS of IE

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

Target everything EXCEPT IE

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

Target IE 7 ONLY

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

Target IE 6 ONLY

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

Target IE 5 ONLY

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

Target IE 5.5 ONLY

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

Target IE 6 and LOWER

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

Target IE 7 and LOWER

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

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

Target IE 7 and HIGHER

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

Target IE 8 and HIGHER

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Target IE 10

Read this.

Universal IE 6 CSS

Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

Hacks

If you must...

IE-6 ONLY

* html #div { 
    height: 300px;
}

IE-7 ONLY

*+html #div { 
    height: 300px;
}

IE-8 ONLY

#div {
  height: 300px\0/;
}

IE-7 & IE-8

#div {
  height: 300px\9;
}

NON IE-7 ONLY:

#div {
   _height: 300px;
}

Hide from IE 6 and LOWER:

#div {
   height/**/: 300px;
}
html > body #div {
      height: 300px;
}

Argument against conditional stylesheets

We shouldn't need them. They are against the spirit of web standards.

Argument for conditional stylesheets

Yeah, but we do need them.

Additional Resources

Comments

  1. While I agree that using hacks for IE is a dirty method, I would personally not agree that using the IE 6 and IE 7 selectors (*html, * etc) as I think they are useful and help you get your design closer to pixel perfect.

    In regards to the min-height/ min width issue I personally use a hack (read about it hear) as it makes my life easier…
    Pretty much the only other hack I will use would be for pngs for ie6 (also read how I used it hear)

    • Permalink to comment#

      Your links didn’t seem to work dude, but i’m guessing you mean the expression used for min-width/height in ie6 which i do personally use, along with the ‘background:none;filter:progID:DXImageTransform’….etc. stylesheet fix for png’s – which i also use, i can’t see a tidier way to do both of these and i do believe they are both fine to use also.

  2. btw I would be interested in your tips on how to get around these problems without the hacks I mentioned above…

  3. Romz
    Permalink to comment#

    What a great post. I already knew the technique and I even use it, but it’s well explained ! Grreat job !

  4. Nice work Chris, keep ‘em coming.

  5. Hey Chris.. Find this article really useful.. Well done!

  6. Permalink to comment#

    Hey thanks this is just what I needed! God I hate IE!

  7. Permalink to comment#

    You know micro-s did that on purpose. Now that bill jumped ship maybe they can get there act together. also pass word protect the registry micro-s! Nice work on Your sites Chris and i Love Portland O.

  8. enrique
    Permalink to comment#

    very useful post, thank you for instructing people on the best practices for css.

  9. Ace_ov_Spade
    Permalink to comment#

    the underscore hack like [ _height: 300px; ] works with non IE-7. but one problem: [ _height: -300px; ] doesnt work

  10. Permalink to comment#

    * html #div {
    height: 300px;
    }

    For IE7 only?

    Never used it – I go for

    *:first-child+html "selector here" {
    height: 300px;
    }

    And this is what I'd use for IE6:

    * html "selector here" {
    height: 300px;
    }

  11. Permalink to comment#

    Thanks for the post. I’m going mad with IE8! Is there a way to create a separate sheet with only the hacks, which would be opened and overwrite normal CSS if IE? Not having much luck :(

  12. Adam
    Permalink to comment#

    Thank you for the conditionals! Helped me out of a bind.

    (It might just be me, but you might want to check this page in IE6. Each person’s tiny-image is covering up their name and part of their text.)

  13. Damn, another hacking IE post :) Well, these hacks do work sometimes, so thanks for listing them Chris! Cheers!

    ~ K.

  14. Nice post … really beneficial
    Thanks for sharing
    but i have a query …….Is there any CSS property to make font smooth in IE?
    waiting for reply

  15. Why is it that lately anything with the Microsoft brand name is failing to meet the standard. Zero day exploits, critical patch Tuesdays, IE hacks. It is hard to image that a company with deficient products is still in business.

    I guess it goes to show the lack of innovation and ingenuity of Redmond.

    • Permalink to comment#

      Come on now. We don’t need to rip on Microsoft. Have you seen IE 8? It doesn’t do so bad at rendering pages and it’s a heck-of-a-lot more secure than previous versions. As for critical patch Tuesdays — let’s just say there are people working against you when you have 85% of the market. Don’t worry, there will be viruses you have to watch out for on your Mac soon enough. I’ll admit, I primarily use my macbook, but I love my PC too.

    • Lampica
      Permalink to comment#

      What? Are you joking? IE8 is only even semi-passable when compared to older versions of IE. It’s like a broken down car, but now at least it has wheels so you can tow it. It is still a broken down car that needs to be towed. IE8 barely squeeks by supporting a bare minimum of todays standards. It is still making our lives difficult though with no support for basic stuff like psuedo-selectors and when you look toward more advanced stuff there is no support on any horizon from the IE front. In a few years I will be shocked if IE8 is not the bane of web development, and the primary thing holding us back. It barely scrapes by today, in a few years it will be a nightmare just like IE6 is now.

      Really, MSs whole strategy with IE is just horrid, always has been, and hasn’t changed. Years between updates? I guess that is so that there is time for a million sites to be built which depend on IEs shortcomings to work properly. IE8 represents no change from their terribly lacking modus operandi.

      I think the fact that Microsoft remains a successful business is a clear statement about what is wrong with our economy. Even MS Office has become a convoluted mess of applications now. I used to feel like at least Office was a solid product, but I switched to Open Office last year and have been perfectly happy with it.

      How many new OS versions has MS put out in the past 10 years? Yet XP is still the standard and XP sucks, just not quite as badly as everything else MS has put out over the past decade.

      I mean who else intentionally builds in support for hundreds of bugs because they waited so long to fix the bugs that if they now don’t support these ‘legacy’ bugs the “internet will break”?? As if the internet wouldn’t get along perfectly fine without any help at all from MS..

    • While I do understand the software development cycle and knowing that with each version there are going to be many problems solved. I am merely stating that with the current market share and amount of time Internet Explorer has spent in that market, that a better product would surly have emerged.

      And no I will not be watching out for viruses on my SE version of Linux!

  16. riccardo
    Permalink to comment#

    last example Universal IE 6 CSS is

    instead of

  17. Hacks FTW.

    They don’t take up much space and I hate having to deal with multiple stylesheets. They’re also an extra request. Using hacks within your main stylesheet also allows you to skip conditional comments.

    • My concern is primarily, what if IE 9 comes out and the hacks that were supposed to be targeting IE 6 or 7 specifically now all the sudden fuck stuff up in IE 9. That would suck. That will never happen with conditional comments.

    • I’m agree with you, but the evolution of IE is progressive no retrospective, so when I see the new features of IE9, I found them very interesting, standars, SVG, etc. I think in the same way to David Walsh.

    • I see your point, but I think the “emulation” meta tag should be used to prevent that problem.

    • I know this is a 4 year old comment and so I don’t know if you will see my reply, but have you seen this hack? http://www.limecanvas.com/css-hacks-targeting-ie-10/

      I’d be interested to know what you think, since it’s sort of the best of both worlds.

  18. Permalink to comment#

    As always, nice article Chris. Regarding Government dropping support for IE6, we did that a year ago and many others are following suit.

  19. Sam
    Permalink to comment#
    <!--[if !IE]>
    	<link rel="stylesheet" type="text/css" href="not-ie.css" />
    <![endif]-->

    should be

    <![if !IE]>
    	<link rel="stylesheet" type="text/css" href="not-ie.css" />
    <![endif]>
  20. Permalink to comment#

    Well, I agree that using conditional comments is a good (maybe the best) way to avoid (or deal with) some IE6 (and sometimes IE7) limitations or specificities.

    But I’m not sure that using the “Target everything EXCEPT IE” is a good idea.

    I strongly suggest to use a regular stylesheet that every browser (including IE) will use and add some IE specifics stylesheets that will overload some of the CSS selector and properties that could trouble IE in the regular stylesheet.

    I think that using the cascade is far more safe than maintaining 2 specifics steelsheets.

  21. Permalink to comment#

    great will be the party when IE6 will finally die..

  22. Anton
    Permalink to comment#

    Example only ie8:]

    #add{height/*\**/:25px;}

  23. Steven L Braun
    Permalink to comment#

    Hasn’t it becoming obvious that folks that use IE really don’t give a flip about how the web looks? Serve them Helvetica (it’s too good for them) and Times. Save your hard work for those that appreciate it; the ones who are browsing the web with a modern browser. Serve your CSS 3 and stop using javascript to make it nice for IE6-7.
    Stop supporting IE. Even MS is saying that now. http://www.abc.net.au/news/stories/2010/01/19/2795684.htm

    • Permalink to comment#

      Everyone should ask their mother (and grandmother) what browser version they are using. After explaining to them what a browser is, you will probably not be surprised that they don’t know what version they are using. And less surprised that they don’t know how to upgrade. It’s not that they don’t care; they just don’t know how.

      I’m not advocating an additional full-blown design just to support an antique browser but have a heart. It’s not much work to add a one-line conditional statement to give them a tiny bit of support.

      The web isn’t just for the tech-savvy.

  24. Permalink to comment#

    Am I the only one who noticed that CSS Tricks isn’t styled in IE6?

    There are no visual elements to the site at all. I find it bizarre you would make a posting about styling for IE6, when, in a way, you don’t bother.

    Is there a certain reason for this Chris?

    • It does have SOME styling. I use the Universal IE 6 CSS (see above).

    • Permalink to comment#

      Lol that’s actually kind of funny :P

    • Permalink to comment#

      No, he does bother. If he didn’t bother you would just the regular styles in whatever way IE 6 decided to render them. Instead you see a semi-bare, more readable version than you otherwise would.

  25. I can’t say that i have ever used fixes or separate stylesheets when designing, most of my designs I create so that even if IE6 does display something slightly different it still looks “normal”. I probably spend more time than the average person on my stylesheets but its well worth the effort so that you only need one stylesheet and no fixes.

    And considering the usage of IE6 is dropping each year Im not 100% put off if something is quite the same in the rest of the browsers.

  26. Another big fan of “hacks” opposed to maintaining multiple stylesheets.

    Use a proper/valid doctype.
    Use a CSS reset.

    p {
    color:blue; good browsers
    *color:red; ie 7 and below
    _color:green; ie6 and below (to override any ie7 specific style)
    }

    Just document the * and _ at the top of your stylesheet for anyone who may not know what they mean. It then becomes crystal clear in your code what each hack does.

    • Chrissy
      Permalink to comment#

      These are the hacks I use as well, they are my preferred method. It is so much easier to see them with the rest of the normal styles.

      In addition, for IE8 I use this:

      p {
      color: black\9;
      }

  27. This is my standard thing for IE6:

    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="/css/IE6.css" media="screen" />
    <meta http-equiv="imagetoolbar" content="false" />
    <![endif]-->

    Chris,
    For Additional Resources you should include this website, It is all about IE6 bugs: http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

  28. Permalink to comment#

    There are less and less users of IE6 and IE7/8 renders just about the same as Firefox. Hopefully, in the not so distant future, everyone will be using compliant browsers and we wouldn’t have to make separate stylesheets for these browsers.

  29. Permalink to comment#

    Ok, so I’m just getting into using conditional statements as we’ve had a few layouts recently we just couldn’t get to work universally.

    I’m kind of curious about how you are formulating your stylesheets then. Are you essentially just say, make 3 copies of your .css file for IE6, 7+ and FF, and each copy is the complete stylesheet but accommodates the elements?

    Or do you only have the page elements (pagewrap, container, content, etc) in this conditional .css? And then you have another .css that contains all the stuff like forms, p, h1, etc?

    Or do you just have to put fixes to the 1 or 2 divs in your conditional .css file, and IE will override that one div?

    • You should list your MAIN stylesheet first, then the conditional stylesheets AFTER. That way the conditionals you just OVERRIDE whatever little things need tweaking.

    • Permalink to comment#

      Great thanks! That’s WAY better than what we did – which was just duplicate the same stylesheet and messed with a couple of the elements. Really cluttered compared to what we could have done.

  30. Permalink to comment#

    I don’t like hacks, a separate stylesheet may be an extra request but it will usually be a very small file and it makes things much easier to maintain.

    Having said that I had an interesting scenario a while back where I needed a conditional comment to target all browsers (including non-IE!) except IE6 because an embedded .swf that my client insisted upon would cause it to crash. Stu Nicholls came to the rescue with a bizarre range of what I am guessing are hacks that do just this:

    http://www.cssplay.co.uk/menu/conditional.html

    This allowed me to embed the .swf for all browsers, except IE6, which just got a static image.

    • Lampica
      Permalink to comment#

      Don’t see why this should have been any problem. I also don’t see why you would want to invert your wording “all browsers except IE6″ when really you only needed to target IE6.

      Maybe it was your oddly inverted wording which caused your trouble in the first place (because you were looking at it wrong). All you needed was a single conditional stylesheet for IE6 with something like .display:none; in it. because then whatever was nested in the thing which get’s .display:none; won’t even DL at all (unlike with .visibility:hidden; where the content is still there, but invisible).

      IF for some reason that wouldn’t work then you could have still just used conditional comments in the HTML to add in some comment tags before and after your SWF. So that in IE6 only the SWF gets commented out. Not sure if that would work because conditionals may or may not be able to contain comments, but there are other methods too.

      Like useing a single IE6 conditional comment to add a few characters to the filename of the SWF, thereby pointing IE6 at a different file that doesn’t cause it to crash.

      There are 100 other ways to address this sort of issue by targeting only IE6. So saying you really needed to target everything BUT IE6 is bass ackwards and serves only to confuse the issue. You needed to target IE6, nothing special about it.

    • Permalink to comment#

      Yeah, maybe you’re right. I guess I just got carried away with the excitement of doing things backwards…

  31. Permalink to comment#

    Thanks for the conditional statements and useful hacks, I know you ‘shouldn’t’ use them but some times it’s the only solution when dealing with IE6.

  32. Great tips. These are most useful hacks for IE.

    Thanks

  33. I read this article after reading numerous articles about the Google-China-IE-exploit-hole-blah-blah-blah. I am glad that my small business market has no desire to worry if their websites function in IE6. This is mainly because of me pointing out the perils of something that is outdated and unsafe! I am using a wonderful piece of javascript found right here at CSS-Tricks on my current 3 projects and will be adding it to all future projects. I am of the mindset that feeding into something that is broken will never allow it to truly be fixed. Begone IE6 you dirty bastard!

  34. Joe
    Permalink to comment#

    Chris, thanks…you just saved me many hours in the future. I can remember !FONDLY! being up at 3AM working on a deliverable and everything was great except for IE6 compatibility……Such fond memories…no more!

  35. I have been looking for this! But I wonder how many browsers support the !IE rule? I mean wouldn’t it be better to just use the regular link instead of putting it in a comment?

  36. Roy
    Permalink to comment#

    Why using hacks in the first place, just download en use Conditional CSS, http://conditional-css.com/

    • Arpit
      Permalink to comment#

      i have try this example but i need css different browser different css that example not working perfectly. please you will try and let me know

  37. Permalink to comment#

    After designing and coding websites for 15 years now, I slowly got to the point, where I’m able to do any layout without even one IE specific css or hack except for maybe png’s. Makes handling of the site and life a lot easier. I now laugh at others needing an seperate IE6/7/8 and what not stylesheet… nightmare!

    When I code, I often just take a quick look at IE6/7/8 in the process to make sure, but rarely need to adjust something. Most things are possible to do pixel exact, sometimes you just have to accept slight differences. It also depends a lot on how you design a layout and what your excpectations are. For years I was like crazy spending lots of time creating IE stylesheets and using hacks just to have it 2 pixel more to the left and didn’t know better or wanted to change to try different. What a waste.

    Reducing HTML code and go for the most minimalistic code possible and the right way of padding/margins and floats etc., is what turned out to be the way to go. Of course experience in what is possible and what can cause problems in different browsers, and also adapting each new project to try it different and not stick with “how I do it always”, helped alot.

    • Permalink to comment#

      I have to agree with @soma on this. I’ve never needed a specific IE 6/7/8 hack – just test as you code in all (well, as many as you can muster) browsers and if it truly is f***ed in IE work around it. You are a designer – it is a challenge! – First rule of web page design I was taught ” a clean well presented layout makes for easier reading, a happier visitor and a credible web page”.
      Once in a while the png scenario pops up but there is a quick easy work around/hack article on this site somewhere. As stated above – get the basics learned and learned good (padding, margin, float, “display: inline;” – and build from there.

    • Josh
      Permalink to comment#

      I kind of agree that most of the time, it’s possible to produce css that works across most browsers. In my experience, I’ve found that the exceptions are a. using other peoples plugins (jQuery plugins etc…) and b. inherited projects from other designers. Other than these two situations, I typically don’t have to use conditional comments.

  38. V1
    Permalink to comment#

    By using conditional stylesheets you are punishing your IE users with an extra additional HTTP requests for the conditional item. 1 Doesn’t sound like much, but if you use a crap browser like IE. Every request counts to have good performing web page.

    There for I would advice to use CSS hacks instead.

    Oh, and you forgot the star hack for IE7 and lower

    *background:red;

  39. Permalink to comment#

    what do you think of the Google IE8.js ?

    • Permalink to comment#

      It does what it claims, and is good for getting older IEs to recognise some of the more advanced CSS selectors, but it is pretty hefty (about 40k), and I have noticed a considerable lag in page load times whilst it does its stuff.

      Not worth it if you only have a few issues that can be fixed with a couple of extra lines of CSS.

  40. Aditia.numberOnE
    Permalink to comment#

    I have a problem with png files in internet explorer 6, “how to remove the background”

  41. Permalink to comment#

    Chris, unless I’m missing something, you seem to have made a mistake. You’ve listed “* html (selector)” as “IE7 Only” but that should be “IE6 Only”.

    For “IE7 Only” someone else pointed out the “first-child+html” hack, which works, but apparently you can also use “*+html (selector)”. That seems to target IE7 only as well, but I’ve never used it in a real example, just in tests.

  42. Taha
    Permalink to comment#

    I once tried these codes but it doubled my work. Then i tried CSS reset and able to make one CSS file for ever browser. I think if we use CSS reset and know some bugs in IE6 bout float we can easily create global CSS.

  43. Really good article. I am also fade-up with IE6.

  44. Alex
    Permalink to comment#

    Thank you!

  45. Permalink to comment#

    One addition on the hacks:

    body
    {
    background: white; /* all browsers */
    *background: black; /* will show black on ie7 only */
    _background: blue; /* will show blue on ie 6 only */
    }

    so no need for * html ….. Much simpler ah?

    Just make sure you put the one for all browsers first, of course, so it doesnt overwrite the other ones!

    Curious: How did I find this out? Accidentally: After so many years coding I accidentally placed an _ before a command and noticed that it was working only on ie6. The * for ie 7 I learned from Michael at Bravo TV.

  46. Permalink to comment#

    You know micro-s did that on purpose. Now that bill jumped ship maybe they can get there act together. also pass word protect the registry micro-s! Nice work on Your sites Chris

  47. Permalink to comment#

    Hello All,

    I need a solution for my site css (i have been stuck :(

    i am using jquery toggle and toggle a div when click “Kisa Yollar” (on the top right of page, means shortcuts), in firefox or chrome, it works great but in ie the div goes more right (out of page)

    Here is sample page:

    http://www.ihaletakipsitesi.com/ihale_tarihi_yaklasanlar_konuk.asp

    I will be appritiate if you help me for this, and thanks so much

    All the best

    Ozgur

  48. I LOVE YOU! Firefox is so much better than IE.

  49. Permalink to comment#

    hi all,
    might share this in case anyone has wondered if there’s an easy way to trick wordpress to take another css if IE6 is used to view a site. so you could make a modern theme for IE7 and proper browsers, but also have it working with IE6 and below.
    short description of how to do it using the stylesheet filter is here

  50. Babazumbul
    Permalink to comment#

    I have problem with conditional stylesheet. You can see on http://www.parkic.byethost7.com/ I made two stylesheets. One for lt IE 7, and other for IE7, IE8 and other browsers. The point is that my statement doesn’t actually work, which gives me a plenty of headache. Any solutions?

  51. Permalink to comment#

    Is it really worthwhile to create style sheets for IE 7, IE 8, IE6 and then one for other browsers? I use a style sheet for IE only and one other for others. I make sure that everything looks OK in Firefox and Safari and then I reposition everything in the IE specific sheet. Shouldn’t that be enough?

  52. Permalink to comment#

    Today IE6 has dropped down to 10.2% as soon as it gets into single figures I’m going to drop support. Most of its quirks I can handle, but the fact that it completely screws up when you have a png background really compromises my designs. Who on earth uses IE6 anyway?

  53. Permalink to comment#

    wow, I never thought this could be possible. Thank you so much

  54. Permalink to comment#

    I have one site which is giving me trouble with IE 8 and Firefox. It wont render a drop down menu as Google Chrome. I tried to change the “if lte IE 6″ to “if lte IE 8″ and still not working. Please help if you have any idea

    Here’s the site: bestofcampuscrimelog.com

  55. Adam
    Permalink to comment#

    Hey all can someone please help me with this. Been trying to fix this float/margin problems for days now on IE6 I’ve tried the display:inline; and researched all possibilities with no luck.

    Please review you can see that the problem in IE6 is in the header as well as the main content. How can this be rectified.

    Heres the link:
    omved.boldwerks.com

    Thanks a ton this is nuts,

    -Adam

  56. Great post! This is my first attempt to create a CSS file specifically for IE. I’ve taken the code from above

    <!-- [if lt IE 8] -->

    And it appears to work fine for the homepage but doesn’t seem to work on other pages within my site? I’ve added a little more detail on my blog here http://bit.ly/9q6xdF

    Would appreciate some advice,

    Thanks

  57. The 3D Data Labs Guy
    Permalink to comment#

    Hi Chris, nice post. Very informative post this.
    The following code correctly identifies Internet Explorer 5.

    <!–[if IE 5.0000]>–>
    Internet Explorer 5.0!

    Ie 5, which shipped with Windows 2000, has a version vector equal to 5.0002. Pls note: the conditional expression [if lte IE 5.0000] returns false when evaluated in the release build of IE 5.
    The value of the expression is called a version vector by the way.
    Thks!

  58. Trying to send the code here..

    echo”";
    echo"<!--[if IE 5.0000]>\n";
    echo"<p>Internet Explorer 5.0! </p>\n";
    echo"<![endif]-->
    \n”;

  59. ok. this should work :) sorry for the above.

    <!--[if IE 5.0000]>
    <p>Internet Explorer 5.0! </p>
    <![endif]-->

    Some have experimented some strange action with IE 5.5

    <!--[if IE 5.5]> is not interpreted
    <!--[if IE 5.500]> is not interpreted
    <!--[if IE 5.5000]> is interpreted

    May be IE is right! I think one need to be more specific when targeting ie. Instead one can try this:

    <!--[if (gte IE 5.5)&(lt IE 7)]>
    <p>You are using IE 5.5 or IE 6 </p><![endif]-->
  60. In the ex below, only the major ver number is specified; therefore, the code evaluates as true for both Internet Explorer 5 and Internet Explorer 5.5.

    <!--[if IE 5]>
    <p>using any incremental version of IE 5! </p>
    <![endif]-->

    Hope it helps.
    thks!

  61. Thanks a ton for this wonderful hack for IE. It has taken some time, but slowly I’ve started doing ok for IE.

    ;)

  62. Permalink to comment#

    Hey
    So I’ve created a style sheet to fix up my css when my website is accessed through Internet explorer.
    However it doesn’t seem to be working (I know the style sheet is connected because I can change the body font, but I can’t seem to align my menu buttons at the top of the page in the header). I’ve even tried copying and pasting my css from my original stylsheet (which works in both chrome and mozilla) and placed it in the IE style sheet but nada.

    At the moment this is in my IE style sheet, am I simply making a stupid mistake (this is still very new to me):

    nav ul a{

    display: inline-block;
    text decoration: none;
    width:100%;
    text-align: center;
    }

    nav ul {

    display: inline-block;
    text decoration: none;
    

    }

    .menu ul al{
    display: inline-block;
    text decoration: none;
    }

    The website i’m working on is emily-jayne.net

  63. Martin
    Permalink to comment#

    AND, what about IE11? any ideas?

  64. Permalink to comment#

    Thank you. This is a very useful resource.
    Just one comment though. As you say IE 10 and up don’t support conditional comments and the other problem is that they will execute the styles in it. Which means if for example you add a conditional comment for IE8 only this will be executed by IE8, IE10 and IE11… This is a nightmare.

  65. Bhadresh Shiroya
    Permalink to comment#

    Thank you. This is a very useful resource.
    My que
    Different CSS for each browser?
    like Safari,Crome ,Mozila,IE

    Ex
    <!–[if gte IE 7]>

    <![endif]–

    And Using Mozila

    <!–[if gte MO 7]>

    <![endif]–

    Any trick ?

  66. Bhadresh Shiroya
    Permalink to comment#

    ** Now i find Solution Each browser to handle browserwise css**
    Ex

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
    var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        // At least Safari 3+: "[object HTMLElementConstructor]"
    var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
    var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6
    
    var output = 'Detecting browsers by ducktyping:<hr>';
    output += 'isFirefox: ' + isFirefox';
    output += 'isChrome: ' + isChrome;
    output += 'isSafari: ' + isSafari;
    output += 'isOpera: ' + isOpera;
    output += 'isIE: ' + isIE;
    document.body.innerHTML = output;
    
  67. Bhadresh Shiroya
    Permalink to comment#

    document.write(‘<‘+’link rel=”stylesheet” href=”/weddix.css”/>’);
    if(isSafari){
    document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_safari.css”/>’);
    }else{
    document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_browser_default.css”/>’);
    }

    <!--[if IE]>
        <link rel="stylesheet" href="<%=kkEng.getStyleBase()%>/weddix.css" type="text/css" media="screen">
        <link rel="stylesheet" href="<%=kkEng.getStyleBase()%>/weddix_browser_default" type="text/css" media="screen">
    <![endif]-->
    
  68. Firstly, I am new to styling so may be I could guess anything wrong…

    Sir, Don’t you think that adding too much additional CSS Sheets would increase some more http requests which increases page load time and I was interested in knowing if there is a way to make these conditional adjustments withing single stylesheet…

    Also, I was interested in knowing that if your responsive menu based only on css or needs jquery or js also…

    • Hi Himanshu, You can target IE by using the <!--[if IE]> statement around your stylesheet tag.

      In answer to your first question, Chris concludes at the end of his article;

      We shouldn’t need them. They are against the spirit of web standards.

      However this article is very old should only be used as a guide only. For example HTML5 attributes such as placeholder, box-shadow and others aren’t supported in old versions of IE (8 and below) so conditional stylesheets can be handy to ensure a better UX for IE users who dont receive the benefits of modern browsers. Of course you can display an Upgrade your browser message using conditionals too.

  69. Musa Haidari
    Permalink to comment#

    What if we want to use an style for IE9 and below. I want to give a soild color instead of gradient in IE9 and below.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".