Make your site compatible with IE6

IE6 isn't very well loved anymore, even Microsoft are apologising for it. Microsoft are however, attempting to move people away from IE6, using the statement "Friends don’t let friends use Internet Explorer 6".

This may be so, but unfortunately at this point in time (April 2011) IE6 still counts for roughly 12% of the worlds browser usage. It's tempting as a web developer to say "nope" to requests for making your website work with IE6, but when working for an organisation where customers cannot/refuse to upgrade their browser, and their custom pays your salary, sometimes you don't have a choice.

Below are some tips and tricks that may help in turning a modern (read: standards compliant) website into something that will hopefully work reasonably nicely in IE6 too. These tips certainly worked for me.

CONDITIONAL COMMENTS

In a perfect world the CSS written to style your website will work in all browsers. In the real world this is often not the case, particularly when it comes to IE6.

If you have written standards compliant CSS and have it working nicely in the modern browsers, trying to shoehorn CSS that works to IE6 can be a pain. In these instances, I prefer to use conditional comments, so I can separate my valid CSS from my "quirky IE6 CSS".

Conditional comments are used exclusively by the IE browser family, and allow for serving portions of HTML to specifically targeted IE versions. To see a list of available conditional comments, click here.

In my example, I want to load a custom CSS file for all IE browser versions below IE7:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/Include/CSS/ie6.css" />
<![endif]-->

The code between these tags will only be included in IE browsers below IE7 - all other browsers will ignore the include statement. This allows for writing CSS in the "ie6.css" file that will only be applied for users with IE6, IE5.5 etc.

For example, if you have an element that is positioned correctly in all the modern browsers, but appears out of place in IE6, the CSS class can be redefined in the "ie6.css" file, and the "!important" declaration can be used to override existing class styles:

In Layout.css (used by modern browsers)

#logo
{
    left: 100px;
    top: 30px;
}

In IE6.css (only picked up by versions of IE below 7

#logo
{
   top: 20px!important;
}

TRANSPARENT PNGs
Put simply, IE6 does not support PNG transparency.  Below is a screenshot demonstrating the how a transparent PNG is rendered in IE6 versus IE8:

This is not an issue if the images on your website use a single transparent background (bit-transparency) - images can be converted from PNG to GIF (you will however, need to consider whether doing this will reduce the quality of your image). However, if you utilise more complex opacity in your images (alpha-channel transparency), you will either have to lose your fancy opacity settings, or make use of one of the many JavaScript libraries that will attempt to fix this for you.

My preference is the "ifixpng" jQuery library, available here.

Once you have included the library in your project, you can apply the PNG transparency fix to all images across your website using:

$('img[@src$=.png]').ifixpng(); 

Or to a specific image (with ID of "logo"):

$('#logo').pngfix();

The nice thing about this library is that the code to do the PNG transparency conversion will only run if it detects the IE6 browser, so no extra processing will take place for users of modern browsers.

JQUERY POPUPS & Z-INDEX ISSUES
In modern websites it is common to utilise popups on a page to retrieve information from users, display larger images from thumbnails, etc. IE6 does not play nicely with these popups if certain types of element are on the page, for example, the "select" element, as demonstrated below:

A form displayed in IE6 (before "Save" button is clicked and popup appears):

Popup which is displayed after "Save" button is clicked:

As you can see, the "select" element peeks through the dimmed background of the popup window (and the popup itself).  This is due to the fact that IE6 does not support the "z-index" attribute on "select" elements.

Again, there is a handy jQuery library designed to work around this issue with relative ease - bgiframe. From the plugin webpage:

"The bgiframe plugin works by prepending an iframe to the element. The iframe is given a class of bgiframe and positioned below all the other children of the element. In the default configuration it automatically adjusts to the width and height of the element (including the borders) and the opacity is set to 0. The element needs to have position (relative or absolute) and should have a background (color or image)."

In short, if you have elements poking through your popups (or any other DOM object for that matter) when viewing in IE6, include the bgiframe library and call the following on the popup:

$('#popup').bgiframe();

Hope this helps! :)