I thought I had IE 6 all figured out, or at least well enough that I wouldn’t have to put much energy into it before it became irrelevant. So when I ran into the IE6 bug below I recognized it right off as the duplicate character bug.

IE6 duplicates the last few characters of a floated element.

The gist of the bug is that IE freaks out if there is an <!-- HTML comment --> between adjacent floated elements. Knowing how smart I am, I went to the template knowing what to look for and viola! There is was. I removed the coment, copied of my templates over, and refreshed the page with confidence…no dice.

After fiddling for a bit I went on to ask The Oracle for help and came across this. Apparently IE6 also chokes on floated elements if their total width matches that of the containing box. The only way to avoid it is to make sure the nested float is at least 8px less than the width of the container. I wasted an hour of my life I’ll never get back on this one. I’m counting the days till IE6 is just a memory.