Internet Explorer 6 Ghost text bug fix

Introduction and Bug description

This bug is also known as "IE 6 Duplicate characters bug", "IE 6 Ghost bug",...
Note: this bug does not apear in IE 7 or newer versions of Internet Explorer browser

"IE 6 Ghost text" bug is usually triggered when two or more standard HTML comments (<!-- some comment -->) are placed between floated elements (such as DIV, UL,...).
It is beeing called "Ghost text" because this bug outputs characters duplicated from the last floated element, and the thing is that if you look at the source code, they are not there.

Some other known triggers and solutions are presented on the www, but HTML comments placed between floated elements are the most common method for waking up this "IE6 ghost".

"IE6 Gost text" bug fix

Ok, let's do some serious ghost busting :)

CSS usually used for two floated elements:

.floated_element_1,
.floated_element_2
{
float:left;
width:200px; /* this is just for float to actualy work correctly */
}

HTML code usually used for two floated elements (for this example I used DIVs):

<!-- SOME COMMENT 1 / start -->
<div class="floated_element_1">
  Some content in this fancy div no.1
</div>
<!-- SOME COMMENT 1 / end -->

<!-- SOME COMMENT 2 / start -->
<div class="floated_element_2">
  Some content in this fancy div no.2
</div>
<!-- SOME COMMENT 2 / start -->

IE 6 ghost text - fix

You could remove the comments between the floated elements and solve the problem, but you want to keep them because you want your code to be organized and understandable to other people...

So, let's keep those comments and fix the problem by adding the following CSS fix:

* html .floated_element_1,
* html .floated_element_2
{
display:inline; /* IE 6 fix */
}

Note: You will still need your css style like stated before, this fix only needs to added

Explanation

We use * html to make this part of CSS code understandable only to IE 6 and display:inline; instructs IE 6 to display those elements as inline elements. Other modern browser will ignore this CSS instructions and display elements as floated.

Conclusion

This fix may not resolve your problem as there are also other situations and actions reported that may create this IE 6 error.
For more information use Google.com and search for the therm "IE 6 Ghost text bug" or something similar.

Other resources:

Copyrights and Therms of use

Please note that you use this fix at your own risk only and I as author of this document am not responsible for any problems that may apear as consequence of using informations published here. However, there realy should not be any problems :)

Document info

Created: 15.01.2008
Updated: 17.02.2008

Author: Mihael Zadravec
mihael.zadravec (at) toastedweb (dot) com
www.toastedweb.si
www.ardi.si