Get the Code

Do your part to help phase out Internet Explorer 6 forever by adding the warning in the image below to your site. It tells visitors using Internet Explorer 6 or an older browser that they need to upgrade to the current version right now.
The warning

All you have to do is add the Stop Living in the Past WordPress plugin to your WordPress powered blog or site or add the code below anywhere on your site. It is completely self-contained, CSS driven and will only show up if the visitor uses IE6. The code uses CSS to identify the browser and has no JavaScript or other elements that could interfere with your web site.

The WordPress Plugin

Download the Stop Living in the Past WordPress plugin right now!Using the Stop Living in the Past WordPress plugin is as easy as it gets:

  1. Download the WordPress plugin
  2. Unzip the archive to your computer
  3. Upload the StopLivingInThePast folder to your /wp-content/plugins directory
  4. Activate the Stop Living in the Past plugin from your WordPress admin panel.

That’s really all there is to it!

The code

If you don’t have a WordPress based blog or site or if you want to have more control over exactly where the warning will appear you can add it manually by copying the code in the box below. To add the warning to the top of your site paste the code below into your HTML code directly under the <body> tag. You can also add it as a sidebar element in WordPress by creating a new Text widget and pasting the code in manually.

<!-- BEGIN STOP LIVING IN THE PAST SCRIPT -->
 
<!--[if lte IE 6]>
 
<style type="text/css"> 
 
    #slitp {
		padding: 10px;
		border: 3px solid #000099;
		margin: 8px 0;
		background: #DFEFFF;
		color: #000;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		line-height: 15px;
	}
 
	#slitp h1 {
		padding: 0px 0px 5px 0px;
		text-transform: uppercase;
		text-align: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #000099;
		font-size: 16px;
		color: #000099;
	}
 
	#slitp p {
		margin: 10px 0px 0px 0px;
		text-align: justify;
	}
 
	#slitp p a {
		font-weight: bold;
		color: #000099;
	}
 </style> 
 
<div id="slitp">
    <h1>Your browser is outdated. Stop living in the past and upgrade!</h1>
		You are using the long outdated Internet Explorer 6 browser. This site 
		may not display or work correctly and you are putting your data and 
		privacy at risk. To get the most out of the web, upgrade to the
		<a href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx" title="Download the latest version of Internet Explorer for free directly from Microsoft" alt="Download the latest version of Internet Explorer for free directly from Microsoft" "target="_blank">
		new version of Internet Explorer</a> right now. If you are at work and you see this message, 
		talk to your IT department and ask them to upgrade the browser to secure 
		your company data.
 
        <p><a title="Stop Living In the Past" href="http://www.stoplivinginthepast.com" target="_blank">Click here to learn more about why you should upgrade your browser.</a></p>
</div>
 
<![endif]-->
 
<!-- END STOP LIVING IN THE PAST SCRIPT -->

Tutorials and a WordPress plugin are in the works

I am working on a series of tutorials detailing how to place the code in your site so stay tuned.

32 Comments

  • Martin Grandrath says:
    February 21, 2009 at 2:30 pm

    Have to repost, because obviously this comment form does no escaping whatsoever. Sorry.

    Instead of

    <!--[if IE 6]>

    you should definitely use

    <!--[if lte IE 6]>

    , which checks for IE6 and earlier (lte = less than or equal to).

    Log in to Reply
  • Mike says:
    February 23, 2009 at 4:17 pm

    I love how this page throws javascript errors if you’re using IE6.

    Log in to Reply
  • Dorian Muthig says:
    February 23, 2009 at 9:15 pm

    I think the code is bad for content oriented sites that are indexed in search engines frequently or have high volume data throughput.
    You should inject the text using an external JavaScript file which only gets loaded when the browser version is less or equal 6.
    You should also add an effect to emphasize the message by adding a semi transparent dark backgound (yes IE6 supports that) and require the user to *manually* close that message before the site can be used.
    [sourcecode language='html']

    @import url(’ie6.css’);[/sourcecode]Yes, that’s the IE4 style import syntax for the Windows 98 and 95 users still stuck with that!
    [sourcecode language='js']
    var text = ‘You are using an outdated browser version…’;
    document.write(” + text + ”);[sourcecode]
    [sourcecode language='css']
    #browser-wrapper {
    vertical-align: center;
    margin: 0 auto 0 auto;
    text-orientation: middle;

    Log in to Reply
    • Morten Rand-Hendriksen says:
      February 23, 2009 at 9:25 pm

      I understand your sentiment but the whole point of this code is to make it as unobtrusive and nonirritating as possible. The CSS solution was created so people can place the warning anywhere within their existing page - be it on the top, in a box in the sidebar, before or after content or whatever. That way it doesn’t ram the information down the throats of people who are still using IE6 but still gets the name across.

      As for SEO, it makes no difference. and if you think it does, just place the code further down on your site.

      Log in to Reply
  • Dorian Muthig says:
    February 23, 2009 at 9:16 pm

    Damn, I was still writing, what site submits a multiline Text field when you press enter?

    Log in to Reply
  • Dorian Muthig says:
    February 23, 2009 at 10:34 pm

    Resubmitting this properly:

    I think the code is bad for content oriented sites that are indexed in search engines frequently (because you instruct people to add the message right after the body tag/beginning of the site, which serves as decription in many cases) or have high volume data throughput.
    You should inject the text using an external JavaScript file which only gets loaded when the browser version is less or equal 6.
    You should also add an effect to emphasize the message by adding a semi transparent dark backgound (yes IE6 supports that) and require the user to *manually* close that message before the site can be used.

    @import url(’ie6.css’);
    Yes, that’s the IE4 style import syntax for the Windows 98 and 95 users still stuck with that! And noone cares about validation here, as long as it serves it’s purpose, right? :)
    The cheap JS:

    var text = 'You are using an outdated browser version... Click to hide this and get an update';
    function hide() {
    document.getElementById('browserwrapper').style.display = 'none';
    document.getElementById('browsernotice').style.display = 'none';
    document.getElementById('browserwrapper').style.visibility = 'hidden';
    document.getElementById('browsernotice').style.visibility = 'hidden';
    window.open('http://www.microsoft.com/windows/products/winfamily/ie/default.mspx');
    }
    document.write('You are using an outdated browser version... Click to hide this and get an update');
    The CSS file (I like the colors):

    #browserwrapper
    {
    margin: 0 0 0 0;
    background-color: #000000;
    color: #FFFFFF;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=80%);
    z-index: 50;
    vertical-align: middle;
    vertical-align: middle;
    text-align: center;
    display: block;
    }
    #browsernotice
    {
    border: 4pt solid white;
    margin: 50px auto 50px auto;
    vertical-align: middle;
    position: fixed;
    background-color: #FF0000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: large;
    font-weight: bolder;
    font-style: normal;
    font-variant: normal;
    color: #FFFFFF;
    text-decoration: none;
    filter: alpha(opacity=100%);
    display: block;
    text-align: center;
    }

    Could probably be more advanced… but… I didn’t feel like that… after my browser crashed three times :)

    Log in to Reply
  • Dorian Muthig says:
    February 23, 2009 at 10:39 pm

    It stripes out script and style tags with spaces inbetween? :(
    maybe a simple textfile is better: http://dynamicsnetwork.net/Files/stoplivinginthepast.txt

    Log in to Reply
  • Michael says:
    February 24, 2009 at 7:40 am

    What about people who can’t upgrade to IE7 because they’re using something older than XP? I still get visits from Windows 2000 machines to my site. :/

    Log in to Reply
  • Tim says:
    February 24, 2009 at 7:45 am

    As I have been mostly a front end / css developer, I am absolutely thrilled that ppl are starting to influence the upgrade from ie6. I think these are all awesome suggestions as to how one could deliver the message on their site, be it a simple callout or a demanding popup dialog.

    Nonetheless, I hope ppl keep their suggestions flowing and continue to progress the move to eliminate ie6 once and for all!

    Log in to Reply
  • Morten says:
    February 24, 2009 at 12:40 pm

    This is not enough. We need code that completely blocks the user from visiting the website if they are using IE6. A warning can be ignored, but if you know the website contains important information you need, you will be forced to upgrade.

    Log in to Reply
  • IShotIE6 says:
    February 25, 2009 at 7:07 am

    The code is fine, handy, needed, and finally a wake up call.

    http://forums.whirlpool.net.au/forum-threads.cfm?f=7 it’s been there for a while now…..and honestly what are you guys complaining about. The end of misery and you complain about the placement….huh!!

    There’s absolutely nothing wrong, besides who cares if the user goes elsewhere with their shitty browser and poor attitude. It cost nothing to upgrade your broswser than buy your shiny new iPhone or Plasma tv or Bluray player/recorder.

    If any of my clients want support for IE6 i charge them double the price if they refuse to educate themselves.

    Drive the ignoramuses away!!

    Log in to Reply
  • IShotIE6 says:
    February 25, 2009 at 7:08 am

    Long live the good clean clutter free web.

    Log in to Reply
  • Poe says:
    February 27, 2009 at 3:18 am

    Qustion: Where is my plugin?

    I installed this plugin, and it came up with the yellow “plugin installed” box.. However, I don’t see it in the active list or inactive list so there is no way for me to activate it or deactivate it.

    Is this a bug?

    Log in to Reply
    • Morten Rand-Hendriksen says:
      February 27, 2009 at 3:27 am

      What a weird bug. I just tested the plugin from the directory and got the exact same result. It works fine but seems to be hiding from the plugin list in admin view. I’ll take a closer look at it tomorrow and figure out why that’s happening. In the meantime rest assured the plugin works just fine.

      Log in to Reply
    • Morten Rand-Hendriksen says:
      February 27, 2009 at 1:25 pm

      Poe: I figured out what’s wrong. To make the plugin appear in your list upload the StopLivingInThePast.php file directly to the plugins directory rather than a sub-directory. that’s all there is to it.

      Log in to Reply
  • baron says:
    February 27, 2009 at 10:25 am

    hi. Thanks for plugin

    perfect.

    Regards

    Log in to Reply
  • Ben says:
    March 12, 2009 at 4:29 pm

    Looks great. I will definitely add to my site, and any future sites I (may) make.

    Log in to Reply

Trackbacks / Pingbacks

Leave a Reply

You must be logged in to post a comment.