Internet Explorer 6 was released on August 27, 2001. This old buddy is still believed to have large cake of usage share of web browsers till today.

However, HTML and CSS authoring process for IE6 takes very special treatment for this every-web-designer's-favourite browser (sarcasm). I'm going to call it a feature, instead of pesky bug; because maybe that's why the world will always be in hunger for talented HTML author.

Everybody have their own secret sauce to workaround the IE6, but here's my 6 commandments that worth sharing:

1. Floats need display: inline; to get mixed with margin-left / right

If you do float: left; with margin-left, make sure to add display: inline;
Same thing goes to float: right; and margin-right.

2. Add font-size: 0; to short height div

You have 3 divs for a round cornered box (hat, content, shoe) and the hat and shoe must be short height (i.e 6 pixels). Make sure to add font-size: 0; so that you'll get that short height div displayed correctly in IE6.

3. Add width: 100%; to really long div

Usually, this is the super recipe that can fix things dramatically from completely messed up displayed web site in IE6, to be neat in a zap.

4. Width / height don't mix with paddings

This is a bug where IE6 wrongly count the width / height and padding instead of just the width / height to be the total width / height of a div.
To counter this problem, go with two divs so that the parent have the width / height, and the child will have the margin. You'll get the same result.

5. Add position: relative; or floats before going position: absolute;

That's right kids! If you're planning to have a position: absolute;, you'll need a position: relative; or floats as its wrapper to the rescue.

6. Development: everything that looks nice on Firefox, someday it will be nice on IE6 too

I'm not going to lie, but this is true! That's what I said to my team back in the good old office days.
In development process using the Firefox, don't check your site look in IE6 if you're not finished. You'll be wasting time trying to fix the unfinished project.
The right way is to check IE6 after you finished the development. After that, you can start the long and boring IE6 fixing process ;)
But always be remember that someday it will be nice on IE6 too. There's no thing that can't be displayed correctly in IE6. You'll find the workaround for your problems.

 

Closing Tips