Fix for Internet Explorer 6 duplicate characters bug

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.

Get Shareaholic

Posted in: Web Development
September 2, 2009 | Tomita Militaru | 5 Comments

5 Responses

barkeeper42
September 3, 2009 1

IE6 must die! Report companies forcing their emplyees to use that buggy thing: http://mashable.com/2009/08/18/ie6-offenders/

Cheers!
Tomita Militaru
September 4, 2009 2

Great idea!Fortunately its going down, but still a whopping 13% presence on the browser market.

P.S.: Welcome on the Ropardo Team blog!
wholesale sunglasses
June 14, 2010 3

great experience, dude! thanks for this great

Articles wow… it’s very wonderful report.
Louboutin shoes
June 16, 2010 4

great share, great article, very usefull for me…thank

you
Silvia
September 22, 2010 5

I am always excited to visit this blog in the evenings.Please churning hold the contents. It is very entertaining.

Experience software development with ROPARDO S.R.L.

Fix for Internet Explorer 6 duplicate characters bug

5 Responses

Leave a Reply

Recent Posts

Subscribe

Recent Comments

Archives

Meta

Categories