Internet Explorer 6 fixes guide

posted by Paul - 15:53 23/05/11

Good news everyone (well, for  front end web developers at least)! Latest figures from w3schools.com show that Internet Explorer 6 usage is down to less than 3%!

However, since the world still requires sites to work in this archaic browser, here are a few of the most common IE6 fixes that have helped me squash many an IE6 bug.

IE6 Min-height hack

So, you’ve got a text box that needs to be a minimum of 500 pixels tall, but also needs the ability to expand. Most likely, the first step you will take to style this, is to put a min-height: 500px on the object. However, since IE6 doesn’t understand the min-height attribute, it will only fill out the object to the size of the content within it. Luckily, this can be solved with a couple of extra lines of CSS.

.objectClass {
min-height:500px;
height:auto !important;
height:500px;
}

(Source: http://www.dustindiaz.com/min-height-fast-hack/)

IE6 Png fix

Another rather irritating failing of Internet Explorer 6 is that it is unable to correctly display png images. Png’s are brilliant because they are capable of having a transparent background, which is great for positioning them over the top of other elements of your site (as opposed to gifs, which typically lower in quality).

IE6 is unable to render this transparency and instead shows an ugly grey background in place of the clear background.

Our current weapon of choice for combating this problem is the jquerypngfix.js jQuery file (source: http://jquery.andreaseberhard.de/pngFix/)

When placed on your page alongside the latest version of jQuery (http://jquery.com/), you can then use the following code to remove those unwanted grey backgrounds:

This will instantly remove the grey backgrounds from any images directly on the page. Any objects with background images will need to be listed.

Sadly, this is not 100% foolproof as it will remove any background-position attribute of your object, which could be a problem for button hover states for example. Also, any png’s will need their width and height specifying either in the HTML or CSS to avoid it squashed by the javascript.

Double margin on floats

This problem can cause untold horrors in IE6 since it doubles the size of the margin on objects that are floated.

The worst case scenario here is that you if you can’t fit all the floated elements next to each other, they will consequently drop below each other so they fit.

The easiest solution, if you are just dealing with two objects (one floating left, one floating right), is to simply remove the margin from the objects and put padding on the containing object instead.

Alternatively, if this isn’t an option (if you have more than just two objects for example), you can use a CSS fix that I have started using recently:

.floatingObject
{
display: block;
width: 200px;
margin-left: 20px;
float: left;
}

* html .floatingObject
{
display: inline;
}

The * html is only interpreted by IE6, so the fix is only applied in the browser it is needed, without breaking the page in the other browsers.

(Source: http://davidwalsh.name/prevent-double-margin-padding-ie6-css-float)

Containers not expanding around floated contents

Staying with float errors, when a containing object has floating objects within, it is common for the container to cut off, rather than expanding around the floated objects. This is most noticeable when the background image of the container gets cut short (usually to the size of the containers padding).

Adding an empty div with a clear: both attribute after the floated objects effectively “pads out” the containing object so it expands around the floated content. It’s rather annoying that you have to add extra redundant html, but all in all it’s a simple fix.

The ultimate IE6 fix

Hopefully, these four fixes should get developers out of a few problems that I have faced in the past.

Plenty more fixes can be found at www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs.

Of course, these fixes wouldn’t be necessary if users simply upgraded their browser! The internet has come a long, long way since IE6 was released in 2001 (That’s right, it’s ten years old!) and has so much more to offer than what this out dated browser is capable of handling.

So, my ultimate IE6 fix is... GET CHROME!