Author Archive

Dealing with IE6 – a Step by Step Guide

November 1, 2010

When developing html websites there will often come a time when you need to deal with IE6. More often than not you will find a website works perfectly well on most modern browsers; Firefox, Chrome, Opera, Safari etc. and even IE8, but will look completely different in IE6. This is a little step-by-step guide to; handling the inevitable loading in IE6, which common problems to look out for and how to fix them as neatly as possible.

Keeping it Neat

These steps may seem straight forward, but by following them, you will be able to better ensure your code is more organised, easier to debug and free from messy hacks and workarounds.

Step 1 – write all code for modern browsers – those that comply with CSS specification.

I think it best to initially ignore older versions of IE and simply write your html and CSS code to run in a ‘normal’, modern browser. Usually, if your website works fine in one of these, it will also be compatible with all others – maybe with a few minor tweaks. In doing this step first, you will ensure you have clean code that is written ‘how it should be’ – or as close to a ‘CSS standard’ as possible.

Step 2 – test on modern browsers.

Test the site on other modern browsers. You should not experience many major problems at this stage as most should render similarly. If anything, you may have to make a few minor adjustments, but there should not be any need to begin writing hacks and separate stylesheets.

Step 3 – launch the site in IE6.

After launching the site in IE6, note down all major bugs and CSS problems/differences.

Step 4 – create a new stylesheet exclusively for use with IE6.

One of the best ways to deal with the event of a user using IE6 is to include a separate stylesheet which will be applied in this event only. The way to do this is through use of conditional comments. Conditional Comments are standard HTML Comments with special mark-up added that is understood by Internet Explorer browsers. So if you want to load in a stylesheet only for IE6 you could add the following lines in the head section:

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/CSS” href=”/assets/CSS/ie6.CSS” />
<!–[endif]–>
Or for IE7:
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/CSS” href=”/assets/CSS/ie7.CSS” />
<!–[endif]–>

Or, perhaps your problems exist both in IE6 and 7 and you want to use the same stylesheet for both. In this case you can use a comment that targets IE versions less than 8.

<!–[if lt IE 8]>
<link rel=”stylesheet” type=”text/CSS” href=”/assets/CSS/ieold.CSS” />
<!–[endif]–>

Note: You must include the conditional statement after your existing stylesheet, therefore, if the problem browser is being used, the existing stylesheet will be overridden.

Click here for more information on conditional statements.

Step 5 – use this guide, blogs, forums and other materials to fix common bugs.

You can now make IE6 specific changes to this stylesheet without interfering with the existing, working version of your CSS. Read through the Common Bugs and CSS Issues section to see if you can identify some of the problems you have found. For those that you can find, try to apply the fixes provided.

Step 6 – use brute force to fix any remaining issues.

If you have any more issues that you could not find a solution for, resort to a brute force approach to fix the remaining problems.

Common bugs and CSS issues

Check DOCTYPE – Avoiding ‘Quirks’ Mode

In general if you notice strange things when launching in IE6 or loss of some functionality, it could be because ‘Quirks mode’ is activated. All browsers have a ‘Quirks mode’ and basically it is a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers.

It is triggered by using no DOCTYPE, an old DOCTYPE (such as HTML3.2) or a broken DOCTYPE. In IE6 it is also triggered if you have anything else above the DOCTYPE. Before you do anything with IE6 make sure you have a full HTML or XHTML DOCTYPE, including the URL, and there is nothing above it in the source – such as comments.

For example:

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”en-gb”>

Double Margin Bug

When using floated divs with margins, IE6 tends to double the margin size.

For example:

#divname{
float:right;
margin-right:20px;
}

[This would be rendered as ‘margin-right: 40px;’]

The standard fix for this problem is to add display: inline; to the div. However, this then means you cannot apply a static width to your object – which you may well need. It is generally best to try and side-step this issue by using padding. If you want to push this object away from its parent element – add padding to the parent element, as padding should not be affected by this bug.

No Transparent PNG Support

Up until IE7, there is no support for PNG files with transparent backgrounds. So, if images on your site are appearing with backgrounds surrounding them and you’re using IE6 or lower, this is probably the issue.

To fix, you need to save all your PNG files in the PNG-8 format. To do this you need to simply open the file in Photoshop, select FileàSave for Web & Devices. A popup window will appear. In the top, right-hand corner there will be a drop-down box from which you need to select PNG-8. Save the file and ensure it is updated in your site folders.

Click here for a solution if it is imperative to keep your PNGs as 24-bit.

Step-down

When floating objects, they generally sit nicely side by side until the width of the div they sit in has been reached; however, there is a recurrent problem in IE6 by where the browser automatically adds a line break after each floated block element. This is called Step-down.

To fix this you can either:

-include a parent element line-height and set it to 0, i.e. line-height: 0px;

-set the elements being floated to display: inline;

-use padding on the parent element to even out the difference.

The Peek-a-Boo Bug

Do parts of the content on your page randomly disappear on loading and then appear again when you scroll or refresh the page? If so, it’s more than likely you’ve got the peek-a-boo bug. This bug has been somewhat suppressed in IE7 but is still occasionally a problem and of course, is still ever-present in IE6.

The best-known tips to fix it are to add the following CSS lines to the affected elements:

position: relative; /* peekaboo bug fix for IE6 */
min-width: 0; /* peekaboo bug fix for IE7 */

However, this bug is a tricky one so this simple solution may not always do the trick.

Click here for more information and further fixes.

Links Move when Hovering Over

If your links or divs jump or move slightly when you hover over them, it may be a padding problem. Make sure you do not use percentages to define padding, i.e. padding-left: 20%;

Disappearing Div with position: absolute

If you find divs start disappearing, check what position you have given them. Basically, in IE, an absolute positioned element next to a floated one will disappear, so inserting a statically positioned box between them will cause the absolute element to be shown.

Click here for more information about this bug.