We've all been there. You are just humming along, building the perfect website, when you have a sudden realization that seriously ruins your feng shui: you haven't debugged your layout and styles for IE. And as much as you might just want to say, forget it, we all know IE still takes up a significant amount of the browser market and your client probably can't afford to miss out on that many users. But take heart! I am here to provide you some quick tips & tricks acquired over a long history of battle with IE that will help you avoid and conquer the many 'gotchas' of IE rendering.

As an aside, we all also know that IE has made some strides in conforming to generally accepted web standards, especially since IE 6 (prompting this humorous apology from Microsoft). Also, since IE 6 usage is significantly on the decline (probably because Google dropped support for it on Youtube in 2010), many development firms or client contracts no longer require that their sites work in IE 6. Nevertheless, I am assuming in this article you will have the confront the terrible beast that is IE 6 and the tools and methods I discuss here will allow you to defeat it.

Before I get into the specifics of my approach to IE debugging, I should mention that any styles which are specifically for IE, such as the ones discussed here, should be placed in an IE specific stylesheet that is served to IE only via conditional comments. A discussion of conditional comments and how to use them (with examples) can be found here.

Now, my approach to IE debugging essentially boils down to three simple components, which I have dubbed the "3 pillars of IE debugging". Allow me to explain each component in detail.

Float clearing

One of the most common pitfalls for any layout is float clearing. For those who don't know, float clearing issues occur when you have floated elements inside a container, causing the container element to not expand to the full size of the floated elements. An illustration of the problem can be found here. The best solution to the problem is to employ a CSS technique known as "clearfix", which implements some tricky CSS pseudo-classes to force browsers to '"clear" the float and make container elements expand to the size of their floated children elements. Here is the version of clearfix I use on all my projects, which works all the way down to IE 6:

/* float clearing for IE6 */
* html .clearfix {
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix {
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix {
    :after {
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
      font-size: 0;
    }
}

To use this solution, just apply the class of "clearfix" to any container elements with floated children.

Explicit width and height

IE, especially older versions, is notoriously bad at calculating element sizes, even for block level elements. There are several reasons for this, including the fact that IE uses a different 'box model' than most browsers, but suffice to say for now that it is a problem that you will encounter. Basically, any time you notice incorrect element sizes in IE and float clearing has been ruled out as the problem, you should try to add an explicit width and height to your styles for those elements. Also, IE sometimes has issues with element sizes declared in percentages, so you may have to provide explicit size declarations in those cases as well. Absolutely positioned elements require explicit size declarations as well.

{ position: relative; zoom: 1; }

Sometimes, even when your markup and styles are totally correct and you've followed the above guidelines, your elements will still appear out of place in IE. This is especially common for floated elements. In those cases, it's time to call upon the most useful tool in your IE debugging arsenal: the "zoom: 1;" CSS declaration. Not to get too technical, what this declaration does is trigger an IE property known as "hasLayout" that usually allows your elements to render correctly. So if all else fails, just add "zoom: 1;" to the styles for an element and see if that fixes the problem. I have also found that adding "position: relative;" to styles for elements in IE often helps to remedy layout bugs, but be more cautious with that declaration, since it has other effects such as resetting the absolute positioning context.

These techniques may seem simple, but trust me, through some combination of them I have been able to make some very complex layouts work flawlessly all the way down to IE 6. I hope they prove as useful to you and spare you some of the suffering I endured before I was aware of them.

Next time, more IE FUN! I'll be going over some more IE quirks and how to deal with them, including: CSS files limit, PNG transparency, and RGBA transparency. Until then, keep your code hand strong.