While I've been working with IE6's bugs for years, I had not encountered this curious CSS bug. At first I was in true wonderment whether it was my eyes or a solid overdose of caffeine. Alas, after a good night's sleep and plenty of bottled water to cleanse my cells, it turns out my eyes weren't betraying me after all.
The problem was that IE6 would duplicate the last character of the last list item of a floated element and place it on a new line. Having never seen this error before, I was only slightly amused and rather baffled as to what might be causing this drop to the next line.
Image 1.1: This is how it should be displayed.
Image 1.2: IE6's rendering bug. IE6 duplicates the last character of the last floated element and throws it onto the next line
The first thing I did was to go through my CSS rules, one by one, trying to see what might cause IE6 to have such a hiccup. So, I checked the widths for my child elements and re-calculated the total width and they matched the width of their parent element.
After some intense, albeit fruitless thinking, I went to my favourite rescue and found that this bug had been documented. The culprit were the comments I had made in my code. I always comment my code, so the possibility of IE6 coughing blood over them in this case didn't cross my mind for a minute. This bug does not seem to occur as much as the other well-known IE rendering bugs. I still do not understand it. Perhaps there is no plausible explanation for it.
If anyone has figured it out, do shout.
