Do you find that some of your customers who use an old version of Internet Explorer have problems using your website? Besides being the slower of the major browsers, Internet Explorer also lacks support for many HTML and CSS methods used on many websites in the modern internet. The result is either a poor browsing experience for the user or quite simply the website doesn’t work.
This is particularly true for rich website applications like DecoNetwork. So how to we inform your users that their old Internet Explorer is not only affecting their browsing experience but could actually be compromising their security on the Internet? (and yes, older version of Internet Explorer are less secure). Or as Microsoft puts it:
There are many benefits of upgrading to a newer version of Internet Explorer – improved speed, tabbed browsing, and better privacy settings to name a few.
The web has changed significantly over the past 10 years. The browser has evolved to adapt to new web technologies, and the latest versions of Internet Explorer help protect you from new attacks and threats.
This juicy snippet comes from a site Microsoft put together at http://www.ie6countdown.com that tracks the use of IE 6 and educates their customers to move on. Even Microsoft are asking their users to let Internet Explorer 6 die peacefully.
We can also do our part. Here is a small snippet you can insert into your DecoNetwork website that will create a small floating DIV at the top of your site and warn your customers about their old browser. The great thing about this snippet is it will appear on every page to remind the user “IT’S NOT MY SITE… IT’S YOU!!!!!!!!!!”
It looks like this:
How do you do it?
Simple!
In your DecoNetwork website browse Manage Store > Appearance > Customize Template HTML.
Select the Custom Layout tab check Override default layout:
Scroll down the custom HTML and locate the <body> tag.
Insert a few carriage returns after <body> and past the following HTML:
<!--[if lt IE 8 ]> <div id="oldbrowser"> OH NO! You're using an old web browser. We strongly recommend you update to a modern web browser such as <a href="http://www.mozilla.org/firefox" target="_blank"><b>FireFox</b></a> or <a href="http://www.google.com/chrome" target="_blank"><b>Google Chrome</b></a> to improve your browsing experience and your <b>online security</b>. </div> <![endif]-->
Change the content to suit what you want to say.
The <!–[if lt IE 8 ]> section controls what version of IE this will show for. In my case I have it set to show in versions LOWER than Internet Explorer 8. In other words for IE 7, 6, 5 and heaven forbid 4 and below. If you want it to show for all Internet Explorer versions then change it to <!–[if IE ]>. Check out some other great Internet Explorer conditional comments at http://reference.sitepoint.com/css/conditionalcomments.
Click Update to save your changes.
Next we need to style the floating DIV and ensure it always stays at the top of the page and can be easily seen.
Browse Manage Store > Appearance > Customize Template CSS.
Select the Create Custom CSS tab and paste in the following CSS:
#oldbrowser {
width:100%;
position: fixed;
z-index: 99;
background: #FFCC00;
height: 20px;
color: #444444;
font-size: 12px;
padding:5px;
}
#oldbrowser a {
color:#000000;
}
Finally you need to ensure your new floating bar does not overlap any other content on your site like your login links and currency selector. To do this we ‘push’ your website down the same height as your floating bar (30px).
Add this CSS to your Create Custom CSS tab:
#container {
margin-top: 30px;
}
Click Save CSS to save your changes and BINGO! You are now a loyal fighter to modernize the internet world 
