Let Internet Explorer 6 Behave Like Internet Explorer 7

We all hate Internet Explorer 6 because the lack of support for CSS and the security issues it has. The browser is 7 year old and dated, but is still used by too many people.

Before we are finally ready to make our websites only work in the modern browsers, we have to deal with this problem. One solution could be the IE7.js JavaScript library.

What is the IE7.js JavaScript library?

IE7.js is a JavaScript library to make Internet Explorer 6 behave like Internet Explorer 7, a more modern browser. This library fixes many CSS and HTML issues developers are constantly trying to deal with.

What bugs does IE7.js fix?

Many CSS properties are supported by most modern browsers but not by IE6: IE7.js solve these problems. IE7.js also fixes many IE6 bugs that annoyed us from day one. Here are the most important ones:

CSS Selectors

  • parent > child
  • .multiple.classes
  • :hover
  • :first-child
  • [attr]
  • [attr="value"], [attr~="value"], [attr|="value"], [attr^="value"], [attr$="value"]
  • [attr*="value"]

CSS

  • Background-image – PNG alpha transparency (IE5.5+)
  • Background-attachment – Support fixed positioning
  • Position – Support fixed positioning
  • Margin – Support auto (IE5.x)
  • Cursor – Support pointer for IE5.x
  • Display – Convert list-item to block for IE5.x

HTML

  • img – PNG alpha transparency
  • abbr – Bug fixed

How to implant this library to your website?

Yes I am sure you are. Next we will implant the library into your website. You can do that by adding this code between the <head></head> tags.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

It sounds to good to be true, right?

There is only one real disadvantage of this library. Like any other JavaScript script, it won’t work unless JavaScript is activated on the computer of the user.

The change exists that IE6 users have turned off JavaScript because of the security risks IE6 has. And if that’s the problem, IE7.js won’t work, and so won’t the features you have implanted.

With the result your website might not show correctly on these computers. So, you still have to make sure your website works in IE6 if Javascript is turned down and that doesn’t solve the whole IE6-hate-thing.

Further reading and links

If you want more information about this JavaScript library, be sure to visit the following links:

The IE8.js file

I decided to focus this article on IE7.js because that solves the most common bug fixes a normal developer would require and because Internet Explorer 8 is still in BETA. If you decide to use the IE8.js file instead of the IE7.js file, here’s how to do that:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Note: You don’t need to include the IE7.js if you are using IE8.js.

Liked this post? Subscribe, or Share and Enjoy:
  • Digg
  • del.icio.us
  • Blogosphere News
  • Design Float
  • DZone
  • StumbleUpon

Tags

This article is written by:

Name: Stefan Vervoort

URL: http://www.divitodesign.com

Description: I am a 18-year-old webdesigner and blogger from Waalwijk, the Netherlands. I also blog at WPTOY and work at DivitoMedia.

46 Responses

  1. init2me says:

    great script, going to test it…
    hate the padding and box modell problem, what can i do?

  2. There are many articles about the padding and box model around the net. Go for em! Google is your best friend :)

  3. This certainly sounds to good to be true! I will definitely try it out!

    About the ‘doesn’t work when javascript is disabled’ issue: besides boycotting Internet Explorer 6 I think people who disable javascript in their browser should be ignored too!

    I mean, where’s the internet without javascript…

  4. Joe says:

    Does this work with repeating transparent PNG background images? All the other “PNG fix” scripts I’ve found don’t support repeat-x/repeat-y.

  5. Boiss says:

    For double padding when used with width or height, set the css style

    _display:inline;

    Note that the underscore is to make that property apply only to IE6.

  6. [...] Let Internet Explorer 6 Behave Like Internet Explorer 7 » DivitoDesign (tags: ie6 ie7 webdevelopment webdesign javascript css hack library) [...]

  7. Tom says:

    More interesting would be a script that makes IE7 behave like IE6. Not sure, instead of using this, it would be better to just upgrade to IE7, unless someone is running Win98 or Win2k.

  8. I tried it back then when it was first introduced but it didn’t work out well enough. There always was a flicker before the script got fully loaded in which the page looked like crap.

    Btw. your comment section is broken in FF2.

  9. Matt P says:

    Will this fix ie6 layout bugs as well? i.e. peekaboo, floated double margins etc

  10. justin says:

    am i the only one or does this not work?

  11. Micheil says:

    Hmm.. maybe this is just me, or I’m doing something seriously wrong, but I can’t see this javascript fix library fixing anything in any way, shape, or form.

  12. rockstar says:

    That sounds good . nice post !!

  13. Tertius says:

    Hacks hacks and more hacks.

    I hope this problem will change…

  14. Timothy says:

    “IE7.js is a JavaScript library to make Internet Explorer 6 behave like a modern, standards-compliant browser.”

    Is this saying that this script makes IE6 work like IE7, and that IE7 is thus standards-compliant (and modern)? If so, that is horribly, horribly false. IE7 has corrected some of the woes of IE6, but still has left a collection of headaches. Any experience web developer would surely agree.

  15. [...] Let Internet Explorer 6 Behave Like Internet Explorer 7 [...]

  16. @Timothy – Of course, you are absolutely right. IE7 isn’t a standards-compliant browser. IE7 did correct many of the bugs that IE6 has and has become much easier to work with (for me that would be). I will correct this error in the article.

    @Double margin – You can google these problems up. This library don’t have a solution for the double margin problem. There is a customized solution of IE7.js (also available on the Google Code page) that does fix the bug.

    @Doesn’t work – If you have implanted the javascript file correctly, it should work. If not, please let me know what the problems are.

  17. Stefan Matei says:

    Very interesting concept. I do have some doubts (sounds too good to actually work well enough), but I’m trying it in my next project.

    So thank you Stefan!

  18. [...] bastante simples de resolver todos os bugs do interner explorer 6 é utilizando a biblioteca IE7.js. A biblioteca faz com que o IE6 fique com a cara do IE7. Para tanto basta adcionar a condiconal [...]

  19. [...] Hier je suis tombé sur un post très surprenant : une librairie JavaScript qui fait fonctionner IE6 comme IE7. [...]

  20. [...] ??????? ??? (????????????;) Javascript ?????? ??? IE6 ??? ????????? ?? ??? ??????????? ?? ???? ??? IE7! ?? ???? ??? ?????????? ?? ????? ??????? ????? ?? [...]

  21. Sumesh says:

    I had read about ie7.js earlier – and it did sound too good to be true. Most of my designs are minimalist and hence look almost perfect in IE6. It seems more designers will use it as IE6 users refuse to upgrade it.

  22. binocle says:

    You can also decide to throw all that IE6 support away …
    Users won’t abandon it by themselves, we have to push them and show them how bad IE6 render websites.
    If webdesigners still spend hours to fix things to render properly in IE6, that f*** browser will still be here in 10 years.
    Stop supporting it, and kindly explain to your visitors why you do that, and why they should upgrade or change their browser.

    • Yes, but small sites shouldn’t do that. It doesn’t have impact. If google/msn/yahoo etc (and all newspapers and more) point users to a modern browser, we should see people change. If the small blogs and sites do that we barely see change, that’s the difference.

  23. binocle says:

    I don’t agree. If more and more small sites, blogs drop ie6 support and put warnings and update advises, more and more people will be tented to change their browser, instead of getting 10 times a day a “your browser is a old crappy thing” popup message in the face ^__^

  24. M@nd3le says:

    please add “clear:right;” to “.commentlist li” style in style.css on line 613 :) comments will be readable on FF2 :)

    btw: nice site:) \o/ d(^_^)b

    • Hey M@nd3le, you are awesome! Didn’t found the time to fix the bug but thanks to you it was a piece of cake! Really made my day! :) If you need any help with anything, be sure to let me know!

  25. I used to have lot of problems with ie6 at my job and with my hobby projects too. I’ve figured out some workarounds for most of them but not all. Now I will test this js library and see how it works. Thanks for the share dude

  26. bebo skins says:

    how about microsoft stop making a cruddy browser and just leave mozzilla or opera do their jobs for them

  27. [...] ????? ??? Internet Explorer 6 ?? ?????????????? ??? Internet Explorer 7 : ???? ???? ???? ??? ????????? ??? ??? Stefan Vervoort. ?????? ???????????? ??? ?? ?? ???? ?????????, ????? ??? ????? ??? ??????? blog ??? ??????????. [...]

  28. Michael "Vendor Lock-in" Howell says:

    @bebo skins: That’s easy. IE has a lot of bugs related to standards, but also implements a lot of proprietary features (ActiveX, anyone?). The hope is that web developers will simply use the bugless proprietary interfaces instead of the buggy standard ones. At least, that used to be the plan (let’s hope they’ve given up w/IE8).

  29. Michael "Wrong answer to the right problem" Howell says:

    Put simply, IE[78].js addresses the right problem (unlike the JavaScript frameworks, such as YUI) that IE sucks. The right answer would, of course, be for M$ to fix their browser (more likely, rewrite it) or for nobody to use or develop for it.

  30. This is awesome. I’m going to link back to this article, Stefan.

  31. VHTrading says:

    At my work we’re stuck with IE 6.0 (I know, it’s ridiculous). I’ll see if I can integrate this into our website so internal employees can view it as if it were on IE 7.0. Thanks for the link.

  32. internet says:

    Nice post. Thank you for the info. Keep it up.

  33. Scotty Katweb says:

    Excellent script, thank you Stefan!

    Had been Googling all day for solutions to my numerous IE6 problems (no probs in IE7/FF/Op/Chrome/Saf) and finally found your site and IE7.js.

    Have just put it on my site and all IE6 probs disappeared. Will still have to do some IE6 conditional statements for those without JS enabled but that’s okay with me!

  34. Be sure to mind the fact that if you are designing a website with CSS, your potential website viewers using IE7 will see the site differently that you. IE always presents problems in CSS.

  35. ??????? says:

    People still use IE? I thought it was dead.

  36. Free gadgets says:

    Yeah, i’ve only just started using IE 7 and it is so much better. Thanks for the post.

  37. [...] Danas vam donosimo nešto još bolje! Dobri ljudi s divitodesign stranice napravili su IE7.js JavaScript library koja nam omogu?uje da se Internet Explorer 6 ponaša kao verzija 7. Zvu?i pre dobro da bi bilo [...]

  38. Neko says:

    For PNG transparency to work you must end all images with “-trans.png”