Phantom Text in IE6

Wierd Ass Defect...

Recently I was passed along a defect that the UX team assigned to the project simply could not resolve. My manager figured it needed a "fresh pair of eyes". So I took a look at it.

"ext" text appears when optional note is checked... (IE6)

Ok. That looks bizarre. My initial thought was that it was probably a classic "unclosed tag" or something simple like that. So I popped open the page on my IE6 test machine and fired up IE Developer Toolbar and started poking around.

I tried and tried and I could not select/inspect the mysterious "ext". It was as if it did not exist in the DOM at all. It turns out it was because it didn't. It was an IE6 Rendering error.

When in doubt, Google it...

I forget the exact terms I searched with, but it was not easy to find anything that would clue me into what was going on. Finally, I think after the 3rd or 4th try I came upon a forum message on about page 3 of my search results that talked about my issue. It also referred to a page on PositionIsEverything.net. I had found my problem:

Explorer 6 Duplicate Characters Bug

"Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. "

http://www.positioniseverything.net/explorer/dup-characters.html

I solved the defect above by simply adding a class to the last div tag that was being floated and applying the following styles to it:

div.newClassName {
     float: none;
     clear: both;
     }

For some reason the original UX developers decided to apply {float: left;} to all the DIVs inside this component. I think I would have coded/styled then a little differently.

This issue came up again in a French Channel of the application on another component.

I am now the "go to" guy for crazy things like this...