Grow your CSS skills. Land your dream job.

IE 6 Blocker Script

Published by Chris Coyier

Fed up with supporting IE 6? Ready to just cut it off? I don't blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always the case, and I feel like the JavaScript support is even more problematic for developers.

Many times it just comes down to how best to spend your time. If you have to choose between designing and coding a neat new feature of your website that 80% of your audience will use and enjoy or work on troubleshooting IE 6 bugs for the 20% (and shrinking) portion of your audience, I'd go with the new feature.

But then the question arises as to just HOW you are going to stop supporting IE 6. Do you just do nothing, and let layouts be borked and functionality be severed? I would argue that is a bad idea. If you stop supporting IE 6, do it with confidence and inform that portion of your audience of what they can do!

Enter the IE 6 Blocker Script. Using a little simple JavaScript browser detection and some jQuery, we can drop our IE 6 support with a very clear message.

View DemoDownload Files

 

Below we'll detail a how it works and how to use it.

Includes and Browser Detection

In the <head> section of the site, we'll need to include both jQuery and the script file.

	 ...
	 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
	 <script type="text/javascript" src="jquery.ie6blocker.js"></script> 
</head>

The ie6blocker.js script does the browser detection on its first line:

var IE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;
if(IE6) {
   ... do stuff ...
}

Alternatively, we could have done our browser detection right within the HTML file with a conditional comments statement:

<!--[if IE 6]>
	<script type="text/javascript" src="jquery.ie6blocker.js"></script> 
<![endif]-->

However, since with our technique we'll need JavaScript enabled for it to work anyway, we might as well just let the JavaScript do the detecting. You could also do it both ways...

The jQuery

Now that we have detected for IE 6, we'll be using jQuery to build some new page elements and insert them onto the page. The goal is a transparent black overlay for the whole screen (rendering the site recognizable but useless). Then above that, a centered message box explaining the sites intentional lack of support for IE 6. To lighten the blow a little, you may want to offer an alternate way of viewing your content (such as the blogs RSS feed). Some people are not able to upgrade their browsers, so a message telling them to do that alone may not be good enough.

Two div's will be needed. One for the overlay, and one for the message box. We can create them, CSS, content, and all, right within the jQuery JavaScript:

Here is the overlay:

$("<div>")
	.css({
		'position': 'absolute',
		'top': '0px',
		'left': '0px',
		backgroundColor: 'black',
		'opacity': '0.75',
		'width': '100%',
		'height': $(window).height(),
		zIndex: 5000
	})
	.appendTo("body");

With a modern browser, we could just set the top, right, bottom, and left all to 0px, but IE 6 doesn't like that, so we need to set the top and left to 0px, and the width to 100%. The height is a bit trickier. Setting it to 100% doesn't work in IE 6. We could just use a really large static number, but that's no fun, and will trigger a scrollbar that may not be necessary. Many "lightbox" overlays make use of the proprietary CSS "expressions" to get the window height like this:

height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); 

That's not going to work for us here, because jQuery applies this styling "inline" and it won't be calculated that way. Fortunately for us, jQuery now has the ability to calculate the window height. (The newer versions of jQuery have the old dimensions plugin built in). A high z-index value is also used here to make sure the overlay sits on top of all other content.

Here is the message box:

$("<div><img src='no-ie6.png' alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support Internet Explorer 6.</strong><br /><br />If you'd like to read our content please <a href='http://getfirefox.org'>upgrade your browser</a> or <a href='http://feeds.feedburner.com/CssTricks'>subscribe to our RSS feed</a>.</p>")
	.css({
		backgroundColor: 'white',
		'top': '50%',
		'left': '50%',
		marginLeft: -210,
		marginTop: -100,
		width: 410,
		paddingRight: 10,
		height: 200,
		'position': 'absolute',
		zIndex: 6000
	})
	.appendTo("body");

Notice all the markup for the message box is right in there, in one big jQuery object. The CSS of interest here is that we set the left and top values to 50% and then pull it back into center with negative margins (the theory). Then we use a higher z-index value still to put it above the overlay.

That should do it! Pretty simple really. Feel free to download the files, alter them in anyway you see fit, and use them for yourself.

View DemoDownload Files

 

Note: I'm not advocating that every single site in the world drop their IE 6 support. I merely offer this up as a tutorial and theory on how this can be done. You should make your own decisions based on your own audience on whether you will support IE 6 or not.

Comments

  1. Nice work! Except IE6 users are probably the vast majority of the 1% of browsers that don’t use JS heh. jQuery ftw!

  2. Permalink to comment#

    You should make this into a WordPress Plugin that blocks IE 6 on 8/27 every year, but has an option to block it all the time.

  3. Permalink to comment#

    Reminds me about SaveTheDevelopers ;) .

    Why do you include such a big script such as jQuery insteed of writing the (fairly small) JavaScript yourself? You shouldn’t waste your bandwith on IE6 users.

    Anyway, thanks for the share!

  4. Permalink to comment#

    Surprisingly even on my Linux blog, I have good IE traffic, at first I wanted to block all IE traffic, then I thought I should play nice… :)

    Of course, there are easier ways to achieve this, but this looks much better in action.

  5. Nacho
    Permalink to comment#

    CSS Hack much easier.


    * html #miMsgForIe6 {display:none;}
    * html #miMsgForIe6 {display:block; border:1px solid gray; etc.}

  6. Nacho
    Permalink to comment#

    Sorry, first line without * html!

    xD

  7. Permalink to comment#

    Personally I don’t support IE5/5.5, but due to experience at work, I know alot of people that’s stuck with IE6 due to security issues (yeah, I know, haha). I blame the nazi sysadmin, of course, but I can’t do nothing against it really.

    When “everyone” have finally switched to at least IE7 or IE8 (like, in 2014 or something) the world will be a happier place. Eh?

  8. Max
    Permalink to comment#

    I don’t know what this has to do with css-tricks:) Nevertheless, Conditional Comments are the better solution, because some Add-On or Proxy could change the User-Agent string.

  9. Permalink to comment#

    Amen. It seems like there’s been a heavy push in the last week or so to get people rallied around the idea of dropping IE6 once and for all. I even had to beg my users this weekend to let it die. 20% of them were still using it!…

  10. All IE users should finally stop using IE and switch to a browser.

  11. Al
    Permalink to comment#

    download files do not include the style.css file

    Al

  12. Permalink to comment#

    Hi hi, this is really cool! I will use it on my worddesign blog!!! reminds me of what my father in law said yesterday: He is using IE 7 now to be always up do date! I wish more people would think like him and he is 60!!! Sadly it turned out to be IE 6, but I will change this next time!
    great, thanx Chris for this!

  13. Permalink to comment#

    Technically: great article. Thanx for that. Practically? Come on.. let’s be realistic. We r not there yet for solutions like that. People (WHY??) still using this thing that wants to call itself a browser.

  14. Personally, I would prefer a small bar at the top of the screen, like an IE7 alert, that simply suggests to the user to upgrade. This seems counter-intuitive because the fact is that many IE6 users simply cannot upgrade! But at least with the toolbar alert, they’d become aware of the problem and possibly try it on a different computer.

    Don’t browser discriminate, people!

  15. Ian
    Permalink to comment#

    Nice idea Chris. I too feel that the time for dropping IE6 Support is near. Very wise to at least t explain to users what is happening when they can’t see the page.

    One problem though – the link you have provided for upgrading is getfirefox.org – it should be getfirefox.com!

  16. I’m completely planning on using this on my personal site, however I think something has to be said for those users who have machines so old they literally cant upgrade IE.
    I assume they can use another browser like FF or maybe opera etc. but.. for the retard, i mean user who has a machine so old that they cant upgrade their browser i SERIOUSLY doubt theyre going to have the patience to get used to an new browser UI.

    never the less… im doing this on digitalskraps.com.

  17. Permalink to comment#

    I think a gradual process might just work better. Paul’s suggestion of a toolbar reminder is a fantastic idea. Make it stick at the top of every page on your site with links to upgrade or get FF. Something users cant dismiss. You would probably get many more sites to do this versus the in-your-face, switch or die tactic.

    If a few million sides would take this approach, then on the anniversary date 8/27/09 we all went with the a more forceful message, I think our goal of eliminating this retarded step-child would happen much faster.

  18. Haha, I love it!

  19. @Paul: A bar at the top is also a nice solution, all the framework is here to make that happen. Just pull over the overlay, and adjust the CSS in the jQuery file.

    • Permalink to comment#

      Hi Chris, it might my ignorance but why is there no README file in the .zip on how to use this?

      I am running WP 2.7 but have got NO clue how to implement this script in my website. I did put the .js files in the /theme/js/ dir and the other files one dir higher but it does not work (also putting them in the same /js/ dir did not work). I did add the paths to the js files in my WP theme template (header.php).

      Or do I have to upload the entire /IE6Blocker/ dir somewhere (i.e. in the root)?

      And do I have to alter some other files in my WP like changing the .css file or any other file?

      Looking forward to your help asap. Thanx a lot in advance.

      Steven

  20. chris read
    Permalink to comment#

    Nice Chris, wish my boss would let me do that.
    I checked our logs today, and it seems 46% of our users are IE6 (!) goddammit. An article on sitepoint claimed a load of this could be bots tho – need to check out the logs and find out.

    Can we have an international, arms around the world coming together of people burning big blue e’s?

  21. Allan
    Permalink to comment#

    Isn’t blocking the content all together is a bit draconian? I mean, sure, you provide access to the feed, but I sure wouldn’t necessarily subscribe to content I can’t vet first.

    If you want to make a statement on IE6 without being . . . lame . . . about it, just turn style sheets and scripts off all together and make the thickbox tell people that they’re viewing the raw information with no behavioral enhancements. And I’ll echo the comment that says you don’t need 20KB of jQuery to do this.

    If you’ve written your javascript behaviors properly (unobtrusively) then the site should still be viewable and functional with both styles and scripts disabled, and the person isn’t cut off from the content completely. If your pages can’t degrade gracefully, then you’re probably not doing your job right.

    And I say all of that as a web developer who struggles with IE6 support daily. I’m angry too, damn it! But in too many cases, it’s not the users fault, and they should be punished for it.

  22. Permalink to comment#

    Too bad we can’t deliver a strong electric shock to go with it! ;)

  23. I don’t really like the idea of blocking ie6 users out completely. A lot of people browse from work and have no choice in the browser they use. Instead I put a conditional banner at the top of my page that only loads for ie6 users and lets them know that the page won’t look 100% like it should in ie6 and gives them the option to upgrade.

  24. If it simply breaks the layout of your blog, putting something like this near the header would be simpler and less aggressive :

    {!--[if lt IE 7]}
    {p style="color:red"}Your message to IE < 7 users{/p}
    {![endif]--}

    I replaced the <> with {} to prevent it from being treated as HTML by wordpress & browsers.

  25. It would be time that Google will come up with their own browser….

    Knock Knock….

    “Who is there?”

  26. Permalink to comment#

    @Paul Gendek and Karl.

    I’ve developed exactly what you’re looking for, and you can see it for yourselves on my site: http://www.assyrianlyrics.com (if you use IE6 or lower, you’ll get a message just like the IE7 alert.
    If you don’t have IE6, here’s a screenshot of what it looks like: Click Here

    If you like the script, you can just steal it from my site, the URL for that script is: Right Here

    I’ve actually been trying to get people to use this and/or improve it and share it.
    We have to try to make people upgrade their browsers all the time

  27. Great tutorial Chris, I agree with some people that its bad to discriminate against people with bad browsers.. but for a website like this one which is aimed at web designers mainly, I see no problem because if your a current web designer and still stuck in the IE6 age you really should upgrade :-P

  28. Steve D
    Permalink to comment#

    Maikel D -

    Great script! A much better way of going about this issue. Good article and good comments, guys – thanks.

  29. The movement on IE6 seems to be picking up, dont know what to agree with really.

  30. Erik Heddema
    Permalink to comment#

    Not user friendly at all. So many companies still use IE6 so to use this only shows that a coder is lazy and not user friendly at all. Would never use this.

  31. Permalink to comment#

    This script is very good, but it is intrusive for the person using IE6. The script be used in the website that few people use, for example an administrative area.
    P.S. sorry per my language I’m not american

  32. Eric
    Permalink to comment#

    Nice script, but have tested it in IE5?

    The result is that you see the page and not te warning ;)

  33. Permalink to comment#

    A little extreme but a good idea. We should unite and take the initiative. We should come together and always block IE6 or any other crappy browser so that manufacturers have to comply with standards if they want people to use their products. Imagine what would happen if sites like google, facebook, amazon, etc started blocking ie6?

  34. Permalink to comment#

    I love it! But check out my latest anti-IE6 code:

    <!--[if IE 6]>
            <center><p style="color:#fff;background-color:red">
    <span style="font-weight:bold">NOTICE:</span> Because you are using an older browser; this web page may not display correctly. If you can; <a style="color:#fff;font-weight:bold;text-decoration:underline" href="http://www.mozilla.com/en-US/">Please Update your Browser</a></p></center>
    <![endif]-->

    M u a a h a h a h h a h h !

  35. Website called “CSS-Tricks” and yet you’re using javascript where a “CSS tricks” would have done nicely?

    .ie6box { display: block; } /* this one shows the box in IE6 */

    html>body .ie6box { display: none !important; } /* and this one hides it from everybody else, ‘cos IE6 ignores “html>body” part.. */

    so why the javascript?

  36. The reason for the JavaScript:

    1) Anybody can easily download this and include it on their page and be done. Ease of use.

    2) It is demonstrating technique, parts of which could be used for any number of interesting things.

    There are certainly CSS only ways to achieve the effect as well, just not contained as nicely as JavaScript can make it. I would also recommend against using a hack and using conditional statements instead.

    • Hello Chris,

      I found something interesting.
      First I downloaded a stand alone IE6 browser from “http://www.stalebrew.com/2008/browsers/stand-alone-internet-explorer-6/”, and by the way your blocking script works great, but only from this site after I click on the demo button.
      But when I used the script on my site, I didn’t receive the overlay or the message.

      It could be me, so I re-download the files and uploaded the entire file to my host. And the script does not work….again, it could be me.

      So, I invite you to check it out for yourself. Was there something I did wrong?

      http://tazinteractive.com/IE6Blocker/ie6blocker.html

      Please respond.

      Tarzine

  37. well, I do agree with both points. It is easier to download and add own site, though It’s more suitable for people who have no knowledge of CSS and It’s a good thing, I suppose..

    Just, I dunno, wouldn’t you think that people who are looking for “CSS-Tricks”, they would have at least an inkling of that knowledge.. But I might not see “the big picture”, there’s probably not that much of “pure” CSS tricks out there to write about :)

    Still, maybe ought to have a “second method” section for this kinda posts? Using simple, clutter free and “javascript-less” CSS hacks that you’re recommending against, which also doesn’t make much sense to me.. What kind of CSS “trickery” is it without hacks? :D

  38. Totally agree, down with IE, that’s all versions, not just with IE 6.

    Although most people are stuck with IE6, lucky for me I get acces to Firefox 2 at school ; )

  39. Permalink to comment#

    Is blocking the site for IE6 users really the right answer? Surely we as professionals should offer some form of graceful degradation or a lesser experience versus other browser rather than giving up completely? We should still offer our content to everyone via a browser and not shut the door on them…that doesn’t feel right.

  40. Permalink to comment#

    Any of you got any pals over at Google ? Wouldn’t it be awesome if they put something like this on their search page ?! Maybe they will soon since they are building their own browser….which i think is built partly on the Firefox engine or something.

    Anyhow whatcha think about just putting a thin little div inside the M$ conditional … to appear at the very top or bottom of a page ?
    (yep I’m a Mac guy on my dual 20″ LCD’s with FF…)

    I’ve spent the last couple DAYS working on a “complicated” ecommerce page with 3 Forms – 2 of which darn well aren’t allowed to be nested in form 1, but need to present inside of form 1 so the layout doesn’t look stupid or confuse any pet users further complicated being dynamic or token/template based at server side – follow that ?….

    yeh I wish for a beneficial virus that would circle the globe that force any version of IE to download Firefox and then trash the IE files !

    *Dump Explorer and http://GetFireFox.com

  41. Permalink to comment#

    Well, excluding IE6 users from personal blogs or pages that just don’t target on this group is ok. But I think that even then you should provide information why you don’t support IE6 – just say “get away, §&!$%” ain’t the best decision, in my eyes.

    On my blog I created a detection via PHP. When you’re arriving with IE6 you get a yellow information bar at the top of the page. And that’s the only IE6-tweaking on my site :D

  42. elvisparsley
    Permalink to comment#

    Great! Thanks for the script.
    I have one request.
    There are some people can’t to upgrade by themselves due to some reasons (IT admin policy etc.).
    Chris, could you add continue button so that people can still go on to look your website even they know we don’t support IE6?

    Thanks in advance.

  43. amazing script Chris :-)

  44. Permalink to comment#

    Good for doing some other javascript with ie6, together with a conditiona css for ie6 only, in order to show a page in ie6 like it should be and like it look in other every browser.
    For a developer is not so good to block someone, maybe if you will use this, just a little advice would be enough…

  45. Permalink to comment#

    for example you can launch a jquery growl window…

  46. I’m not sure it is a good decision to “force” download and install of new software onto a user. Let me rephrase that: I am absolutely against it. That is one of the very strong reasons why not to use IE. Exploiting this method is close to computer intrusion and it’s really not the best idea to connote Firefox to an unwanted program that the user has no control over. Installing software automatically will ALWAYS leave user confused at least, if not upset because something on their computer was happening behind their backs. Please do not place Firefox in such a neighborhood.

  47. Permalink to comment#

    @Robert Well this is a pretty interesting conversation… This kind of aggressive approach may be the kind of thing that can really help the world switch over which is clearly a good thing.

    Although Robert has a good point in that this may be borderline nasty intrusive behavior. Take a look at what it looks like to a user when they hit the example site: SCREENSHOT.

    At the least, I think this idea needs to be a little more “friendly” in it’s approach and clearly explain what it wants to do for the user and why and that it’s not harmful.

    It seems to me like this could be used for something that is harmful, which is why it’s kinda scary.

  48. Mark
    Permalink to comment#

    I think this approach is one of the few approaches which will work even for the people who do not know what a browser is, which are the majority of Internet Explorer (6) users out there today.

    Running a program downloaded from the Internet could indeed be harmful, but in this case you’re letting your Internet Explorer using visitors run a program which is available on all the major software download sites for quite some time and received all possible “100% CLEAN” awards it could possible get.

    I think making this a little bit more “friendly” is a good idea, but I’m afraid that every added character to explain why it’s so great will scare the targeted users, because they don’t understand and even don’t want to understand: they just want that it works. So I think keeping the explaining text as short as possible is a good idea. This is just how Flash get’s installed anywhere: it just says “click here to view this”, which results in Flash being installed. This works great, because Flash is not installed by default while the installed base of Flash is over 99% percent. So when FirefoxS can do this same trick we’ll finally get rid of Internet Explorer, which is a good thing (at least for me as web developer and security specialist), don’t you think?

  49. Stephen Gray
    Permalink to comment#

    This feels a bit regressive, like when MS won the browser wars and sites had that really insulting and exclusive ‘Optimised for Internet Explorer’-type message. IE6 is certainly a pain, but users should still be allowed to use their outdated technology if they want. It’s fair, though, to tell them that they’re not getting the best experience and how they can improve it.

    I’m glad there seems to be a tide turning here, but we shouldn’t start to dictate to users.
    And we shouldn’t obsess on Firefox either: offer Opera, Safari and Chrome as well. Let’s not replace one monopoly with another…

  50. John
    Permalink to comment#

    I don’t think IE6 users specifically want to use their outdated technology, they just use it because they don’t know better.

    Those websites don’t work only in Firefox: they work fine in Opera, Safari, Chrome and other browsers too.
    The problem is that IE6 users don’t know what a (good) browser is, so if you would offer them a choice they probably would just pick a random one (or Chrome, just because they know Google). That’s why I think it’s a good idea to advice the IE6 user specifically to use FirefoxS or Google Chrome (as Opera and Safari can’t always be installed, because they require Administrator privileges, while FirefoxS and Google Chrome don’t).

    Because Google Chrome is still beta I think the safest and best option is to recommend FirefoxS.

  51. Mark
    Permalink to comment#

    Mozilla FirefoxS now has it’s own article on http://css-tricks.com/links-of-interest-51/

  52. Thanks you very much. This script worked me fine!

  53. Those lightbox packages still making use of the IE expressions are to be breaking soon as Microsoft announced ending expressions in Style Sheet stack on Thursday earlier this week. For backwards compatibility Quirks and IE7 Strict mode will still be there in IE8 but the default is the Standards mode. So to all the IE developers out there, we wish you good luck!

  54. Permalink to comment#

    may I suggest to use (document) instead of (window), as else you will still be able to see below content on long-content pages.

    switched window with document (info: http://docs.jquery.com/CSS/height) and it does the trick.

    thanks for your script, much appreciated.
    a quick php-alternative would do of course, too.

  55. Josh
    Permalink to comment#

    I wasn’t sure what to do for the sites I’ve been made that don’t look so hot in IE6, but I found a pretty non-intrusive option after a lot of searching and reading.

    Check out http://www.pushuptheweb.com/ – this script provides a small notification box in the top right for IE, Firefox, Opera, and Safari when they are outdated.

  56. silly
    Permalink to comment#

    shouldn't be punished for it

  57. Permalink to comment#

    I like the sounds, and looks of that!!

  58. I would change the This site does not support IE to

    IE does not support this site

  59. Permalink to comment#

    I’ve just set up a blocker for my site for IE 6 with an explination and links to other browsers. Its time we ran a spike through IE6′s heart. Thankfully most of my visitors wont be from big organisations that patch something after its been signed off by 406 people who know nothing of IT (I used to work as a support dude, I know how retarded companies are about upgrades…)

    I say stand firm! Display the pop up at the start of your site and include a “click here to continue”… but dont use IE6 hacks :) then it will make people think to upgrade…

    Its hard enough getting unity with the rest of the browser world and IE7, never mind having to waste time on a legacy browser…

    Damn you IE6, damn you to hell!

  60. Adam
    Permalink to comment#

    Thanks for writing this script. If I wanted to achieve the same result for IE 5.5 and below, what would I have to indicate for the user agent?

    (navigator.userAgent.indexOf(“MSIE 6″)>=0)

  61. Permalink to comment#

    People aren’t going to leave IE6 until they start suffering from stuff like non-alpha pngs, extra lines when we don’t put presentation mark up like .first on nav styling and the like …

    Still it’s xmas soon, new pc = new browser … not the most efficient way of upgrading but if it’s a nail in ie6′s coffin then it works for me

  62. While we’re at it… let’s get rid of all nuisances simultaneously: IE6, Comic Sans MS, people who type “alot”, toilet seats that don’t stay up by themselves.

    We don’t want to be hypocrites, do we?

  63. Internet fascism isn’t a solution to anything. Instead of just shutting people out, just gently nudge them towards something like browse happy (not just a Firefox download, not using Internet Explorer doesn’t mean you have to use Firefox – it has flaws and shortcomings, too). That way you won’t basicalliy give your visitors the middle finger.

  64. Permalink to comment#

    Excellent Chris! love your work.

  65. A more subtle WordPress alternative is available at http://wordpress.org/extend/plugins/push-up-the-web-for-wordpress

  66. tarzine
    Permalink to comment#

    The script is not working for me.

    First I downloaded a stand alone IE6 browser from http://www.stalebrew.com/2008/browsers/stand-alone-internet-explorer-6/, and by the way your blocking script works great, but only from this site after I click on the demo button.

    But when I used the script on my site, I didn’t receive the overlay message.

    It could be me, so I re-download the files and uploaded the entire file to my host. And the script does not work….again, it could be me.

    So I tried to figure what was in wrong using Mozilla’s fire bug, and it seemed to be missing a “style.css”. But that should have nothing to be with why the script is not working.

    So, I invite you to check it out for yourself. Was there something I did wrong?

    http://tazinteractive.com/IE6Blocker/ie6blocker.html

    Please respond.

    Tarzine

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".