Working with IE6

Help! My site doesn't work on ie6! If you've just typed that into Google then may I be the first to say: Welcome to the wonderful world of web design!

Web design, like many other design disciplines is all about working within certain constraints, and boy, does IE6 ever give us a lot of those! Here is a list of things to look out for and how to get around them.

First of all though I want to tell you something:

* html hack

The * (star) html hack is employed to add rules in the style sheet and have only ie6 read them. All you have to do it type * html before the element name.

For example:

All browsers will be able to read the first style rule (including ie6) but only ie6 will be able to read the second one. All the other browsers will ignore it. This is really good news for us because without this, we'd have to make a completely separate style sheet just for ie6 (I'll get to that later). One important thing to remember is to put the * html rule under the normal rule otherwise ie6 will use that one. The * html hack will allow use to easily fix most problems without having to bugger up our display on all the other browsers.

Adding something to a page that only IE6 can read

Another thing you're going to want to know is how to add things to your page so that only ie6 can read them. This is easy: simple put what you want only ie6 to see between the following:

Only ie6 will be able to see inside these tags. Every other browser will simple ignore them and whatever's inside.

Now let's have a look something you might want to fix. One common problem we might have is that:

Pngs don't work properly in IE6

Pngs are ace - they're generally smaller than jpegs with great image quality and can do transparency as well - only not in ie6. If you view a transparent png in ie6 you'll see that the bit that's supposed to be transparent comes out blue.

How to fix it. There are about three ways to fix this, but the easiest one is to not use pngs. But I want to use pngs I hear you cry, well how about this - say you've got a background image that's a png, make another version of the image that's a gif and use the * html hack to set ie6 to use it like so:

Sure, ie6 users will see an inferior image but hey, that's what they get for using ie6. But wait, you're saying, this is rubbish, I've heard that we can make pngs work with a bit of code. Yes, that's correct but the code is javascript, what happens if your user has javascript disabled? That's right, broken png city.

But ok, sometimes we just want those bloody pngs to work. How do we do that? With a bit of javascript. There are a couple of scripts available to download that will cycle through all the images and basically make the pngs work (display their transparent bits properly). They do this by replacing the pixels on the image that should be transparent with a 1x1 pixel transparent gif. The problem with this though is that is can seriously effect the performance of your site. Generally I don't use this. If I have something that absolutely has to be a png I will use the following bit of javascript inserted into the head area of my page:

You can just repeat this line of code for all the pngs you need to fix. Notice that the code starts with the id of the image I want to fix, the path to the image must also be correct and the padding-top attribute is set to the height of the image. Notice also that the code is only readable by ie6, so other browsers won't waste time fixing something that doesn't need to be fixed.