The 3 Most Infamous Internet Explorer 6 Problems

So, your site's working in Opera, Firefox, Safari (and by extension, Chrome) and even IE8. Okay, so it looks alright in IE7, even if it's a little quirky about some things. But what about IE6?

There are three major problems that IE6 is famous for, in order of difficulty they cause:

  1. The box model
  2. Dropdown menus
  3. Partially transparent PNGs

The Box Model

Despite what you may have heard, the box model is not as insurmountable as all that. The problem is that so many people still use a transitional doctype, rather than a strict doctype. The strict doctype has slightly more difficulty validating since sometimes things that work in transitional aren't allowed in strict, but the benefits outweight the disadvantages in my mind. Not only does it fix the IE6 box model, but it even fixes small discrepancies across modern browsers.

Dropdown Menus

The hover pseudo-class is one of the really useful CSS abilities, it allows you to hide your gigantic submenus when you're not using them. However, IE6 has problems. Hover can only be applied to anchor tags, which can often screw up your carefully designed menus. There are two ways to deal with this:

First, you can code your site so that the hover always applies to the anchor tags. This usually involves setting the anchor tags to display as block. This is a reasonable solution, but only really effective if you're coding for IE6 from the start.

The other solution is to use JavaScript. Don't worry about people who have JavaScript turned off, anyone using IE6 with JavaScript turned off deserves a broken site. The simplest was to do this is to have two CSS classes for hover and non-hover states and simply switch between them when the user hovers.

Partially Transparent PNGs

A partially transparent PNG in IE6 is not transparent at all. Instead IE6 displays a hideous gray where the transparency should be. It's apparently possible to make IE6 accept partially transparent PNGs with some obscure IE specific code, but I've never been able to get it working, so the next best thing:

Most of the time, you'll want to use your partial transparency on top of a solid colour, so cheat a little and set the partial transparent bits to an opaque mix of the background colour and the transparent colour, then save it as an 8-bit PNG. It will look exactly the same and IE6 will be able to handle the strain better.