IE6 Ghost Text Bug (With Multiple Solutions)

It is a sad fact that, according to some current browser statistics, Internet Explorer version 6 is still holding one of the highest percentages of use for one browser version (28.9% — although I personally think that number is somewhat inflated for reasons that I’ll save for another blog post). Unless the site you are working on has specific stats that show a much lower number for IE6 users, then it is still necessary to ensure that IE6 is displaying your markup reasonably well.

What is the IE6 Ghost Text Bug?

Due to a bizarre rendering error in IE6, a well-organized, W3C-compliant web page that contains clean, semantic markup, and that looks perfectly fine in all other browsers (IE7, Firefox, Opera, Safari, etc.), will sometimes display duplicate text in a DIV that is floated and is followed by an HTML comment. The consensus is that the bug occurs when multiple comments are placed between a series of floated DIV tags, with the actual bug taking place inside the final floated DIV.

Multiple Proposed Solutions

In the case of this bug, we know exactly why it occurs — because of the HTML comment that appears after the final floated DIV. So the easiest solution is to just delete that final problematic comment. But if you’re like me, and you organize your markup by commenting your divs, then that may not be a satisfying solution. So in this post I’ll provide a number of proposed solutions to this common IE6 bug.

SOLUTION: Debug the page from bottom to top

Unfortunately, sometimes even removing the final comment that appears after the affected DIV will not solve the issue –hence proper debugging techniques need to be used. In some cases, I’ve had dozens of HTML comments appearing in a page, and removing the last one did not fix the duplicate text. So I simply went through the markup in reverse, starting from the problematic DIV and working my way up. I proceeded to remove HTML comments one at a time, until I found the one triggering the bug.

SOLUTION: Place the comment inside the closing DIV tag

Since I don’t want to eliminate the comment, the method I usually use to fix the issue is to put the comment inside the closing DIV tag, so it would look something like this:

<div id="my_div_name">
  <p>Some content would go here</p>
  <!-- my_div_name ends -->
</div>

SOLUTION: Adjust the margin to a negative value

I have never personally had to use this solution, as I normally use the above, but some sources say that putting a negative left margin on the affected DIV will fix the problem (note: on a right floated div, you would apparently have to use a negative right margin). Of course, you would have to use an IE6 only hack to ensure this margin change doesn’t affect your layout in other browsers, but I don’t see the reason to resort to this, as it seems it would harm your layout in IE6 anyhow — so you would have to adjust something else on the page to compensate. But this is a proposed fix nonetheless, so you may want to be aware of it.

SOLUTION: Use display: inline

Some have said that they’ve had success using this fix to elimate this duplicate text problem. Again, you would use an IE6-only hack and apply “display: inline” to the affected DIV in your CSS. Similar to the previous solution, I can only foresee other issues arising if this is implemented. Also, I personally have tried this and have yet to see it work. Obviously this ghost text bug occurs under a number of different circumstances, and thus some solutions don’t work in certain situations.

SOLUTION: Conditional Comments

I have used this method, and seems to work perfectly. It also has a few extra benefits for developers that don’t like to re-organize their code (like me!). So I used this one recently and I think I’ll be using it exclusively in the future, should I run into this bug again. To implement this, just replace your existing comment with an IE conditional, like this:

<!--[if !IE]>Put your comment in here...<![endif]-->

The benefits of this fix far outweigh the one drawback. Firstly, the only drawback is that it looks ugly and out of place inside your perfectly organized markup. But the first benefit is that it keeps the comment exactly where you want it. And the second is that, similar to IE6 CSS hacks, when IE6 finally falls out of general use, all you have to do is remove this conditional and replace it with a normal HTML comment (assuming that you’ll need to go back into the markup at some later date).

SOLUTION: Use Non-Breaking Spaces (Not Recommended)

This is a very poor way to fix the bug, but technically it does produce the desired result, is quite easy, and is pretty much guaranteed to work every time on non-linked text. Since the bug causes the last few characters (usually just two or three letters) to appear duplicated a line or two below, then you can just add a few non-breaking spaces (using  ) to the end of the affected paragraph of text, and thus the duplication will occur only on the non-breaking spaces, so it will give the illusion that the bug is not occurring, even thought it still is. Of course, this is not a recommended solution as it gives your markup an “old-school HTML” feel, and will only work if the duplicated text is not hyperlinked.

“I Have No HTML Comments And I Still Get The Bug!”

I have never seen this bug occur on any of my sites without the use of HTML comments, but I have read blog posts where people have solved the issue and made no mention of HTML comments, so it’s possible that there were no comments used and it still occurred. If this is the case, then the solution seems to be to either use one of the alternative methods mentioned above, or else eliminate white space in your HTML. One blog post online seems to indicate that white space caused the ghost text to appear. So, you could systematically go through your markup using the dubugging method mentioned above and narrow down which particular chunk of white space is causing the problem.

Summary

Ultimately you will have to use whatever method works best for your style of coding. I’ve tried to exhaust all the possible solutions above, so if I’ve missed anything, please let me know, and I’ll add some footnotes or supplementary info in the future.