IE7 Script
- Top of page
- IE7 Script
- Using the script
- What you get
- png images
- Dealing with other bugs
- IE8 script
- Summary
- Check list
- References
Issued 6th March 2009
Charles Cooke online
Charles Cooke online
IE7 Script
Issued 6th March 2009
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, 8 years later it is still widely 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.
In the recent past authors have usually worked around the problem by writing a specific style sheet and targeting it at this browser – a process that has often been very time-consuming. Here instead I describe a method using a script developed by Dean Edwards 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.
You seem to have scripts switched off. To see this page as intended in Internet Explorer scripts need to be switched on. Access this option via Tools > Internet Options > Security > Internet > Custom level and look for 'Scripting'.
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
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
A complete list of the enhancements is included on the IE7 Test page which shows that some IE5 problems are also corrected.
Among the more significant bugs not corrected by ie7.js are
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.
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.
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. The required code may be placed either before or after the stylesheets.
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript">
</script>
<![endif]-->
This will run the script from an online directory (a.k.a. folder). Alternatively you can download the files choosing the latest version – 2.0(beta3) 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.
You can then work with local copies of the files and ultimately upload them to your server. The linking code required then becomes:
<!--[if lt IE 7]>
<script src="ie7/IE7.js" type="text/javascript">
</script>
<![endif]-->
The other files will be run from the script.
Let's look at what you get by using this script.
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 Microsoft Alpha Image loader 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
is usually possible e.g. by giving the link position:
relative;
Some important bugs are not corrected by the script. These include:
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.
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:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript">
</script>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7-squish.js"
type="text/javascript">
</script>
<![endif]-->
or
<!--[if lt IE 7]>
<script src="ie7/IE7.js" type="text/javascript"></script>
<script src="ie7/ie7-squish.js" type="text/javascript"></script>
<![endif]-->
Dean has explained that the reason that ie7-squish is not included as an integral part of ie7.js is that it will change the behaviour 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
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 ie7 test page.
The ie8.js script 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 both the ie7.js and ie8.js scripts detect the version of browser in use and do not apply Dean's code if it is not required.
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 would change to:
<!--[if lte IE 7]>
<script src="ie7/IE8.js" type="text/javascript"></script>
<script src="ie7/ie7-squish.js" type="text/javascript"></script>
<![endif]-->
Note: Of course when you use IE8.js there is no need to link to IE7.js as well!
Both ie7.js and ie8.js appear to be reliable scripts which are easy to use and can be recommended. They fix a number of the bugs present in IE6 and can enhance IE7. 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.
When publishing pages using these scripts here are some last-minute checks specific to this approach.
The script project pages
Other pages