Feb 01
Explorer 6 Duplicate Characters Bug
2005 at 04.20 am posted by Veerle
It seems ages ago that I talked about CSS so today is the perfect oppertunity. A weeks back I was working on a website and this bug appeared on one of the pages. Some text characters from the last of the floated elements of my layout were duplicated below the last float. Thing is, I didn’t think it was a CSS bug at first, it was just too weird. It got me really puzzled, no idea what was causing this.
p>
Then when reading Andy Budd's post about the most common browser bugs...I realized how much I don't know yet on this subject. For me it wasn't common at all but new. After reading the demo article on Position is Everything it became clear to me and I've solved the bug in no time. I have been visiting this site a few times though, to find fixes to certain bugs, but this weird one seems to be less visible or I overlooked it each time.
Things got solved by putting a -3px right margin on the last left float. The opposite can be done for layouts with right floats:
#right {float: left;width: 151px;padding: 100px 0 0 0;margin-right: -3px;}
It's unbelievable how people are able to find a fix like this. Especially this one, since nothing seems triggering it. Well anyway, thanks to all those fixers and solvers, they sure are a big help.
14served
1
Gee, thanks Veerle!
I’ve had the same error several times now, and I never knew what it was. Sometimes ‘double-DIV’ing helped, sometimes moving stuff around did the trick. It just never seemed to solve the problem, just cure the symptoms…
Now I finally know how to solve this! Thanks again.
2
Ie, always Ie…
3
Actually, Veerle, it’s not really unbelievable. I come across many CSS problems all the time, but most of the time I just try to add some thing like (negative) margins/paddings or different floats. Usually, some of those weird things fix a problem. It’s just a matter of trial and error. Most of the time, when you have a problem, it can be fixed with:
- (negative) paddings/margins
- floats
- using another clear
Just a tip of mine :-)
4
*bookmarked*
I like having a list of my css bugs :)
5
Huzzah!!! This is definately bookmark-worthy! You wouldn’t believe how many times we’ve run into this… Danke!
-Ryan
6
I got this problem to many time and someone gave me the answer on your blog… Put breakline /br at the and of the right div...:O) i test it and its work for me.
Put it before closing the </br> </div>
7
Luckily, there is a very high chance that a bug has been documented somewhere. The hard part can be finding the answer, but again thank god there are great sites out there keepng track of these things.
8
I use an empty comment like this and it fixes the issue
some text <!-- --> funny but it does, & I dont know why.
9
Dustin:I like having a list of my css bugs :)
see?! see?! They’re Dustin’s bugs! He said so himself...LET’S GET HIM!
:0D
10
Hi,
I encountered the same bug a year ago. I was able to come up with a workcase. I submited the bug and the workcase to an internet acquaintance who works at ms (winforms) and he submitted it into their tracking bug tools.
I think it deals more with GDI and a “painting” kind of bug (eg: could be reproduced in other applications) as i have other work case where paragraphs would not appear if you don’t scroll the page up and down or select the “invisible text”.
Really tricky.
11
I remember having the same problem when i first looked at using CSS. Sometimes it would happen, and then other times it wasn’t. I was really glad when i was able to get through a design without this crazy bug happening, just to learn that after i did one step (which isn’t always the same) this bug appeared again. Usually i would have to start all over again, until i did a little experimentation, and what worked for me was applying a ‘<span class="clear"></span>’ tag that had .clear { clear: both } in the css, right under the div that was causing the problem. But thanks the fix you found, I’m always looking for cleaner ways to write my code, especially when there are bugs that are tricky to fix.
12
I think one needs to be careful about randomly throwing things at “bugs” in order to “fix” them. If you do this your methodology tends to be more “black magic” than “problem solving”.
Often it’s not a bug at all but something you are doing wrong. The best thing to do is to create a minimal test case and then experiment to try and find out what is actually going on. A large proportion of the time I end up “fixing” bugs by doing things a different way.
If that fails I usually turn to the web for help. Somebody is bound to have experienced the same problem in the past and posted about it on their blog or on CS-Discuss. The trick is knowing what to search for.
Unfortunately “real” browser bugs are the largest hurdle for new developers. There are loads of sites that outline various browser hacks but apart from PIE I can’t think of any that do the same for bugs. What we need is a community collecting Jar for nasty browser bugs.
Oh and when I say common, I’ve maybe come across that problem twice. However it’s a good’un as it’s pretty easy to spot. Once you’ve experienced it once you’ll know what it is the next time, unlike many other bugs.
13
This might be a little off topic, but I went to duoh.com to check out the page you were demoing and it seems that it has a generic “Underconstruction” when you just type in “http://duoh.com”. It works fine however when you add the www though. You probably already know that though :)
14
@Andy, you are right about the fact that we need to create a test case to make sure it’s nothing you are doing wrong instead of jumping too fast to the conclusion that it might be another bug. The one in my post however was too weird for me :-) I’m all for a community collection Jar, good idea! I’ve already thought about this too, but how to set such thing up? We need at least a few experts on this matter. I’m far from an expert but willing to help, or do my part. Would you be interested? I know the main issues are… time… money etc. as always :-D
@Raff, yes I’m aware of this ... it’s something I should have been fixed ages ago, but it’s kind of forgotten. Thanks for the reminder. It is fixed now :-)