rocking-minds.org

// Whats up, IE6?

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.

Conditional Comments (CC)

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 ;-)).

Syntax of Conditional Comments

Let's go on with the syntax of Conditional Comments. They always beginn with

<!--[content]>

and end with

<![content]-->

Isn't it very easy? But that's not all. The content contains always the “if” and “endif”-feature:

<!--[if]><![endif]-->

After the “if”-feature follow the operators:

operator explanation
! not-operator
lt less-than operator
lte less-than or equal operator
gt greater-than operator
gte greater-than or equal operator
( ) subexpression operators
& and operator
vertical dash or operator

More details about Conditional Comments and their operators (Microsoft)

Let's code some examples

<!--[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]-->

How to use Conditional Comments sensible

Conditional Comments aren't only used for information bars, they are also used to import different style sheets or JavaScript. If you like display a image like “you cannot be serious” you can do this as well with Conditional Comments. ;-)

Help kill Internet Explorer 6 - information bar

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.

<!--[if IE 6]>
<script type="text/javascript"> 
	/*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("<script type=\"text/javascript\"   src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>"); var __noconflict = 		true; } 
	var IE6UPDATE_OPTIONS = {
		icons_path: "ie6update/images/"
	}
</script>
<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif]-->

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/”
  • <script type=“text/javascript” src=“ie6update/ie6update.js”></script>

You should also paste the folder “ie6update”, which is in your downloaded code, on your websever (there is the js-code and some icons in it). That's all! ;-)

Different style sheets

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

Website: css-tricks.com



CSS-Tricks with a modern browser (Firefox) and CSS-Tricks with Internet Explorer 6.

Different JavaScript

JavaScript is also understand different by IE. But there's no difference between different IE versions. So we only check IE and not the IE version.

<script type="text/javascript" src="js/scroll_to_top.js"></script>  
<script type="text/javascript" src="js/fading.js"></script>
<!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]--> 

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…

Display a image

This is very easy.

<!--[if lte IE 6]><img scr="ie6.png" alt="Please update your browser!"/><![endif]-->

Inspirations

Ben the Bodyguard

Website: benthebodyguard.com



A simple box with some links to modern browser. That's enough!

Norman's Blog

Website: normansblog.de



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
understand this.

Twitter

Website: twitter.com



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.
;-)

Ulf Theis

Website: ulf-theis.de



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.

Vimeo

Website: vimeo.com



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.

Conclusion

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!

Leave a comment…



EWOLK
  • E-Mail address will not be published.
  • Formatting:
    //italic//  __underlined__
    **bold**  ''preformatted''
  • Links:
    [[http://example.com]]
    [[http://example.com|Link Text]]
  • Quotation:
    > This is a quote. Don't forget the space in front of the text: "> "
  • Code:
    <code>This is unspecific source code</code>
    <code [lang]>This is specifc [lang] code</code>
    <code php><?php echo 'example'; ?></code>
    Available: html, css, javascript, bash, cpp, …
  • Lists:
    Indent your text by two spaces and use a * for
    each unordered list item or a - for ordered ones.
Hello World!
Blogging with DokuWiki and mnml-blog... rules!
QR Code: URL of current page
Syndiaction/RSS Feed
Recent Comments