Easy IE Conditional CSS with No Hacks!

Any serious CSS person has hacked their way through more ‘Internet Exploder’ issues than they care to talk about. Even if there are only a few small issues to fix in an area, it can be difficult to track them through multiple style sheets (ie. conditional sheet for IE6 & 7). Hacks are just bad practice, so what can you do? There is a better way! I came up with a neat little piece of code that has greatly simplified my life when dealing with cross-browser compatibility.

If you add a unique identifier for the IE browser that is giving you trouble, then just add the ID your CSS in order to control it with ease. Here is what you do:

Copy the following code and insert it just below the opening body tag of your template:

<!--[if IE]>
<div id="ie">
<![endif]-->
<!--[if IE 6]>
<div id="ie6">
<![endif]-->
<!--[if IE 7]>
<div id="ie7">
<![endif]-->
<!--[if IE 8]>
<div id="ie8">
<![endif]-->

Paste the next bit of code right above the ending body tag:

<!--[if IE 6]>
</div>
<![endif] //-->
<!--[if IE 7]>
</div>
<![endif] //-->
<!--[if IE 8]>
</div>
<![endif] //-->
<!--[if IE]>
</div>
<![endif]-->

If you have a box displaying at different heights in Firefox and IE6, write your CSS like this:

.sizebox {height:30px;}
#ie6 .sizebox {height:28px;}

It is MUCH faster and easier to see what is happening with the template when you are reviewing your code to make changes. It’s better than reviewing several different style sheets to find what has been created. You will still need a separate style sheet for IE6 and IE7 so you can store the CSS that doesn’t validate. (You may need it to pound IE into shape!) I personally don’t support IE5 or 5.5, but if you support it just add those to it and you can single it out. 90% of the fixes can be done with this custom code. It’s helped me a lot and I’m sure it will help you too!

The Core Team
Editorial Staff Members at 'corePHP'
Editorial staff for the Core Technology Blog for 'corePHP' - news, views insights and advice for e-commerce, marketing technology , web design and development.

14 thoughts on “Easy IE Conditional CSS with No Hacks!

  1. Antonio

    Hi
    this is very interesting. Just I need to know how to apply it only for ie6 to a div with unique id like this:

    with this css:

    #xyz {
    height: auto;
    width: 286px;
    }
    where I must to insert the
    and the tag?

    sorry, I’m a little confused
    kindly regards

    1. Jonathan Shroyer

      You would insert the code I mentioned just below the opening body tag and the second half just above the closing body tag. Then you would write your IE6 code like this:
      #ie6 #xyz {
      height: auto;
      width: 286px;
      }

      Hope that helps!

  2. Bryan Stanley

    I think I could write a book on the frustrations of IE. The conditionals are a great way to manage IE however for smaller sites and annoying random bugs, I’ve found these hacks (I know, it goes everything against the title of this post) to be very useful because of it’s use inline.

    background: #ccc; //will work in all browsers
    #background: #090; //will work in IE 7 and below
    #_background: #f00; //will work in IE 6 and below

    The order in which you put these hacks is important otherwise it will not render properly. Just thought I’d share.

    1. Steven PignataroSteven Pignataro

      Bryan,

      These are awesome – thanks for the share.

      Kindest regards,

      –Steven Pignataro
      CEO ‘corePHP’

    2. Jonathan Shroyer

      I can definitely see a use for this for inline styles. I haven’t really given that a thought since I rarely ever use inline styles. The main reason you don’t want to use hacks in your main css is that you don’t know if IE8, 9 or 10 will somehow render your hack for IE6 or 7 and have to go back through all your sites and find a fix for it. Conditionals will always work with the correct browser. It’s also VERY easy to find the code with my method because you see #ie6 or #ie7 in front of the style which is very handy when dealing with hundreds of lines of CSS. I will definitely file your code away for my inline styles though. Thanks!

  3. Bryan Stanley

    It blocked out my code snippet so hopefully this will post:

    style=”width:300px; height:300px; background:#ccc; #background:#090; #_background:#F00;”

  4. Mads

    Just what i was looking for. So easy yet no one else has made any statements about this except for you.

    I’m truly gratefull… Thanks :)

  5. rlandes

    I use the conditionals, but to load a stylesheet like “ie6only.css”, where I can only drop the needed adjustments for IE6 (png fix etc), and keeping a valid nice and clean CSS that apply to Mozilla browsers.
    But let me point out that if you build having IE6 bugs in mind, you won’t, for example, do a float right, and then give margin right to the same element, since you know is gonna double it ( IE6), so if possible I would rather use padding instead.
    Working on that fashion will let you do very large scale projects with a minimum of cross browser issues. Good suggestion thou.

    1. Jonathan Shroyer

      I load a separate stylesheet as well for the code I know won’t validate or if there is a lot of changes in the same area. No matter how well you code there are still little (or big) changes that happen and this is where I use it the most. I may want to bump something over a little and it’s much easier to follow what has been done when looking at your css later if it’s in the same area. I definitely agree that you have to know how to recognize IE6 bugs before they happen though. It saves a lot of headaches in the end.

  6. Christopher Werby

    Very handy, thank you. It’s just a typo, but I think there’s a duplicated bit in the code sample. You have two identical conditional comments for IE7. So if someone just copied and pasted, in IE7 they’d get two identical div ids at the top and the wrong number of tags at the end.

Comments are closed.