IE 7 and PNG

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..

This entry was posted in Web Development and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>