IE 6 Blocker Script

IE 6 Blocker Script
by: Chris Coyier Sep 1 2008 91
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 Demo Download 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:  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 Demo Download 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.
Subscribe to The Thread
Harley Alexander 09/01/2008 Nice work! Except IE6 users are probably the vast majority of the 1% of browsers that dont use JS heh. jQuery ftw!
Dan Cole 09/01/2008 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.
Marco 09/01/2008 Reminds me about SaveTheDevelopers ;) . Why do you include such a big script such as jQuery insteed of writing the (fairly small) JavaScript yourself? You shouldnt waste your bandwith on IE6 users. Anyway, thanks for the share!
pavs 09/01/2008 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.
Nacho 09/01/2008
CSS Hack much easier. * html #miMsgForIe6 {display:none;} * html #miMsgForIe6 {display:block; border:1px solid gray; etc.}
Nacho 09/01/2008 Sorry, first line without * html! xD
koew 09/01/2008 Personally I dont support IE5/5.5, but due to experience at work, I know alot of people thats stuck with IE6 due to security issues (yeah, I know, haha). I blame the nazi sysadmin, of course, but I cant 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?
Max 09/01/2008 I dont 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.
Goob 09/01/2008 Amen. It seems like theres 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!
Robert Augustin 09/01/2008 All IE users should finally stop using IE and switch to a browser.
Al 09/01/2008 download files do not include the style.css file Al
philipp 09/01/2008 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!
Gerasimos 09/01/2008 Technically: great article. Thanx for that. Practically? Come on.. lets be realistic. We r not there yet for solutions like that. People (WHY??) still using this thing that wants to call itself a browser.
Paul Gendek 09/01/2008 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, theyd become aware of the problem and possibly try it on a different computer.
Dont browser discriminate, people!
Ian 09/01/2008 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 cant see the page. One problem though the link you have provided for upgrading is getfirefox.org it should be getfirefox.com!
David Sparks 09/01/2008 Im 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.
Karl 09/01/2008 I think a gradual process might just work better. Pauls 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.
Chris Coyier 09/01/2008 @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.
Steven 02/02/2009 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
chris read 09/01/2008 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 es?
Allan 09/01/2008 Isnt blocking the content all together is a bit draconian? I mean, sure, you provide access to the feed, but I sure wouldnt necessarily subscribe to content I cant 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 theyre viewing the raw information with no behavioral enhancements. And Ill echo the comment that says you dont need 20KB of jQuery to do this. If youve written your javascript behaviors properly (unobtrusively) then the site should still be viewable and functional with both styles and scripts disabled, and the person isnt cut off from the content completely. If your pages cant degrade gracefully, then youre probably not doing your job right.
And I say all of that as a web developer who struggles with IE6 support daily. Im angry too, damn it! But in too many cases, its not the users fault, and they should be punished for it.
Jeff Starr 09/01/2008 Too bad we cant deliver a strong electric shock to go with it! ;)
Angie Bowen 09/01/2008 I dont 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 wont look 100% like it should in ie6 and gives them the option to upgrade.
Antoine Leclair 09/01/2008 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.
John Stevens 09/01/2008 It would be time that Google will come up with their own browser. Knock Knock. Who is there?
Maikel D 09/01/2008 @Paul Gendek and Karl. Ive developed exactly what youre looking for, and you can see it for yourselves on my site: http://www.assyrianlyrics.com (if you use IE6 or lower, youll get a message just like the IE7 alert. If you dont have IE6, heres 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 Ive 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
Michael Short 09/01/2008 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
Steve D 09/01/2008 Maikel D Great script! A much better way of going about this issue. Good article and good comments, guys thanks.
Max | Design Shard 09/02/2008 The movement on IE6 seems to be picking up, dont know what to agree with really.
Erik Heddema 09/02/2008 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.
Pierpaolo 09/02/2008 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 Im not american
Eric 09/02/2008 Nice script, but have tested it in IE5? The result is that you see the page and not te warning ;)
Carlos 09/02/2008 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?
carlnunes 09/03/2008 I love it! But check out my latest anti-IE6 code:  Muaahahahhahh!
Hairgel_Addict 09/03/2008 Website called CSS-Tricks and yet youre 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?
Chris Coyier 09/03/2008 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.
Tarzine Jackson 01/29/2009 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 didnt 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
Hairgel_Addict 09/03/2008 well, I do agree with both points. It is easier to download and add own site, though Its more suitable for people who have no knowledge of CSS and Its a good thing, I suppose.. Just, I dunno, wouldnt 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, theres 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 youre recommending against, which also doesnt make much sense to me.. What kind of CSS trickery is it without hacks? :D
danielgroves 09/03/2008 Totally agree, down with IE, thats 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 ; )
Rob Mason 09/04/2008 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 themthat doesnt feel right.
Barrett 09/04/2008 Any of you got any pals over at Google ? Wouldnt 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 Im a Mac guy on my dual 20 LCDs with FF) Ive spent the last couple DAYS working on a complicated ecommerce page with 3 Forms 2 of which darn well arent allowed to be nested in form 1, but need to present inside of form 1 so the layout doesnt 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
datenkind 09/06/2008 Well, excluding IE6 users from personal blogs or pages that just dont target on this group is ok. But I think that even then you should provide information why you dont support IE6 just say get away, &!$%aint the best decision, in my eyes. On my blog I created a detection via PHP. When youre arriving with IE6 you get a yellow information bar at the top of the page. And thats the only IE6-tweaking on my site :D
elvisparsley 09/07/2008 Great! Thanks for the script. I have one request. There are some people cant 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 dont support IE6? Thanks in advance.
Tinny 09/09/2008 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
Tinny 09/09/2008 for example you can launch a jquery growl window
Robert Augustin 09/12/2008 Im 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 its 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.
Chris Coyier 09/12/2008 @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 its approach and clearly explain what it wants to do for the user and why and that its not harmful. It seems to me like this could be used for something that is harmful, which is why its kinda scary.
Mark 09/13/2008 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 youre 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 Im afraid that every added character to explain why its so great will scare the targeted users, because they dont understand and even dont 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 gets 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 well finally get rid of Internet Explorer, which is a good thing (at least for me as web developer and security specialist), dont you think?
Stephen Gray 09/25/2008 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. Its fair, though, to tell them that theyre not getting the best experience and how they can improve it. Im glad there seems to be a tide turning here, but we shouldnt start to dictate to users. And we shouldnt obsess on Firefox either: offer Opera, Safari and Chrome as well. Lets not replace one monopoly with another
John 10/04/2008 I dont think IE6 users specifically want to use their outdated technology, they just use it because they dont know better. Those websites dont work only in Firefox: they work fine in Opera, Safari, Chrome and other browsers too. The problem is that IE6 users dont 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). Thats why I think its a good idea to advice the IE6 user specifically to use FirefoxS or Google Chrome (as Opera and Safari cant always be installed, because they require Administrator privileges, while FirefoxS and Google Chrome dont). Because Google Chrome is still beta I think the safest and best option is to recommend FirefoxS.
flash tekkie 10/18/2008 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!
jez 10/27/2008 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.
Josh 11/05/2008 I wasnt sure what to do for the sites Ive been made that dont 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.
Piotr Gabryjeluk 12/04/2008
I would change the This site does not support IE to IE does not support this site
Rob 12/05/2008 Ive 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 IE6s 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!
Adam 12/08/2008 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)
devolved 12/14/2008 People arent going to leave IE6 until they start suffering from stuff like non-alpha pngs, extra lines when we dont put presentation mark up like .first on nav styling and the like Still its xmas soon, new pc = new browser not the most efficient way of upgrading but if its a nail in ie6s coffin then it works for me
Francois Botha 01/03/2009
While were at it lets get rid of all nuisances simultaneously: IE6, Comic Sans MS, people who type alot, toilet seats that dont stay up by themselves. We dont want to be hypocrites, do we?
Simon Sigurdhsson 01/03/2009 Internet fascism isnt 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 doesnt mean you have to use Firefox it has flaws and shortcomings, too). That way you wont basicalliy give your visitors the middle finger.
Francois Botha 02/02/2009 A more subtle WordPress alternative is available at http://wordpress.org/extend/plugins/pushup-the-web-for-wordpress
tarzine 02/03/2009 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 didnt 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 Mozillas 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

IE 6 Blocker Script - CSS-Tricks PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IE 6 Blocker Script - CSS-Tricks PDF

Uploaded by

Copyright:

Available Formats

by: Chris Coyier Sep 1 2008 91

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

Includes and Browser Detection

Subscribe to The Thread

Nacho 09/01/2008 Sorry, first line without * html! xD

Al 09/01/2008 download files do not include the style.css file Al

Dont browser discriminate, people!

Piotr Gabryjeluk 12/04/2008

Francois Botha 01/03/2009

Francois Botha 02/02/2009 A more subtle WordPress alternative is available at http://wordpress.org/extend/plugins/pushup-the-web-for-wordpress

You might also like