Home

Make your Internet Explorer (more) Standards Compliant

An Introduction

A good part of the bad vibes against Internet Explorer stems from the fact that its standards compliance (vis-a-vis, its adherence to W3C standards like CSS, CSS2, PNG and XHTML) is poor, outdated and often badly implemented. Bad PNG support is a particular grudge that designers bear because alpha transparency would make much juicier things possible, so would, in fact, the support of newer CSS2 selectors.

One way to workaround IE's limitation is to employ client-side javascripts to trap the way the browser handles CSS elements and to work in a proper implementation. Alistapart's PNG support for IE is an article that explains how to reroute PNG support to Microsoft specific DHTML and then achieve a similar result as more compliant browsers. However, it becomes a pain to continuously monitor IE's quirks and develop workarounds for it, just as it becomes difficult to ensure that all the workarounds don't come to blows with each other.

Enter IE7. It's an ambitious project to develop a javascript library to make the browser's compliance up-to-date. It already has an accomplished feature list: transparent PNG support, position: fixed, a proper box-model, multiple classes, :before/:after content and more; the list also seems to be growing by the day. The library is meant to be used as an include by web developers, but as we shall see, it can be of utility to end users as well.

How do I make my standards compliant site work in IE?

As a rule, standards compliant sites "work" in IE, or they should; the main drive of web standards is to make every web page behave the same in every browser, and regardless of IE's quirks, if you're not catering to 95% of your market, you are not a savvy web designer.

To work around IE's quirks though, you just need include the IE7 library, it's that simple. (Well, it's not, IE7 has its quirks too as you will discover, but it does make designing for IE a much pleasanter experience)

First off download IE7 from http://dean.edwards.name/IE7/ and extract it to any directory on your site. IE7 includes pretty good documentation, and as described here, you need only add these statements (preferably in the <head> of your code) to make it work.

<!--[if lt IE 7]>
<script src="/path/to/ie7/ie7-standard-p.js" type="text/javascript">
</script>

To leverage the full power of the IE7, you'll need to brush up on CSS2 (and CSS3). Some things however, like transparent PNGs, work right out of the box.

Does this help make my Internet Explorer (more) standards-compliant?

The short answer

Yes.

The long answer

Internet Explorer is a browser two to three years old. It just doesn't have the metal to survive against other, better browsers feature to feature. However, at the time it was released, it was (arguably) the best browser around, which partly accounts for its market share today. The question therefore, is should you work hard to make a clunky old browser standards-compliant? Why not switch to a better browser? Firefox and Opera provide tabbed browsing in addition to its excellent standards-compliance, and there are even many IE derivatives that has additional features wrapped around the IE core. Rather than follow these esoteric steps to get your IE up to speed, switch and enjoy the confines of a different browser. It might take you a while to get used to it, but it will make your browsing experience much more enjoyable.

If you've decided not to do that, let's move on: follow these simple steps to boost your IE's intellect...

  1. Download IE7 and extract it to a folder on your hard drive (say C:\IE7\).

  2. The inclusion of the IE7 scripts to a webpage certainly increases its compliance. So our aim would be to somehow automatically insert it into every webpage. We can do this by using a native proxy and a feature called content rewriting. What we are going to do is to make it so that the proper javascript is inserted into the <head> tag of every HTML page that we receive from the net. To do this, first we need the proxy (a popular free one is Proxomitron) and then we need to configure it so that it does the content rewriting.

    The start up screen of Proxomitron

    Download Proxomitron and install/extract it to your hard-drive.

  3. To get Proxomitron up and running, configure your Internet Explorer to use a proxy. To do this go to Tools->Connection->Settings, and add a proxy for your type of connection. See this page for detailed instructions on how to set this up. Note: If you've got broadband through a cable connection, instead of setting the proxy for a dial-up connection, you've got to set it up for a LAN connection.

    Once you've got it up and running (verify by quitting Proxomitron and trying to load a page in IE [it won't work]), proceed to the next step.

  4. Start up Proxomitron, and add a new filter: Edit Filters > Web Page > New. In Filter Name type in "IE7 Compliance".

    Do not tick Allow for multiple matches and leave URL Match and Bounds Match blank. Insert <head> into Matching Expression and the following code into Replacement Text:

    <head>\n
<!--[if lt IE 7]>
<script src="c:\\ie7\\ie7-standard.js" type="text/javascript">
</script>

    The rules of Proxomitron

  5. That's it! Load up your new compliant Internet Explorer, point it to a good page to test the new-found compliance: the famous Meyer Complex Spiral demo.

    The complex spiral demo

If that works, your IE has just become a (wee) bit more pleasant to the web.

Congrats, now go have a beer or something.

By vishnu on 2004-09-16