Simple IE6 Blocker/ IE6 Alert using CSS
If you’re a web designer or a web developer, I believe, IE6 is one of your nightmare 
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
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 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
11 Comments
Trackbacks and Pingbacks
-
[...] the original post: Simple IE6 Blocker/ IE6 Alert using CSS | Css Gallery – Appealing … Share and [...]
-
Social comments and analytics for this post…
This post was mentioned on Twitter by cssdance: Simple IE6 Blocker/ IE6 Alert using CSS – http://bit.ly/cey0wo…
-
[...] This post was mentioned on Twitter by Gopal Raju , Ben Jacob , Ryan R. Hughes, cssdance, lucapanzarella and others. lucapanzarella said: #IE6 alert using #CSS. Stop IE6 NOW! http://bit.ly/9yeiBd [...]
The problem appears when on the interface you use “background-image” which appears instead of the real warning image. Do you have any idea to fix it? Thx, Rob.
@Rob, I’m sorry I did not really understand what you mean. Could you explain more detail?
Sorry, it was my mistake, i think, because i`ve used this method above in my other project and it works. Something is wrong with my code lines
ah ok,
glad to hear that
It is useful to try everything in practice anyway and I like that here it’s always possible to find something new.
This is so damn great! I’m already using it on my several projects!
THANKS
Great technique! I use layered png’s so much and doing all the ie6 transparency fixes are a pain. Great way to tell the viewer to get updated, clear out that remaining 18% who still use IE6.
Thank’s for articel…. nice articel for me….
I hope you share knowledge more