Target IE6 and IE7 with only 1 extra character in your CSS

Reading time: About 1 minute

IE6 and IE7 are the bastards of the web design world. We all know it. IE6 more so.

To get around the inadequacies and bugs of IE6 and IE7, I see people going to great lengths and even adding a second stylesheet with conditional comments when we all preach at the same time to minimize HTTP requests.

Complicated hacks and workarounds all take more time. And time is money in the business world (especially to support a dying user base).

1
2
3
4
5
6

#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}

And there you have it. That’s all you have to do. Stop wasting your time, your client’s money, your users’ bandwidths, and your otherwise zen disposition.

By the way, if you want to argue with me about perfectly validating CSS, provide a business case for validating CSS. No idealistic bullshit.

For more on IE6, check my newest article: The IE6 support equation: Is it worth supporting?

111 comments skip to comment form

  1. dnnsldr said— 24 minutes later

    With IE6 and IE7 (especially IE6), if those hacks are the only thing that stops us from validating is that really so bad. I think your example is the way to go. Thanks Brian!

    #1

  2. Anthony James Bruno said— 1 hour later

    Pretty nice. I’ll have to give this a shot.

    Cheers!

    #2

  3. Omari Brandt said— 2 hours later

    Great post.

    #3

  4. Brian Cray said— 2 hours later

    Dennis: I certainly go for saving time over validating. One affects my wallet. The other doesn’t. I think we know which one is which.

    Anthony: Glad you like it! Let me know how it works for you :)

    #4

  5. Kurt said— 2 hours later

    Mucho interesting there Brian! I cant wait to try this myself, this could save me countless statements

    Thanks for sharing!

    #5

  6. Brian Cray said— 2 hours later

    Glad you liked it Omari and Kurt! It is definitely a time-saver. Good luck :)

    #6

  7. Ruhani Rabin said— 4 hours later

    Wow! I want to implement this as soon as i can.. NEAT

    #7

  8. Alex said— 9 hours later

    “By the way, if you want to argue with me about perfectly validating CSS, provide a business case for validating CSS. No idealistic bullshit.”

    I don’t know about you, but I have neither the time nor the resources to test in every possible browser configuration. Valid CSS is a partial defense against CSS that happens to work fine in whatever browsers I test, but unexpectedly breaks when some other browser treats my typo differently. But yes, I can see how there is no business case assuming you have infinite resources.

    Hacks like these are silly, and a nightmare for future maintenance. They are even worse in cases like this because you have provided no information on *why* they work, and so when they break (and they will), anyone trying to fix things will be in trouble. Conditional comments are by no means ideal, but they are still better. And they typically add, what, a single extra HTTP request (or 0 for non-IE browsers)? Of all the arguments against using them, this is probably the worst.

    If you are so concerned about the number of HTTP requests required to load one of your pages, you would accomplish a lot more by worrying about images (such as the ones for Twitter/Digg/etc., the ones for the code block, and avatars for comments) and Javascript, which contribute not only another HTTP request, but also an additional download.

    YSlow, from Yahoo, gives this page a D for number of HTTP requests (9 of which are Javascript, wouldn’t have guessed) and for two Javascript-related tests. On pages with more comments, the number of images (and thus HTTP requests) would be even higher.

    #8

  9. Miles said— 10 hours later

    But where is the example of when it WILL break? I always hear about such ‘hacks’ breaking but there is never an example. A true ‘break’ is something that repeatable, not a one off, (oh my!) “user has to refresh” and can never repeat what happened type of breakage, who cares about that.

    #9

  10. Brian Cray said— 23 hours later

    Alex:

    Obviously it makes sense to write CSS to its specification just like any language. My problem is with hefty workarounds to address a specific browser bug. Obviously, totally validating CSS isn’t perfect because it simply doesn’t work in a UI with bugs.

    I also agree with Miles. Give me one instance where putting a * or _ in the CSS breaks another browser.

    #10

  11. Meshach said— 1 day later

    It’s good to write valid code however if there is only one or two things I would use the star or underscore hack *shudders*.

    If it’s a bigger more complex site I would go with conditional comments.

    #11

  12. Brian Cray said— 1 day later

    Meshach:

    Hehe… it’s okay to say that you’d use these hacks. You won’t be criticized here :)

    You have a point with the small to large site point. It definitely makes sense to move hacks to a separate css file if you have a ton of CSS properties that require the hack. That way when the time comes you can just drop the extra style sheet. Thanks for your comments!

    #12

  13. benxmain said— 2 days later

    Your “time is money” argument doesn’t hold up.
    You don’t have the time to insert a conditional comment Why are you even bothering to account for IE in the first place, then? If you are going to take the time to debug it’s CSS , then you might as well do it right.
    There is no excuse for laziness. You have to pay the “technological debt” eventually.

    #13

  14. Johns Beharry said— 3 days later

    Dude this is freakin awesome! Hands down…
    Thanks

    #14

  15. Brian Cray said— 4 days later

    benxmain:
    There are some complicated work-arounds for IE, and adding an extra stylesheet adds more complication and work than necessary. One for IE7, one for IE6, one for IE7 and below, etc. All that when you can use 1 character. Looking at it that way makes external stylesheets less appealing to me.

    “There is no excuse for laziness.” My perspective: There’s no excuse to waste business time when there’s a smarter fix. There’s never been a case where this hack breaks something else by itself.

    Johns:
    Thanks! Hope you enjoy :)

    #15

  16. Rodrigo Soares said— 4 days later

    Another way to target both IE7 and IE6 at the same time is to add a “.” before the property like .color: #999; it will be rendered by both IEs

    #16

  17. Meshach said— 4 days later

    A good way to target only IE6 is:


    * html #property {
    selector:value;
    }

    It will pass validation too.

    #17

  18. Brian Cray said— 4 days later

    Rodrigo: Cool. Didn’t know that one :)

    Meshach: I don’t use that one because I can use the _ and * hacks within the same set of properties as all the other ones :)

    And again, I could care less about CSS validation :)

    #18

  19. Meshach said— 4 days later

    Excuse me that should be:


    * html #selector {
    property:value;
    }

    #19

  20. Andrew Hedges said— 5 days later

    My approach is to include a single IE stylesheet using conditional comments. In the stylesheet, any rules for which I target IE6, I set back for IE7 using the first child selector, like so:


    /* picked up by IE6 and IE7+ */
    body #my-div {
    margin-top: 10px;
    }

    /* picked up by IE7+ only */
    body > #my-div {
    margin-top: 0;
    }

    Simple, validates, and will always work.

    #20

  21. Dan said— 5 days later

    It’s still a hack.

    Inclusion of a separate stylesheet for ie6 or 7 using HTML conditional comments by far my preferred method.

    #21

  22. VaX said— 5 days later

    People add second stylesheet because the hacks makes your stylesheet unvalid :)

    #22

  23. Meshach said— 5 days later

    @VaX

    Simple, validates, and will always work.

    ;)

    #23

  24. Jamie C. said— 6 days later

    I might consider using this rather than conditionals because my IE stylesheets are usually pretty short.
    If I use them I will include a comment explaining their use for anyone who might have to maintain them down the road.

    @Alex Uptight much bro? They only way they are going to break is if Microsoft goes back and updates the browser builds –not likely to happen.

    #24

  25. Alex said— 1 week later

    99% of the time i don’t need to hack IE (if you plan the code well you never have to bother!)

    but the * hack is great and have used it for a while. If you want to target just IE6 use the underscore

    margin: 10px;
    _margin: 5px;

    #25

  26. Sam said— 2 weeks later

    Alex, that info is already in the article.

    #26

  27. Cameron said— 2 weeks later

    Hey Bri,

    Nice article – I’m still not sure if external conditional stylesheets or a hack is easier/quicker from a maintenance pov.

    I try to stay aware of maintenance impact, but tbh, a style in the same place as the original does sound simpler than tracking it in an external sheet.

    I suppose only boon with conditionals is the ability to drop the sheet when necessary..

    as to the problem with it breaking – that argument stands for any future browser that may come out, that may have issues interpreting the hack (ie it might interpret it, but not have the inate issue to begin with, and so will actually break the page)- it’s all very up-in-the-air, but obviously probable, because one is banking it working on something wrong with the initial browser…
    if that makes sense..

    :)
    cam

    #27

  28. Mariusz Cieśla said— 2 weeks later

    Do not hack if it doesn’t validate. Use conditional comments and extra CSS files.

    #28

  29. Meshach said— 2 weeks later

    @Mariusz:

    Your site uses an “_” hack. ;)

    #29

  30. Mariusz Cieśla said— 2 weeks later

    @Meshach: I know, in the clearfix, will use this only in conditional comments for IE in the next iteration of the layout. That’s a work in progress. ;)

    #30

  31. Meshach said— 2 weeks later

    Ah, I see.

    I try to get my CSS to validate when possible but using CSS3 sometimes I can’t. :P

    #31

  32. Morgan Knutson said— 1 month later

    You can also use a “.” to target IE7 and below. I use these hacks CONSTANTLY.

    Validation is masturbation. Cross-browser compatibility trumps any idealistic adherence to standards.

    #32

  33. Chris Wallace said— 1 month later

    Just use conditional comments and add the styles inside the comments, no additional stylesheet required. That way you have a neatly commented section that is obviously targeting IE6 and one that targets IE7 if required. Or any other IE.

    kthxbai

    #33

  34. Volomike said— 1 month later

    What happens when IE9 comes out and processes either both or neither?

    What happens on Safari, Opera, or FF, or in a future version of those?

    Conditional comments are used because they work consistently. Now if only Safari, Chrome, and Opera supported those, I’d use those. For now, unfortunately, I have to rely on CSS hacks because they load faster than the Javascript hacks. So in general I have a default.css that loads for all browsers and at least where FF gets its styling, and then I have an ie.css only for all IE browsers as an exception file, an ie6.css for IE6-only exceptions, and then an opera.css and safarichrome.css for Opera, Safari, and Chrome exceptions. My default.css is the large one, and the exception files are usually relatively small and only for tweaks.

    #34

  35. Acts7 said— 1 month later

    “People add second stylesheet because the hacks makes your stylesheet unvalid :) ”

    Thats not true of necessity. I use second stylesheets because the majority of sites I code for have in excess of 2000 lines of css. When you are dealing with sites that large it makes no sense to have to pick thru your entire site everytime you make updates/upgrades for a new browser.

    By placing a conditional stylesheet – you can guarantee that only the conditioned browsers will ever be affected by that style sheet.

    It also makes debuging significantly easier AND faster.
    Because if something’s broken in IE6 or IE7 – I can specifically go to their stylesheet and apply a fix without worrying that it will rip apart an otherwise fragile bag of bones.

    The problem with this option (see source article) is that if you are debugging – and someone else has invaded (i.e. had access to and modified your code) – you would never have a clue if some genius had accidentally removed the “*” or “_”. You’d have zero chance of deciphering this.

    I go the conditional css route – not so much for a validation standpoint – although – to the extent I can – I do validate all my work. I do the conditional css because when you have sites large enough for 2000+ lines of code – you cannot lump all of that into one file.

    #35

  36. TenTen71 said— 3 months later

    Everyone has their own comfortable way of doing things. I think what ever works for you, stick with it.

    I personally like less code and less hacks in my websites and this trick, so far, works fine. I will continue to test it out in my future website design projects.

    Thanks.

    #36

  37. Trang said— 3 months later

    /* picked up by IE7+ only */
    body > #my-div {
    margin-top: 0;
    }

    This is false! Chrome picks this up too.

    #37

  38. Tom said— 3 months later

    @ Trang – the context of the above child-selector “hack” was within a conditional IE-only CSS.

    In fact, all modern browsers support the CSS child selector specification. It’s IE6 that doesn’t. So you can use that when you’re trying to write a fix for IE6 only, by FIRST providing the rule for IE6 browsers and THEN overriding that rule using the above child selector method. Only IE6 and lower will not pick it up.

    #38

  39. Alistair Holt said— 3 months later

    Business case, no idealistic bullshit. Hacks are unreliable for the future. It might save you time right now but you don’t know how future releases of browsers will treat the hacks you’re relying upon.

    If you want to target specific versions of IE, use conditional comments which are a much safer bet. It’s not hard to put styles for IE into separate stylesheets and it has the benefit of making your CSS more manageable and easier to see what is going on for you and any other developers that you have to tackle your code in the future.

    #39

  40. Jonsi said— 3 months later

    I love this hack (though I use a slash instead of a star to target IE7, but I guess it doesn’t matter)!

    I find conditional comments hard to use, especially for more complex sites. Therefore I don’t aggree with “If it’s a bigger more complex site I would go with conditional comments.”

    #40

  41. Web Design Mumbai said— 3 months later

    yeah i knew about this hack but i didn’t use it in my latest project (http://www.redesignyourbiz.com/stationery/website/index.html), which is currently hosted on my server, coz i wanted to validate the code.

    Brian, u don’t give much importance to validation, but i am not sure if that’s the way search engines think while ranking a particular webpage.

    #41

  42. Allan Clark said— 3 months later

    I’m not idealistic, but I do use validators to find errors for me. That’s like depending on static code analysis to find coding errors, which we know is no silver bullet, but it highlights possibilities, which is what i use validators for. …but then I’m not in the webdesign business, just content.

    #42

  43. Zoffix Znet said— 3 months later

    So, I didn’t read all the comments, but I wish to reply to ‘Miles’:

    >>Miles says—
    >>
    >>But where is the example of when it WILL break? I always hear about such ‘hacks’ breaking but there is >>never an example. A true ‘break’ is something that repeatable, not a one off, (oh my!) “user has to refresh” >>and can never repeat what happened type of breakage, who cares about that.

    So, people were using `height: 1%` to give “layout” (http://haslayout.net/haslayout) and thought it was perfectly fine and were yelling at me for using `zoom: 1` inside conditional comments. What happened when IE7 came out? #css on FreeNode was flooded with people wondering why they sites were breaking and all of a sudden I had a major increase in visitors on http://haslayout.net/condcom

    Then (I guess the same people) started using { display: inline-block; } to give “layout” and again, were yelling how my “zoom: 1″ method is “proprietary” and what not. What happened then? IE8 came out (along with other browsers who started to support that value) and now their sites are breaking again.

    The title of this document claims to target IE with “1 extra character”, but in fact that would be many more characters since it’s not just one rule that you normally need to feed to IE on any decent site.

    I favor for conditional comments any time (http://haslayout.net/condcom), in fact, there’s a section that explains common “myths” about condcoms.

    Let’s not even cover the fact that those star and underscore won’t validate and possible break browser X version Y that will come out next Christmas, instead, think of yourself, maintaining that site half a year later… something breaks, you validate CSS and you get 10 errors… you open the validator and see these “hacks” not validating, you go through all of them and see that there are no other errors (time wasted right there would it be a valid sheet). Now, will you remember in a year that star is for IE7 and the underscore is for IE6? Will that new guy that is now working for you know that that’s how it’s targeting? Oh, right, I know what you’ll do, you will insert a comment next to each rule telling what browser it’s targeting… that’s just sad.

    To all those of you who comment with “WOW NICE! Can’t wait to try”, these hacks are nothing new, everyone was aware of them back before even IE7 came out (and the asterisk hack was known when it did)… but guess what, they were never popular and not just because of that “green light” from the validator.

    If you want to shoot yourself in the foot, go ahead and use these. They don’t save you any time (as some of the commenters claim) they will only make your maintainance a nightmare.

    As I always say when someone wants to use something silly: remember to call me when stuff starts breaking loose, ’cause I’ll be there to say “Told ya so!”

    The only way we humans learn is by experiencing mistakes ourself; I know that my condcom suggestion will ignite the flames and all the pro-invalid-hack people will list every unreasonable reason why their choice is correct… until they’ll get bitten. Well, until that time.. farewell

    #43

  44. Peter Gasston said— 3 months later

    It would be easier to take you seriously if you provided a better example, but you’ve chosen a ridiculously simple one which has the added drawback of being nonsensical; in your example, there’s no need at all to use this hack.

    Anyway, this ‘one extra character’ should be ‘one extra character per rule’; if you’ve got a large site with a complex style sheet you may have hundreds of fixes need for IE, in which case adding one extra character to each rule will easily cancel out the advantage of having a separate stylesheet for IE.

    As you’ve already admitted you’re lazy, you should see that as a significant disadvantage.

    ps To all the validation junkies: it’s okay if your stylesheets don’t validate – as long as you know the reasons why, and you’ve made a conscious decision for that to be the case.

    #44

  45. Brian Cray said— 3 months later

    I love the discussion here! It’s really great and there are good points on both sides.

    If you’ve also enjoyed the discussion, you’ll find even more at http://www.reddit.com/r/web_design/comments/8nlb2/target_ie6_and_ie7_with_only_1_extra_character_in/- there are 76 comments to this article on reddit!

    #45

  46. Thank You said— 3 months later

    This is not standards compliant! This is not standards complaint! Alert! Alert! I must stop this talking so I can keep my ridiculously high priced conferences in tact!!!

    #46

  47. Lloyd Armbrust said— 3 months later

    This is a non point. We’ve known about these hacks for years, but using a conditionally tagged style sheet is essentially the same thing–just in a separate file so that it’s easier to track.

    I’m not creating a whole separate style sheet for the IEs, I’m using the “cascading” part of style sheets and adding only the fixes below the main style. This takes no extra time and consolidates the IE fixes for the future so they are easy to find and understand.

    And after that, what happens when IE 9.5 or whatever randomly decides to read the underscore and asterisk CSS and totally porks the look? Microsoft has already given us a work around that they’ve promise to support, so why fight that?

    And sure, it may be an extra HTTP request–but only for IE users, and who cares about them? If you use IE I hope that your experience sucks and that you die in a fiery horrible death-proof style car accident. If Internet Explorer were a street gang, I’d go to war with it with bottles and chains.

    #47

  48. Andrew Wooldridge said— 3 months later

    Was using this for years. Now with IE8 it’s much less so. You forgot the most important CSS trick for IE — if you are having layout issues try zoom:1 — it can fix so many IE problems.

    #48

  49. Brand Infection said— 3 months later

    Wow, awesome that the _ works! I didn’t know that :)

    #49

  50. Jonathan Drain said— 3 months later

    Aiee! Browser hacks! The devil!

    #50

  51. cancel bubble said— 3 months later

    This is my favorite css hack (I picked it up at Yahoo). I personally don’t like conditional comments because instead of 1 css file to maintain, you can have 3, so if you need to make a change to selector X, you have to possibly make it in 3 separate files. With this hack, you have one file to deal with, everything is self-contained in the selector and it’s very clear what code is affecting good browsers/ie7/ie6.

    #51

  52. Jason Featheringham said— 3 months later

    Correct IE7, IE6- alternative selector (that validates):
    /* all browsers */
    #id .class {
    …
    }

    /* IE7 only */
    *:first-child+html #id .class {
    …
    }

    /* IE6 and below */
    * html #id .class {
    …
    }

    /* modern browsers only (IE8+, Safari, Chrome, FF) */
    html>/**/body #id .class {
    …
    }

    However, I’m still an advocate for * and _ hacks. But, take your pick.

    #52

  53. Andrew Harrison said— 3 months later

    What’s the advantage of this over conditional comments?

    As far as I can tell, all browsers will download the full CSS file, which is now up to 3x larger due to a hack required for each element for ie6 and 7 in addition to the standard style.

    Conditional comments are ignored by non-IE browsers, and therefore the .css files are not downloaded by those browsers. Your solution by comparison has one less HTTP request by IE, but a larger .css file for everyone else. How does that make any sense? If it’s so important that the site looks perfect in IE, and IE doesn’t follow the rules like every other browser, shouldn’t the burden of having a slower loading site be put on the users of IE? Why disadvantage users of modern, standards-compliant browsers?

    The business case for validating CSS is that of integrity and quality of the work. If I can’t say to my clients that my work adheres to the worldwide standard, how can I assure the quality of it? Would you drive a car that had seatbelts that didn’t adhere to the safety standards or dine in a restaurant that didn’t listen to food preparation regulations? If you were a car manufacturer or restauranteur in those situations, would you feel satisfied selling your product knowing that they should and could [very easily] adhere to the standards set out for you?

    #53

  54. Brian Cray said— 3 months later

    Andrew: The analogy you give is blown out of proportion relative to CSS hacks. Your analogy addresses serious and possibly deadly concerns about public safety. A non-standard CSS file does not put a consumer at risk of bodily harm, or in any kind of danger. So again, your analogy in my opinion stands on volatile ground.

    In terms of quality and integrity: My integrity comes through as I provide a great user experience that meets business objectives–a quantifiable and qualifiable win for both the user and the business.

    HTML validation makes sense for many reasons, but CSS validation is taking it to the blind extreme.

    #54

  55. Jason Featheringham said— 3 months later

    Andrew, your analogy is slightly flawed. The browser would be the vehicle, and the CSS would simply be the paintjob. I, myself, am just fine with some mythical future car that loves stars and underscores making my car look slightly different, if in turn I can get a product out the door, especially in my country’s harsh economy right now.

    I understand the desire for standards-compliance, but it’s just a bit altruistic for me, and that’s coming from a die-hard trekkie.

    #55

  56. Jason Featheringham said— 3 months later

    Wow, looks like Brian JUST beat me, haha.

    #56

  57. Brian Cray said— 3 months later

    Muahahahaha

    #57

  58. Benxamin said— 3 months later

    While Andrew’s safety analogy is not a great fit, his argument supporting conditional comments is sound.
    IE takes the request hit, while the rest of us enjoy a smaller file.

    If one is that concerned with external files , why not include all the CSS inline and avoid the hit altogether? The end users still have to download the same amount of data.

    #58

  59. Andrew Harrison said— 3 months later

    Brian:

    Fair enough, perhaps a more apt analogy would be that of computer and electronic device hardware, which follow strict manufacturing guidelines to ensure compatibility across devices that adhere to the standards. As long as your digital camera and the USB hub follow the same standard, you know that you’ll be able to plug one into the other and have them communicate. As long as your code and the browser follow the same standards, you’ll be able to see your website as you designed it.

    But let’s not get caught up in analogies. The point is that the standards exist, and – no matter how altruistic – when they are followed, a good result is produced.

    #59

  60. Brian Cray said— 3 months later

    Benxamin: Why not include all CSS inline? Because it’s a matter of caching one file.

    The conditional comments argument is sound, but in my opinion not sufficient enough to maintain multiple files instead of one. This day and age, the extra 100 bytes to address IE downloads in a single TCP/IP packet. Do you agree that 100 bytes (which would mean 100 IE specific rules) is pretty negligible to download for the sake of saving time moving between 3 files? That’s the size of a 5×5 white .gif block.

    #60

  61. Brian Cray said— 3 months later

    Andrew: I agree with standards existing and generally producing a better result. At the same time there are no absolute rules. CSS validation is at this point for the sake of validation. Validation should be a means to an end, not an end unto itself.

    There are no (or very few) examples where CSS validation is responsible for the same experience across all browsers. In fact, there are examples that prove just the opposite.

    #61

  62. Jason Featheringham said— 3 months later

    Just to be precise, it would cost more than 100 bytes for 100 IE-specific rules. You also have to double the name of the property, as well as a new rule.

    However, my argument is about maintainability. Such a thing is possible with all methods, but my preference is to have the workarounds living right with the original spec, so I can immediately see what is being overridden. I understand that some future browser could break this way, but I agree with Brian when he says it will still provide a great “user experience” if the section widths are slightly off. Take for example:

    –HTML–

    foo
    bar

    –CSS–
    #main {
    width: 65.5%;
    float: left;
    }
    #aside { /* IE’s percentage-to-pixel rounding =hack */
    width: 32.5%; *width: 32.4%;
    margin-left: 2%; *margin-left: 1.9%;
    float: right;
    }

    With just this example, I can keep my hacks nearby. And if some future browser decides to comprehend the IE-only selector, no biggie. This also goes to show that you do need to know what you’re doing before using hacks.

    #62

  63. Jason Featheringham said— 3 months later

    Oh well… my HTML didn’t display. Let’s try again:

    -html-
    -head- -/head-
    -body-
    -div id=”main”- foo -/div-
    -div id=”aside”- bar -/div-
    -/body-
    -/html-

    #63

  64. Brian Cray said— 3 months later

    Jason: I should say “100 extra bytes” since each asterix or underline is only one extra byte. So 100 asterixes or underlines = 100 bytes

    #64

  65. Jason Featheringham said— 3 months later

    And I think the counter-argument of keeping the CSS inline is just funny. That opens up a WHOLE NEW can of worms.

    #65

  66. resourcesMix.info said— 4 months later

    great trick, thanks for sharing.., any clue on how to make ie6 works as if it is ie7?
    Thanks!

    #66

  67. Graeme Donaldson said— 4 months later

    This is easily the best and most concise article I’ve seen so far on dealing with the failures of IE 6 and 7. Well done, you’ve helped me a lot.

    I’ve learned over the years that anyone who actually cares about validating CSS doesn’t actually have any involvement in writing it and when msn.com itself requires CSS hacks and seperate stylesheets to get it working in their own software and no-one has yet complained I don’t think anyone should be casting stones.

    #67

  68. Lew said— 4 months later

    YOU ARE THE MAN! Thank you for this.

    #68

  69. Hyder said— 4 months later

    I’ve never seen this before… does it really work, or does it need some scripting to make it work? It’s real neat… thanks for sharing Brian!

    And validation is just something that makes you smile at your effort, I prefer to see my clients smile… coz that’s what buys the beer.

    #69

  70. Ify said— 5 months later

    Hey Thanks-You saved me lots of sleepless nights! It really works.

    #70

  71. Web Development India said— 5 months later

    I agree with the author, that CSS recommendations.
    I use both IE6 and IE 7.

    Web Development India

    #71

  72. responde said— 5 months later

    Very interesting in informative topics, I will try these hacks, didn’t know these.

    #72

  73. Holger said— 6 months later

    Damn, thats a very usefull advise dude!

    Thanks!!

    #73

  74. Nick said— 6 months later

    I’ve used :
    #myelement
    {
    color: #999; /* shows in all browsers */
    #color: #999; /* notice the # before the property – shows in IE7 and below */
    }

    Basically the same as using the asterisk…

    #74

  75. oserk said— 6 months later

    WOWWW!!

    great post :)

    this specifically helped me on page: http://www.bellavita.hr/

    and if anyone will have similare problem like me, with margin top … like white space or something this is savier!! I just puted _margin-top, *margin-top and voila :)

    thanks again author!!

    #75

  76. Ben said— 6 months later

    Couldn’t agree more Brian :)

    The main reason I prefer this to conditional comments is this – when I change the value of a property in my main CSS, there is absolutely no way knowing if I need to also adjust that property in my IE stylesheet.

    With this hack, it’s right there!

    width:20px
    _width:25px

    If I adjust width, I’d have to be pretty daft not to realise that I also need to adjust _width.

    Some people must have a lot more time than me, because I don’t want to be searching through a seperate IE stylesheet every single time I adjust a value in my main stylesheet. If you do have the time to do that, more power to you ;)

    #76

  77. Davit said— 7 months later

    I don’t get how should i use this on wordpress. I pasted code to css file and it did not work for my site.

    http://www.adjikadressing.com

    I have IE6 rendering problem here

    #77

  78. Heather said— 7 months later

    You just saved us tons of hours of work. Awesome.

    #78

  79. chrisS said— 7 months later

    I agree with the thought that to write html that validates but not really care about the CSS. Basically if all browsers rendered code the same way, it would make sense to validate the CSS. But different browsers behave differently and the the validation process doesn’t take that into account.

    I’ve used these “hacks” several times but only in severe cases and very sparingly. I do think that there is a level of integrity that should be used when coding css and for that reason my IE css files have less than 10 lines in them that I try my damnedest to never touch. I just make sure i code as correctly as I can for the rest.

    If you code smartly and efficiently, then you can get away with doing an entire site with using these tricks less than a handful of times. If you find yourself using this solution 100+ times, then the problem is most likely how well you code rather than the browser’s rendering habits.

    When IE6 usage is overtaken by Safari, I’ll stop supporting it in my design.

    #79

  80. dj cooper said— 7 months later

    YOU SAVED MY TIME.

    Thanks bro. This hack has changed my life. I now have time again!

    :D

    #80

  81. sanotsh khalse said— 8 months later

    greate teqniq frnd

    #81

  82. craig said— 8 months later

    Nice blog. Nice hack. Thank u

    #82

  83. saurabh shah said— 8 months later

    I use this hack very ofter … But only at few places like to make some width alignment.

    Really love to read this Comments (Rather Discussions ;-) ) .

    #83

  84. Jayruben said— 8 months later

    Thanks, works for me!
    Otherwise than other “Tuts” on the net… lol!

    #84

  85. zabaman said— 8 months later

    Hi, thanks for this. I develop on mac and moved from table layouts to fully css driven sites. I test on safari as thats the most standards compliant browser there is (FACT), I have a heap of shit PC for testing on other stuff. I find that a separate style sheet is overkill when a few tweaks to css can cure most problems, using this technique allows me to keep the styles together so for changes it makes it easier to edit as you can edit the bits for all the shit browsers in one place. I love it. Thanks a million. Now all we have to do is hold back on implementing any html5 and css3 as it will take 5 years at least before the pricks at microsoft to develop a decent browser. Why do people use internet explorer at all? mac rules.

    #85

  86. webdesignfolkz said— 9 months later

    Nice, thanks . what a good technique. From now a little more trouble with IEs

    #86

  87. Politics said— 9 months later

    This is very helpful information, but IE 7 works very slow.

    Politics

    #87

  88. student aid said— 9 months later

    Thanks for this CSS code to enhance the speed of IE 7 .

    student aid

    #88

  89. FrankZoid said— 10 months later

    Excellent, this is a real time saver (and my clients want to save my = their money!)

    #89

  90. verbatim said— 11 months later

    Much better way to do this. that uses competley valid styles and markup:

    http://rafael.adm.br/css_browser_selector/

    “CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.”

    It adds styles to the HTML tag. you can then add “conditional” styles for each browser, not just IE. even mobile.

    #90

  91. Jayphen said— 11 months later

    What happens when future browsers choke on invalid stylesheets? We can’t take for granted the fact that other browsers currently ignore these bugs.

    #91

  92. Marc Swikull said— 11 months later

    Must say, this is the simplest, easiest-to-use CSS hack I’ve ever seen, and it works great! (And no doubt, we’ll have to continue to adapt to future bugs, but for now, this does the trick!)

    #92

  93. Simon B. said— 11 months later

    Am I the only one with a website that is >50% used with IE6 and IE7?
    Because so far it seems nobody mentioned the advantage for those IE users (an already slow browser) to have one less file (i.e. CSS-file) to wait for to download, since the IE pipeline seems to be (*) max 4 files “in transit” at any given moment.
    *Tested with MSFAST from MySpace. (And, by the way, MSFAST installs a toolbar button but you might have to place it on your toolbar yourself…)

    #93

  94. wallrock said— 11 months later

    my code not getting css in ie6 it’s finely working with other browsers

    #94

  95. ranjit said— on April 16, 2009 later

    Very nice hack.. Thanks.

    #95

  96. Manish said— on April 16, 2009 later

    Grt Post

    #96

  97. Darren said— on April 16, 2009 later

    Anyone considering taking a project using the United Kingdom’s Business Link funding needs to keep the entire site validating. One legitimate business consideration.

    #97

  98. meldrape said— on April 16, 2009 later

    OMG it worked! I need 85 pixels in IE only but 45 in other browsers and the * worked!! Thank you so much!

    #98

  99. Sumeet Chawla said— on April 16, 2009 later

    Where did you find this hack man! Its brilliant. I wouldn’t recommend it using in every other xHTML/CSS or any other project, but its a life saver in many situations. For example: I had this project where I had to paste the head part of the xhtml page in the admin panel. Now the IE7 specific CSS was enclosed in those boxes. But due to some reason, after pasting the code, the third brackets were being rendered in their hex form ex: #93; This totally wrecked the ‘if’ condition and in no way possible was I able to put IE7 specific CSS in the page (Well, there is always JS for that, but stil…).

    So bottom line, this hack saved a lot of my time!

    Thanks for the share man! :)

    #99

  100. name said— on April 16, 2009 later

    4

    #100

  101. generico cialis said— on April 16, 2009 later

    Hola! http://www.provincia.mediocampidano.it/jforum/user/profile/71.page Cialis Generico precio farmacia.

    #101

  102. Brian Dixon said— on April 16, 2009 later

    Thanks for the tip. It saved me a lot of time.

    #102

  103. Ravi said— on April 16, 2009 later

    Hi friends

    Can you please tell me how can I use this for fonts?

    #103

  104. Frank said— on April 16, 2009 later

    Ravi-

    Using the CSS from this page, to target fonts for the H1:

    h1 a, h1 a:visited
    {
    color: #000;
    text-decoration: none;
    font-family: Arial;
    *font-family: Georgia;
    _font-family: Tahoma;
    }

    not tested on my end, but this should be what you need.

    #104

  105. Jono said— on April 16, 2009 later

    OMG…That is absolutely amazing…like you said – hours saved!!!

    #105

  106. Calvin Tennant said— on April 16, 2009 later

    Excellent.

    #106

  107. Jesse Gardner said— on April 16, 2009 later

    Question: If enough people use a hack, is it still considered a hack?

    #107

  108. Victor Nogueira said— on April 16, 2009 later

    I understand that write clean and hack-free code is not a matter of extra time.

    Actually, the coder needs to study the most common IE bugs and learn how to approach them reasonably. I did this once, in one of my first CSS-based projects. Since then I not only solve IE issues in seconds, but I also understand how every rule I defined works. It’s as simple as that.

    It frankly surprised me that these legacy techniques were received with such popularity nowadays. They were adopted by many people four years ago, but it’s really difficult to find recent forum threads with these kind of antidotes.

    Also, it’s worth mentioning that IE6 will probably die in the next six months. I advise you guys to look at your analytics data and watch the trend. I’m working in a project that – in Brazil, a 3rd world country – will likely to have less than 4% of IE6 market share by October this year.

    My point is that conditional comments permits modern and clean code, with the ease of just trash one line of code in the next few months, when IE6 and IE7 will be irrelevant for most projects.

    Hope we all make efforts to write more and more clear and smart code.

    Cheers!

    #108

  109. Dibyendu said— on April 16, 2009 later

    Thanks for helping ……………

    And I need to know this css will work in upper version in IE ?

    #109

  110. ravi said— on April 16, 2009 later

    Thanks frank and thanks buddy……………. surely hours saved!!!

    #110

  111. Aled Arwyn Rees said— on April 16, 2009 later

    Thank you Brian…SUPERB WORK!!!!!!!!!!

    I know css inside and out, and your hack makes sense! If ‘valid’ css does not work across browsers then who cares about W3C standards. Less conditional statements (messy) and no need for a separate stylesheet. Web clients don’t care about css validation, users don’t care about css validation, and microsoft sure as hell don’t care…doing more work just teaches IE to be even more lavy than it already is with regards to adhereing to web browser recommendations.

    #111

  112. Respond to this post—

Return to navigation
391