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.
- { 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. - {width:auto | pixel value }
Another common peekaboo fix. Also broken box model fix – add left and right padding and border to box width. - {display:inline}
Element is floated and has any margin larger than zero . - {margin-left | right: -3px}
Repeating character bug. More - {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.
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;