Old Browser Warning - tells users of old IE to change or update

The problem: If you try hard to create a website that shows exactly the same style and behavior in all browsers you will either end up with very poor user experience consistent among all browsers, or you will have to make sure can dedicate much of your time to getting things right.

Especially older versions of the well infamous Internet Explorer make the life of web-developers difficult. Either you spend most of your effort to kludge around version specific bugs or politely warn your visitors to not browse the web with ten-plus years old tiny-software..

Existing solutions

This problem is not new by any means and a large number of solutions have been already made, i.e. this one, that mimics Internet Explorer security warnings, and fools the user to thing he sees a system message. Another approach not only suggests to update Internet Explorer but also offers the visitor to change to another browser. Though this approach is more appealing to me, I am not ok with this particular technical implementation. A further one is of higher standard with better configurability but it inserts an external javascript dynamically, which I wanted to avoid: The link inserted takes the visitor to an external site, where I do not have any control over the contents. Nevertheless, this third option is my personal favorite among the exiting solutions.

Objectives

Blackout4hungary-style screen blanking until the visitor takes action
Show localized content according to visitor locale settings
Suggests the current version of 3 open source browsers and additionally provides a link to update IE
Short and simple code, one local script plus icons
Behaves properly even with on devices with very small dispay

Demo

If javascript is enabled in your browser, the script has been automatically run on page load, and the warning was shown independent of your current browser version. Run again?

			
/*
 * Old Browser Warning - requests old IE users to switch or upgrade
 * 
 * Copyright 2011 Tibor Bősze <tibor.boesze@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
 * This small script will dynamically insert a div that fills up the whole client area
 * and suggests the user to upgrade IE or switch to another browser. Based on the browser
 * language text is displayed either in Hungarian or English.
 * 
 * Use this script between conditional comments, i.e.:
 * <!--[if lt IE 8]><script type="text/javascript" src="old-browser/warning.js"></script><![endif]-->
 */
(function() {
	var text_hu = [
			"Tudsz róla, hogy az Internet Explorer böngésződ elavult?",
			"A jobb böngészési élményért és a biztonságos internethasználat érdekében próbálj ki egy ingyenes, korszerű böngészőt, vagy frissítsd Internet Explorer-edet a legújabb verzióra.",
			"Íme néhány népszerű böngésző - letöltéshez kattints az ikonra!",
			"most inkább folytatom ezzel a böngészővel &raquo;" ];

	var text_en = [
			"Did you know that your Internet Explorer is out of date?",
			"To get better browsing experience and enhanced security, try one of the free, modern web browsers or upgrade to the newest version of Internet Explorer.",
			"Some popular web browsers - just click on the icon to get to the download page!",
			"continue with my current browser &raquo;" ];

	var text = (navigator.userLanguage || navigator.language).indexOf("hu") >= 0 ? text_hu : text_en;

	var browsers = [
			{
				name : "Firefox",
				icon : "old-browser/ff.png",
				link : "http://www.mozilla.com/firefox/"
			},
			{
				name : "Chrome",
				icon : "old-browser/ch.png",
				link : "http://www.google.com/chrome/"
			},
			{
				name : "Opera",
				icon : "old-browser/op.png",
				link : "http://www.opera.com/download/"
			},
			{
				name : "Internet Explorer 8+",
				icon : "old-browser/ie.png",
				link : "http://windows.microsoft.com/en-US/internet-explorer/downloads/ie"
			} ];

	var base = "/a/~shanq/";
	
	function create_warning() {
		var markup = "<div style='margin: 10% 20%;'><h1 style='color:white;'>" + text[0] + "</h1><p style='color:white;'>" + text[1] + "</p><p style='color:white;'>" + text[2] + "</p><div style='text-align: center'>";

		for ( var i = 0; i < browsers.length; i++) {
			markup += "<a href='" + browsers[i].link + "' title='" + browsers[i].name + "'><img border='0' src='" + base + browsers[i].icon + "' /></a>";
		}
		markup += '</div><a href="javascript:void(0)" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)">' + text[3] + '</a></div>';

		var div = document.createElement("div");
		div.setAttribute("id", "old-browser-warning");
		//Ouch... setAttribute("style", ...) does not work in IE < 8 
		div.style.top = div.style.left = div.style.margin = div.style.right = div.style.bottom = "0";
		div.style.backgroundImage = "url('" + base + "img/opacity80.png')";
		div.style.position = "fixed";
		div.style.overflow = "auto";
		div.style.zIndex = "2147483647";
		
		if (/MSIE 6/i.test(navigator.userAgent)) { //Ouch... fixed position does not work in IE < 7
			div.style.position = "absolute";
			div.style.width = "100%";
			function max(a,b) { return a > b ? a : b; }
			div.style.height = max(document.body.scrollHeight, document.body.clientHeight) + "px";
		}
		
		div.innerHTML = markup;
		document.body.appendChild(div);
	}

	var old_onload = window.onload;
	window.onload = typeof old_onload === 'function' ? function() {
		create_warning();
		old_onload();
	} : create_warning;
})();