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;

For the past few days I have been working on a frustrating problem with Internet Explorer 7 - two websites that my company created and supports are totally unusable in IE7. The pages take a long time to load, and when they do load they continue to use more than 50% of the CPU. After some hunting, testing and searching I finally narrowed it down to how PNG’s are being used. I have not found any other documentation about my exact problem, so I will attempt to document it here.

Unlike older versions of Internet Explorer, IE 7 supports png file format. This is great – unless you did not rely on the star html hack for png background images in your CSS. For example, I am currently working on a site that uses an opaque png file as a background of the main content area. It used CSS something like this (which I did not write, but was tasked to fix):

.opaque_box {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/ trans.png', sizingMethod='scale');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.opaque_box[class] {
  background-image: url(../image/trans.png);
  }

This css worked fine with IE 6, but brings IE to its knees. It can literally lock-up your computer. When I get a chance I will try to put together a test page to demonstrate this behavior. Work-around is to use either the star html hack or conditional comments to target IE pre-version 7:

* html hack
The bad news is that it is no longer supported, so all css hacks that target IEWin will no longer apply in IE7. But, in the case of png support this is a good thing.

/* IE versions 6 and earlier will apply this rule */

* html .opaque_box {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/ trans.png', sizingMethod='scale');
}

Conditional comments
Conditional comments only work in IE on Windows, and they are perfect for giving special instructions meant only IE. The basic structure is the same as an HTML comment (). So other browsers will see them as normal comments and will ignore them. The following code will include a stylesheet for IE version 6 or less:

Special syntax (I accidentally used lte instead of lt, which had me stumped for half an hour):

• lt: less than
• gt: greater than
• lte: less than or equal to
• gte: greater than or equal to

More details on conditional comments
More on IE7 and CSS: MSDN and p.i.e..

I discovered an interesting Internet Explorer CSS bug today relating to relatively positioned elements inside and element with overflow set to auto.

Say you make a div that scrolls using some basic CSS

.overflow {
height:250px;
width:200px;
overflow:auto;
}

Works just fine, as the example below shows:

But, if you set any of the child elements to

#test2 p {position:relative;}

Scrolling will no longer behave as expected. It seems Internet Explorer incorrectly overlays the relatively positioned element, making it seem “fixed” when when placed in an overflow box.

I have not had the time to look for a word around, except to remove the position:relative (in my particular case I did not need that declaration). For more details the W3C Visual formatting model