Like it or not, MS Internet Explorer is still the most used browser in the world. The reason for this is MS Windows XP/Vista. IE is bundled with every copy of Windows. Now we have two major IE version:

1. Internet Explorer 6 [IE6]
2. Internet Explorer 7 [IE7]

I will show you what optimizations I needed to add to Starscape to make the theme more compliant with IE6/IE7. Maybe you can use some of this optimizations in developing your own themes.

As for the standard compliance, IE7 is much better, and it’s much easier to make optimizations so theme will work in IE7 as it should. One of the most important improvement for design point of view is full PNG transparency support.

IE6 has much more quirks then IE7, and also can’t render properly transparency for PNG (PNG24/32)

In the next few months, Microsoft will release new Internet Explorer 8. Current Beta versions are very unstable and hard to use, so I will not consider IE8 as a valid IE release.

PNG Support in IE6

There are different approaches you can take on making IE6 render PNG transparency, but all of them have one problem that can’t be solved: you can’t fix PNG transparency if you use an image as a tile. So, main menu in Starscape theme has different levels of transparency done by PNG image. For every browser I can use image 1×1 pixels big, but because of IE6 and the PNG fix problem, I need large image to cover the main menu without tiling. Here is the CSS class I use for fixing PNG transparency problem in IE6:

.png {
    azimuth: expression(
        this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "/images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
    );
}

You need to add this class to IMG tag, DIV tag (image as a background) or other elements containing the PNG image. Also, it’s good idea to prevent other browsers to load this class. For this I use conditional elements.

Conditional loading

Conditional comments are only available in IE browsers, and can be used to hide code from other browsers. Only IE knows what this comments are for, all other browsers will ignore them as a regula comments. These conditional comments can be used to load additional CSS file, JavaScript or anything else you might need. You can see example of this comments in Starscape theme.

Basic conditional comment format is like this:

<!--[if condition]>
(HTML to use if condition is true)
<![endif]-->

Condition contains logical operator and IE keyword. IE keyword can be be only IE, or IE with version number (IE 5, IE 6, IE 7). If you have no operator (example: if IE) then condition is true if the browser is any IE. Here are some examples for operator – key word combinations:

• if IE: true if browser is any IE
• if !IE: true if browser is not IE
• if lt IE 7: true if browser is older then IE7
• if gt IE 5: true if browser is newer then IE5
• if gte IE 6: true if browser is IE6 or newer

In Starscape I use two conditional comments. “If IE” is used to load CSS for all IE browsers. “If lte IE 6″ is used to load CSS file and style with .png class for IE6 and older versions.

CSS Optimizations

There are two separate CSS files, one for all IE browsers and one only for IE6. Most of the fixes are related to the box model that is much different in IE compered to all other browsers. I will not go into to many details because fixes are very simple.

I didn’t followed any website suggestions for applying fixes, but I rather use Microsoft IE Developer Toolbar. This is a great tool that works with both IE6 and IE7 and it can help you figure out why the design is looking bad. It’s similar to Firebug, but only for DOM and CSS manipulation.

Conclusion

I hope this will help you with your own Wordpress themes optimization for IE browsers. If you have any questions regarding this article or Starscape theme in general, please ask.