Some guys still use Internet Explorer 6 to surf on the Internet. They don't know that their browser is an illness. Conditional Comments are suitable to inform them about their illness. So they don't kill your wonderful design!
This picture is a little bit hard. I think a information bar is enough.
Many Webdesigner ignore older browsers. They support only mordern browser and mobile devices like mobile phones or tablets. I think this is ok but there should be a warning or something similar which tells the user, that the website doesn't support older browsers. In this post I will explain you how to work with Conditional Comments.
But first we beginn with some information about Conditional Comments.
Conditional Comments are only support by Internet Explorer 5 or newer. They looks like a html comment. Other browser like Firefox ignore them (you don't need any alternative style or much less a warning for Firefox ).
Let's go on with the syntax of Conditional Comments. They always beginn with
and end with
Isn't it very easy? But that's not all. The content contains always the “if” and “endif”-feature:
After the “if”-feature follow the operators:
|lte||less-than or equal operator|
|gte||greater-than or equal operator|
|( )||subexpression operators|
|vertical dash||or operator|
<!--[if IE]> <span style="color: red">Every Internet Explorer</span> <![endif]-->
<!--[if lt IE 7]> <span style="color: red">Internet Explorer 6 or less</span> <![endif]-->
<!--[if gt IE 7]> <span style="color: red">Internet Explorer 6 or later</span> <![endif]-->
Help kill Internet Explorer 6 is a free web application to add IE6 Update to your website. Isn't this great? You only have to download the code for free, and paste the code into your website before your closing </body> tag.
Paste this into your website before your closing </body> tag. Don't forget to edit the two paths in this code.
- icons_path: “ie6update/images/”
Some websites like css-tricks.com offer a separate style sheet for Internet Explorer 6. if you include a seperate style sheet for IE6 (< IE6) you have to include the default style sheet first. After the default one you can include your IE edition.
<link href="stylesheets/layout.css" media="screen" rel="stylesheet" type="text/css" /> <link href="stylesheets/design.css" media="print" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]><link href="stylesheets/ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
CSS-Tricks with a modern browser (Firefox) and CSS-Tricks with Internet Explorer 6.
It's wonderful to have a scroll to top link with Fading and SmoothScroll. IE doesn't like this! You have to include a special IE edition to realize that. Typical…
This is very easy.
<!--[if lte IE 6]><img scr="ie6.png" alt="Please update your browser!"/><![endif]-->
A simple box with some links to modern browser. That's enough!
Norman's Blog use a worldpress plugin named CSS-JS-Booster for the IE6 Update. Another Wordpress Plugin
to do this is WP-IE6Update (based on Help kill Internet Explorer 6). Note: If you design your own IE6 Update
bar and use images with opacity backgrounds have a look at IE PNG Fix 2.0 Alpha 4.
This tool adds near-native PNG support with alpha opacity to IE 5.5 and 6, because < IE6 doesn't
The Twitter solution is the best. They kill two birds with one stone. Social networks need anyway a mobile
version and they have also to be compatible with older browser. So they unite their mobile version with the
older browser version to a walkthrough.
This is similar than Norman's Blog. Ulf-theis.de displays an not overlooked IE6 Update-bar on the top of their
website. They IE6 Update-bar contains important information about the reason of the warning and a “how to
update my browser” link.
I like vimeo and I like their design. They have the best designed IE6 Update bar. They have develop the bar for
IE6 and not for IE9.
Unite your mobile version with your old browser version to a walkthrough is the best way to solve IE6 problems. If you don't have a mobile version is the IE6 Update information bar the best solution. Don't use to many style elements. You should design your bar for < IE6 and not for your modern browser! The worst way is to ignore older browser. The most websites I checked with IE6 don't have any update and the most websites arent't compartibl with IE6. Another solution is to include a seperate style sheet for IE6. You have the choice!