Written and posted by on Wednesday, August 29, 2007 by David Walsh

Internet Explorer 6, released on August 27, 2001, was a package of problems right from the start. Within a year of release, Microsoft silently declared that IE6 would not make enough money for them to support as closely as a browser should supported. The result has been numerous security problems, unfixed browser bugs, and a daily migraine for developers. Six years later, IE6 is still a thorn in the side of developers and it’s been perfectly clear that IE6, for the following reasons, must die.

Lack of PNG Transparency Support

I’m a huge fan on PNG images. Though their file sizes can be larger than GIF’s and JPG’s, they are generally clean, crisp graphics. Internet Explorer 6 does not support transparency in PNG images, rather it displays and ugly gray color as transparency’s replacement. Firefox, IE7, Opera, and Safari all support PNG transparency but IE6 clearly never will and that’s holding back businesses from using PNGs on their website.

Note: I am aware of the “.htc” patch and CSS fixes, but they, quite frankly, aren’t a good enough solution.

CSS Float + Margin / Padding Issues

Internet Explorer 6 adds double the amount of margin or padding on DIVs that are floated the same direction as the margin/padding exists. The easy fix to this problem is using the CSS “display:inline;” attribute:value on the DIV, but it’s easily one of the most annoying problems created by Internet Explorer 6.

Lack of CSS Pseudo-Class & Pseudo-Element Support

Pseudo-classes and pseudo-elements are clearly important to enhance website design and control as can be seen in my article Advanced CSS Link – Spice Up Your Links. Pseudo-elements allow you to control the first line, first letter, content before and content after an element. Pseudo-classes allow you to select elements at specific states (hover, visited, etc.) CSS provides for hover/visited on anchors but no other elements.

No Min-Height CSS Support

Min-height is a CSS attribute that I use in every single web project. Most of my website designs (given to me by my talented designer) require layers of background images and DIVs to be successful. Min-height is a valuable attribute because it allows me to set the necessary minimum height of the content DIVs so that the header and footer images (background or foreground) will do not meet too closely with the content-area background. There’s a very easy fix to this problem in my article Cross Browser CSS Min-Height but I prefer to avoid browser-specific fixes if possible.

CSS Anchor Background Image Flicker

I initially loved CSS because you could swap background images using CSS :hover effects instead of the painful javascript “onmouseover” attribute. The problem with using a:hover and background images is that IE6 produces an annoying flicker between changing from the rested state to the hover state — what a joke! Javascript provides a directive that can fix this problem, but wasn’t the goal of using CSS avoiding javascript?

Crashing With Code

I’ve seen quite a few articles on how you can crash IE6 using very little code. Granted someone would need to purposely insert the code, isn’t that a sign of a dead browser?

These are just a few problems with Internet Explorer 6. Unfortunately I’m preaching to the choir — I’m not worried about my blog’s audience, but the “Mom’n’Pops’” everywhere that don’t understand the difference in browsers. For this reason, millions of ignorant internet users will stick to using IE6 which will result in programmers dedicating valuable time to fix IE6-caused bugs and will hamper pushing websites to the next level.