Text content outside Div IE | Duplicate Characters Bug IE6

Hey Programmer,

Since you are on this page I know you are a web developer.  Cheers mate. I hope you have not spent one whole night awake and skipped dinner like me when you had a deadline and Microsoft Internet Explorer acted up. Especially the God Damned IE6 which should, IMHO, be banned and all users using that browser be taxed $1000 a year as Anti-Development tax. I am not exaggerating. We waste our time and electricity on fixing code for IE6 and that should be charged on users who don’t upgrade to Firefox or Opera or Chrome.

Anyway I wanted to share with you a peculiar error on IE6. You see parts of your content duplicated for no apparent reason. If it not aligned properly or breaking orientation its understandable…but showing some characters that make the end of the content is just outrageous.  Now see this example –

a simple instance of the bug - snapshot

a simple instance of the bug - snapshot

Notice the pink area in the footer. I have set the height of container divs and the two yellow/blue halves as same. The last three characters of my content in right half is being duplicated.  I know its like majic but who the hell likes this shitty magic?

How to recreate the bug?

<!--main div statrs here-->
</code>
<div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;">
<!--sub div statrs here-->
<div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;">
<!--left div statrs here-->
<div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #ffff99; float: left;">This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div.</div>
<!--left div endshere-->
<!--right div statrs here-->
<div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #00ffff; float: left;">
Right div text material here. Right div text material here. Right div text material here. Right div text material here.Right div text material here.Right div text material here.Right div text material here.</div>
<!--right div ends here-->
</div>
<!--sub div ends here-->
</div>
<!--main div ends here-->

How to fix this IE duplicate characters issue?

The fix is rather simple .. You got to limit the use of comments. Yeah…for some ‘God Knows Why’ reason using comments can lead to bugs in your HTML coding. From what I have read about this ..it seems IE6 has a margin buffer on right..that is if you have a box with 100px width you cannot have two boxes inside it with 50px width each.

1. You need to provide atleast 3px free space on right so that Microsoft guys might stick their thing there. (sorry for being rude)
2. Else you need to remove the comments. The comments seem to trigger the bug in most cases.

Either one of the fixes or their combination should work for you. If it does not you can curse me in the comments for wasting your time and continue your search on internet.

Tags:
Blog Comments

Thank you. What a pain in the ass! The margins issue solved it for me. I encountered this another time, and reading your article reminded me that it was due to comments that time.

Just encountered the same bug in one of my websites in IE8! Removing some comments fixed it indeed. Ridiculous!

Had the same issue with IE8…I dont understand why Microsoft unable to build/create a browser that actually works properly. Ridiculous!!! Thanks

Solved! Thank You!

Hey Guys. I am glad it helped. I really hate to develop keeping the shitty browsers IE6-IE7 in mind. Version8 is somewhat better. My CSS stacking for SEO purposes becomes a big pain in the ass because of the IE old version. We should rather take initiative and kill the browsers all together. Put up a notification on your sites for those who open with IE6 atleast. Son of a bitch upgrade to IE8/9 or try FF, Chrome, Opera. LOL

Thanks tons! I would say ‘unbelievable’, but then again it is IE.

I agree… the old boy is on his last legs and needs to be put out of his misery! Digital euthanasia LOL