Internet Explorer 6 (IE6) was first released in 2001 and is still being used by approximately 20% of the world. With all the competition from Chrome, Safari and Firefox, it is outdated but developers still need to make sure their sites display correctly in IE6.

Many developers and designers dislike IE6 because it lacks support for advanced and new CSS and XHTML forcing them to find hacks and fixes to get sites working in it rather than simplifying the website design“>website design.

There are many problems with IE6 but the main ones are CSS rendering and transparent PNG support. Developers and designers have no choice for now so until then we have to find ways around all the problems that can occur in IE6.

In this post I will be listing the some of the best hacks and fixes to get around the problems that developers face with IE6.

CSS

Since IE6 doesn’t support advanced CSS or CSS3 there are a variety of hacks, which can be implemented to work around any IE6 display issues.

Here is one article, which talks about some of the most common bugs and the fixes needed for IE6:

IE6 CSS Tricks And Hacks – http://www.websurfshack.net/2009/08/ie6-css-tricks-and-hacks/

CSS Selector Hover

IE6 only supports :hover for a tags but with this fix, a hover state can now be applied to the li and other elements using a htc file. Visit the site below to find out more and to get the required file.

CSS Selector Hover Fix – http://www.kavoir.com/2009/01/css-selectorhover-hack-for-ie6.html

CSS3 Rounded Corners

A new feature in CSS3 is rounded corners without the use of images. IE6 will never support this but a solution has been developed, which will display rounded corners correctly in IE6. This fix is a Javascript called DD_roundies and it can display rounded corners in IE6 using HTML code.

DD Roundies – http://www.dillerdesign.com/experiment/DD_roundies/

HTML

Developers can use conditional comments to only allow IE browsers to see code that is meant for that version of browser, such as a specific CSS file to get a site displaying correctly in IE6. They are supported for all versions of IE from IE5.5 and can be used for a certain version or for all versions.

IE6 Conditional Comments – http://reference.sitepoint.com/css/conditionalcomments

HTML5

There are also few fixes to allow HTML5 to be displayed in IE6 using Javascript and plug-ins.

Google Chrome Frame

The first fix is an early-stage open source plug-in called Google Chrome Frame, which allows developers to start using HTML5 and not have to worry about it not displaying incorrectly in IE6. Even though this is in the early stages of development, it could mean that HTML5 will become more widely used in websites enabling greater functionality.

Google Chrome Frame – http://code.google.com/chrome/chromeframe/

HTML5 In IE

Next we have a fix using Javascript from a site called html5doctor with source files and easy to understand instructions on how to implement it into your websites so you can start using HTML5.

HTML5 For IE – http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

PNG Alpha Transparency

IE6 doesn’t support transparent PNGs, which can make it hard to design multi-layered websites, but luckily there are a few good fixes to allow developers to use transparent PNGs on their websites.

IE PNG Fix

The IE PNG Fix from TwinHelix is a CSS based fix for PNG transparency in IE6 and it is very simple to implement using a few files. The only disadvantage of this fix is that it makes the CSS invalid because CSS Level 2.1 doesn’t support the behavior property.

IE PNG Fix – http://www.twinhelix.com/css/iepngfix/

Unit PNG Fix

This fix is called Unit PNG Fix, which uses Javascript to display transparent PNGs correctly and is also easy to use. This has an advantage over the IE PNG Fix because it doesn’t use any CSS and therefore the CSS code will always be valid.

Unit PNG Fix – http://labs.unitinteractive.com/unitpngfix.php

Browser Upgrading

Since IE6 is still used by 20% of the world’s population, it is hard to get people with IE6 to upgrade because either they don’t have a choice or do not know how to upgrade to a better browser.

Fortunately there are some Javascript plug-ins, which will display a warning notice on sites, which are viewed with IE6 and below, and it will allow the user to upgrade their browser easily. I have listed a few different plug-ins, which will force IE6 users to upgrade to a modern browser.

IE6 Upgrade Warning – http://code.google.com/p/ie6-upgrade-warning/

Sevenup – http://code.google.com/p/sevenup/

Browser Update – http://browser-update.org/en/index.html

Anti IE6 Groups

There are many sites and forums, which are against IE6 and are determined to see an end to the browser once and for all. Some sites have even set up campaigns against IE6 to get people to switch to a better browser.

Bring Down IE6 – http://www.bringdownie6.com/

IE Sucks – http://www.iesucks.info/

IE6 No More – http://www.ie6nomore.com/

Related posts:

1. Web Designers Guide To CSS 3
2. CSS Web Design Resources
3. The Ultimate List: Developer Cheat Sheets
4. CSS Absolute Positioning
5. Grid Frameworks

Tags: Browsers, CSS, Hacks, HTML, IE, Internet Explorer, Web Design

This entry was posted on Friday, November 27th, 2009 at 11:38 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.