Using the IE7 Script
to fix IE6 deficiencies and improve IE7& 8 conformance

The issue

When Internet Explorer version 6 (IE6) was introduced in 2001 it was a groundbreaking product but browsers were then being developed so fast that it was soon overtaken by others which conformed better with web standards. IE6 quickly became the butt of authors' humour but, in spite of this, ten years later it is still widel y deployed and, although numbers are reducing, its final demise may well be some way off. Consequentially authors still need to design sites that will give visitors using IE6 an acceptable experience.

IE7 script

In the recent past authors have usually worked around the problem by writing a specific style sheet and targeting it at this browser ^{[Ref 10]} – a process that has often been very time-consuming. Here instead I describe a method using a script developed by which not only simplifies this process but can often dispense with the need for a special stylesheet and indeed goes well beyond what is possible using stylesheets.

Dean Edwards' objective is to make IE6 behave like IE7. IE7 is a much better, though still somewhat deficient, browser so this is a real step forward. The approach uses a JavaScript library which he calls IE7. He says

IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6 [Ref2 ]

The library has been made freely available for use. It consists of several scripts which will be described the chief of which is ie7.js. Using this script you can fix many troublesome issues which are not possible using targeted stylesheets

• Fixed positioning is supported
• Maximum and minimum width and height are supported
• Several additional CSS selectors are now supported e.g. parent>child

A complete list of the enhancements is included on the which shows that some IE5 problems are also corrected.

Among the more significant bugs not corrected by ie7.js are

• Double margin float bug
• Unscrollable content bug
• Peekaboo bug
• 3 pixel text jog bug

The first three of these can be corrected by the use of a second script ie7-squish.js which is also included in the library.

Using the script

The purpose of this page is to explain how to use the script and what may be expected of it. Most of this may be gleaned from Dean Edwards' site but it requires some digging so I hope this guide may be helpful.

Loading the script

The script is loaded into the head area of the page, hiding it from other browsers, using conditional comments in the same way as we target specific browsers ^{[Ref 10]}. The required code may be placed either before or after the stylesheets.

This will run the script from an online directory (a.k.a. folder). Alternatively you can the files choosing the latest version – 2.1(beta4) at the time of writing – and unzip them. You will find a directory 'ie7' and a sub directory 'src'. Both contain essentially the same files, those in the src directory are source files and thus readable, those in the main directory are essentially the same but compressed so are more difficult to read.

Create a directory named 'ie7' in the same directory as the page involved and load the following files from the ie7 directory into it.

• IE7.js
• blank.gif

You can then work with local copies of the files and ultimately upload them to your server. The linking code required then becomes:

The other files will be run from the script.

What you get for your money

Let's look at what you get by using this script.

• It makes no difference whether you run it using code like sample 1 or sample 2
• Browsers other than Internet Explorer will be unaffected by the code
• The targeted version of IE will respond to the script unless the visitor has scripts switched off.
• IE6 will respond to
  
  • Fixed positioning
  • Maximum and minimum width and height
• Many selectors previously unsupported are
• IE6 will support alpha transparency for png images both as background and foreground images – but see next

Notes on png images

While gif images support binary transparency only, i.e. an area is either transparent or opaque, png images support 256 levels of transparency. All modern browsers support this but IE6 does not. The script invokes the and can fix this but only if the image is renamed with a filename terminating in '-trans' and file extension 'png'. A limitation is that, for background images, tiling is not supported – The image will appear only once.

Note that the images are shown at their actual size i.e. it is not possible to resize them using html or CSS.

An issue with a png filtered in this way is that if it is used as a background image any link falling on the background may fail to work. A workaround ^{[Ref 12]} is usually possible e.g. by giving the link position: relative;

Dealing with other bugs

What you do not get

Some important bugs are not corrected by the script. These include:

Fixing other bugs using squish

The first three of these bugs can be fixed using a second script called ie7-squish.js The download includes this, to use it start by moving it into the same ie7 directory as the other scripts.

Loading the script

As before, you can run the script either from the online directory or from a local directory. Just modify the code given in sample 1 or 2 as appropriate to:

or

Dean that the reason that ie7-squish is not included as an integral part of ie7.js is that it will of some elements and give them the somewhat mysterious property of 'hasLayout'. This can result in damage to some layouts when viewed using IE6. It is therefore up to the author to test and check whether applying squish is necessary in the first place and, if so, to test to see if it does any damage. In some cases residual issues may need a specific stylesheet to be targeted at IE6 in the traditional way to clear up remaining issues.

A good explanation of haslayout has been produced by Ingo Chao ^{[Ref 9]}

Going further – ie8.js and ie9.js scripts

While ie7.js makes a huge improvement to IE6 it still aims only to bring it up to the status of the IE7 browser. Why stop there? IE7 is still lacking in support for much of even CSS2.1 Dean has thought of that too and produced, in the same library, the ie8.js script. ie8.js includes all that is in ie7.js along with many enhancements. You can compare them on the .

The ie8.js or ie9.js scripts can be applied to both IE6 and IE7 browsers. The result is a dramatic improvement in conformance for both browsers. The author gains freedom to use much more of the potential of CSS2.1 in the confidence that more visitors will see pages as intended.

To avoid any possibility of the Microsoft code in the IE7 browser clashing with Dean Edwards code designed to do the same thing all the scripts detect the version of browser in use and do not apply Dean's code if it is not required.

Loading the script

The script is loaded in exactly the same was as before making adjustments only to call the correct script and apply it to IE7 as well as IE6 browsers. For instance the sample code 4 could be changed to:

Note: Of course when you use any of the scripts you ned to include only the highest you wish to apply.

Summary

All the scripts appear to be reliable, easy to use and can be recommended. They fix a number of the bugs present in IE6 and can enhance IE7 or IE8. Neither can be guaranteed to fix all problems on any particular page so a residue may remain. Some of these may be fixed by adding the ie7-squish.js script but in either case there may remain some unfixed issues. The author has then to choose whether to ignore these or attempt a work-around using a targeted stylesheet.

All of these scripts require the browser to have scripts enabled and will be ineffective otherwise. In this respect the approach is not as safe as tackling the whole problem by writing a special stylesheet targeted at IE6. Doing this is however often very time consuming and is still incapable of fixing several of the issues involved. Any author concerned about the use of scripts and the lack of support for the small proportion of visitors likely to have with scripts switched off can display a message on the page explaining how to enable scripts.

Check list

When publishing pages using these scripts here are some last-minute checks specific to this approach.

1. Include the following files in the ie7 directory
   
   • IE7.js, IE8.js or IE9.js as appropriate
   • blank.gif
   • ie7-squish-js if used
2. Upload the ie7 directory into the root directory of the page
3. Check that all transparent png images, except those used as tiled (repeated) backgrounds, are renamed terminating '-trans.png'
   
   • In the html files
   • In any stylesheets that refer to them
4. If the same images are used on other pages that do not use these scripts either rename them on all pages or leave un-renamed copies in situ.

Copyright © 2009 - 2011 Charles Cooke
Updated 1st February 2011