Winn.ws

Welcome to the future

A thorn in the side of many web developers is Internet Explorer 6. It’s an old browser that has many annoyances that cause those creating websites to have to add additional code just to have things render as they should. Google, being a company that develops a web browser, has taken it upon themselves to solve this problem somewhat. It has just released an early version of a project called Google Chrome Frame, which, when used, will cause Internet Explorers 6 through 8 to use Chrome’s rendering engine, not their default one. This allows stubborn users (or those in a workplace environment) to continue using the browser they want to, and no longer aggravate web developers.

Read more about Google’s Chrome Frame

Thanks Google!

Internet Explorer Ghost text bug

This bug is also known as “IE 6 Duplicate characters bug”, “IE 6 Ghost bug”,…

Note: this bug does apear in IE 7 and 8 beta. (This is only an IE bug no other browsers are affected)

“IE 6 Ghost text” bug is usually triggered when two or more standard HTML comments () 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.

CSS usually used for two floated elements:

1
2
3
4
5

.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):

1
2
3
4
5
6
7
8
9
10
11

<!-- 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 -->

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:

1
2
3
4

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

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.