Uncovering the “Explorer 6 Duplicate Characters Bug” in the wild
I don’t know about you, but I get very excited when I see an Internet Explorer 6 bug in the wild. It’s like bird-watching – coming across these weird and quirky rendering bugs in their natural habitat.
Take for example a recent update I made to a client’s home page. The two new buttons at the bottom of the page looked ok in all browsers except IE6 – where the last character – the “s” was repeated on the line below
Why does this occur?
As the IE bug bible states, the bug is triggered
“…only when the final float fills the container to the right edge, or to within less than 3px away from it. This is because IE6/win seems to have a weird 3px “bumper” margin on the right side of that last left float.”
In my case, the two floated elements fitted the parent exactly.
Luckily I have encountered this rare creature before. To solve the problem, I quickly added 3 extra pixels width to the parent container and the bug disappeared.
I can only hope that you manage to see it some day, in the wild, before it becomes extinct. Then you, too, will have something to tell your grand children about some day.
Date: 3 March 2008
Author: Russ Weakley
Category: Articles, CSS, News, Web, Web standards
Tags: , bug, duplicate-character-bug, ie6, ie7
Rare and nasty at best, I have come across this monster before. Thanks for the info Russ. Where is IE8 already?
Ha, what timing! I have never had problems with this bug before, but a project we’re working on at the moment has it in a form (using Uni-Form), and now I’m sure I won’t have to bang my head on the desk to solve it. Thanks!
@Amit: “Nasty beast”? It is a bug of rare beauty. Who could possibly have thought up such an odd thing to implement in a browser – it is an easter egg to match all easter eggs. I can see the developers deciding on how to bring it to life…
“and if they float two items to the exact width of the parent, we can give them one hell of a surprise – we’ll render the last letter of the content twice! That will stump them!”
@Dragan: “Bang my head on the desk”? I thought it may be a case of pure joy at seeing this bug in action!
We saw that a couple weeks ago during a database redesign meeting. It showed up in the HTML presentation.
Confusing as heck.
We hadn’t heard of that particular bug but we made the connection with the rendering issue of scroll-bars being added when page width was specified at %100.
Reducing the percent total value to less than %100 cleared the duplicate character issue right up.
This bug also comes when the code is commented. If your element is in float and you have some comments around (sometimes even a bit far!), just delete the comments and that would fix the bug. (sorry for my english but i’m french
)
Looks like a distant cousin of the three-pixel-text-jog:
http://www.positioniseverything.net/explorer/threepxtest.html
Sounds like your going to miss the IE 6 bugs –
I shall… like endangered species, they should be protected.
Protected all the IE bugs, and use FF or Opera.
Unfortunately most of the people using IE and therefore we have to live with all the “problems”.
Excellent, I have been trying to fix this exact problem for the last hour and eventually found your post. Problem fixed! Thanks.
I didn ´t see this bug in the wilderness. And i think i wouldn ´t see it never, because there are more and more IE7 useres. But normaly also the IE7 has enough bugs to lough about them.