Is there a definitive checklist for IE6 testing?

Asked by Jay Stonch a design student from San Diego

What conventional considerations are there for IE when designing a website?
I understand that there are box model differences, but is there, like, a “definitive checklist”
of things you need to adjust for when designing across browsers?

We dont have a “definitive checklist” for Internet Explorer and tend to squash bugs as we go

BUT before you even tackle the problems of IE6, remember to code using web standards and test early and often. Ensure you have valid code, javascript included. Also make sure you have a full, valid doctype.

But a checklist is probably a good idea so lets start building one.

1. The PNG Issue

Internet Explorer does not support transparent PNGs by default and you have to load them through the AlphaImageLoader or use the htc method. Both are explained in detail by Kris Crousore here: Cross Browser Transparency with PNG.

2. The min-width issue

Internet Explorer does not support the CSS min-width and min-height properties. Some people use the IE Dynamic Expression to set the width. Ive had mixed success with this method and recommend designing around it instead of using the hack.

/* Dynamic Expression */
width: expression(document.body.clientWidth < 910 ? “900px” : “100%” );
}

learn more about Dynamic Expressions here.

3. The double margin bug

Internet Explorer doubles margins on floated elements when the margin is on the same side as the float. These floated elements need to be display:inline.

4. Clearing Floats

Clearing floats in IE is challenging. Some people clear floats by adding an empty div or a horizontal rule with the clear:both property. Most of the time the problem is the parent div.


Jason says: When ever you float an element add an overflow:hidden property to it. Suddenly that div is now seeing the floating div. Also adding a hard width and height can fix this as well, but who works in absolutes (pun intended).

5. Ordered Lists

Sometimes IE6 doesn’t display the padding when you add background images to a numbered list. I havent seen this consistently and switch to using a un-ordered list if this happens.

6. Can Has Layout ?

satzansatz.de explains hasLayout as:

Layout is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.

This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default.

Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect.

hasLayout can cause some strange effects with some elements especially margin issues where some block elements seem to behave as inline ones. An easy way to spot hasLayout issues is the IE Developers Toolbar.

A simple hasLayout Fix is to apply a width or height usually by using the star hack to apply a small height to IE6 and below only. Since IE6 treats any height as a min-height it will therefore resize itself accordingly.

* html #container {
height: 1%;
}

7. Small Height Bug

IE6 wont collapse to a smaller height than the base font-size. So it makes the boxes atleast as tall as the base font size.

This can be fixed with a font-size: 0; or overflow:hidden;

8. Pseudo Hover States on Elements

There are none. Except on links and there is no simple CSS Fix. You can use javascript to add the onMouseOver trigger but make sure it degrades gracefully.

9. The Box-Model

Last but not least we have the king of all annoyances itself. The box-model bug. Internet Explorer adds the margin and padding differently from other modern browsers.

box model

The trick is to avoid padding on the container and add it to the child elements instead.

10. ????
Im sure we have missed some more bugs, anyone care to add them to the comments and I will include them in the post.