Simple IE6 Blocker/ IE6 Alert using CSS

Posted at : January 31, 2010
Category : blog
Tags : , , , , ,


If you’re a web designer or a web developer, I believe, IE6 is one of your nightmare  :lol:
I won’t explain what the reason are, because most of you probably know better than me.
But for those of you who really-really don’t know (oh .. c’mon guys :p) you can find the answer from one of these websites : IE6 no more, Bring down IE6 , IE6 must die , etc

Yes, we should stop supporting IE6! It is wasting time and effort just to find a way to make your website work properly in IE6 , because the problem is with the browser, not you.
But should we do nothing? I mean, really do nothing technically? Then leave the website be broken in IE6?
Then, I think I agree with chris. The better way is, we should inform our visitor that we are going to stop supporting IE6.

Ok, So how’s to do that?

There’s a few methods available out there. Few of them using javascript and some were using php. And maybe you also have found your own method.
But now I am here want to share about how to create IE alert / IE6 blocker script using just 1 (one ) CSS + 1 (one) image file (which is I think is the lightetst, fastest and easiest method).

Ok. let’s do it

Firstly, we need to create an image file with your IE6 warning message inside, such as “hey you’re using an old, crappy browser”, or “Your browser is outdated” or anyelses. You can use photoshop, GIMP or any other image editing software you like to make it and you can save the format in .jpg, png or .gif.

Stop IE6

Stop IE6

Take alook at my IE6 warning image above, it’s simple, right? ( I’ve included the psd source files for this image, so you can easily edit it using photoshop or GIMP and make your own version)

Ok, next.

Now we need to create a css file that will call the image when IE6 used.
You can name it ie6.cvss, ie6hack.css or any else  then copy paste these lines to the file :

body , div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
display: none;
}
body {
background: url(../images/ie6.png) center no-repeat ;
}

The last step, we need to include the css file, and make the image appear only when visitor opening your website with IE6.
Add this IE6 css conditional comment to the <HEAD> section of your html file :

<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css"/><![endif]-->

And,  tadaa !! It finished :lol: Now your visitors who still using IE6 will no longer see your content.
It’s super easy right?

You can see the demo here or download the source file from here

* Credits : Eric meyer for css reset rules and morcha for nice and modern, glossy browser icons

elegantWorpress Theme Club
82+ themes for only $39!


Ads by CSSDance

11 Comments

Trackbacks and Pingbacks