Internet Explorer 6 or any other version has been and still is every Web Developer’s nightmare when it comes to designing even the most basic CSS for a website. Fortunately, with the release of Internet Explorer 8, most of the IE6’s past bugs have been fixed and slowly, but sure, Microsoft is getting Internet Explorer on the right path.

My first encounter with one of the “popular” bugs of IE6 is called duplicate characters bug. The bug is present when dealing with multiple floating elements divided by more than one comment line and it manifests itself by multiplying characters from the last floated element underneath the element itself. The bug also appears when any of the elements has the property display: none;.

I’ll make a small example with a box (container) containing 3 other floating boxes (first, second, third) with text in them. Some characters from the box third will duplicate and appear under the third box. The CSS content of my stylesheet is:

.container {
	float: left;
	border: 1px solid #000000;
	padding: 10px;
	height: 400px;
	width: 100px;
}
 
.first{
	float: left;
	border: 1px solid #000000;
	height: 100px;
	width: 100px;
}
 
.second{
	float: left;
	border: 1px solid #000011;
	height: 100px;
	width: 100px;
}
 
.third{
	float: left;
	border: 1px solid #001100;
	height: 100px;
	width: 100px;
}

And the content of the html file is:

        <div class="container">
            <div class="first">
                First box
            </div>
            <!-- comment -->
            <!-- comment -->
            <div class="second">
                Second box 
            </div>
            <div class="third">
                Third box 
            </div>
       </div>

The result should be 3 vertical boxes with text in them surrounded by one big rectangle. As you can see in Internet Explorer higher than 6 or Firefox there are no problems.

Internet Explorer 7 or higher

But in Internet Explorer 6 some characters (in this example the last 2 characters from the Third box) will duplicate outside the last floating box in the rectangular box. Notice if you try to select the duplicated characters, the original text will be selected instead of the intended text.

Internet Explorer 6

Luckily there are several fixes / workarounds for the duplicate characters bug that can be easily applied. One of them is to set to the last floating element (in our case the third box) with margin-right: -3px; (or 3px for elements floating right) . Another fix is to use the conditional comments for IE, like this:

<!--[if !IE]>Comment here<![endif]-->

Sometimes you can use the property display: inline; at the box preceding the comments as a solution, if it doesn’t conflict with design.
A more detailed description of the bug and examples can be found on the page positioniseverything.net and Adrian Pelletier’s page.