Internet Explorer 6 – web developers love to hate it. But, unfortunately, IE7 adoption rate is not going as fast as expected, so we still need to make websites look decent in IE6.

I recently spent quite some time making Century21.ca look decent in IE6, the following is a quick cheat sheet of the most common fixes I used.

1. { position: relative }
   Adding this property can fix all sorts of bugs, from peekaboo bug to repeating character bug. In some cases removing this property can also fix things.
2. {width:auto | pixel value }
   Another common peekaboo fix. Also broken box model fix - add left and right padding and border to box width.
3. {display:inline}
   Element is floated and has any margin larger than zero .
4. {margin-left | right: -3px}
   Repeating character bug. More
5. {background-image:url();
   background-repeat :no-repeat;
   background-position: 0 0; }
   
   If background images are not showing up and you are using shorthand try breaking the properties apart.

More details and hacks

Methods to target Internet Explorer 6 and below

/* targets IE6 & below - CSS valid */
* html {}

/* applies property in IE6 & below - CSS invalid */
_property: value;
/* applies property in IE6 & below - CSS invalid */
-property: value;