Do you use a lot of HTML comments in your code? Well it’s very nice habit to keep your code commented, unfortunately IE6 doesn’t like it unless these comments are placed in between floated elements.
Characters will get repeated when there are multiple HTML comments are placed in between floated elements, also called as ghost text bug. First two comments have no effect, but each consecutive comment causes two duplicate characters. Three comments will duplicate three characters, four comments cause four repeating characters & six duplicate characters for five comments. Thanks to Andy Budd for these detailed numbers.
Example code:
<div class=”contentClip”>
<!–Content starts–>
<div class=”content”>
<!–Left column–>
<h1>some text</h1>
<ul>
—–
</div>
<!–Content ends here–>
<!–Footer starts–>
Fix:
Negative 3px right margin to your last float element or make the element 3 px wider again that will cause problems in other version of IE & other browsers, so rather than using hack better to remove or use less comments in floated elements.
Similar article on PositionIsEveryThing.com.
10 Comments
March 23, 2008 at 7:36 am
Thanks for the solution, I had similar problems
July 19, 2008 at 12:36 pm
Thanks soooooooooooooo much man
I was lose last 3 hours to resolve problem… This text is resolve my problem in a five seconds!!! Chears
July 19, 2008 at 7:33 pm
Hey el22or,
Glad to hear that it helped you…
October 2, 2008 at 12:07 pm
I’ve had similar problems, on a page without comments. Removing the comments was not an option, since they weren’t there.
Your solution worked like a charm. Thanks!
October 2, 2008 at 7:29 pm
Hey Jonas,
Removing comments did work for me, have you tried negative 3px margin fix?
February 6, 2009 at 4:40 pm
Another solution for this bug, if you can’t afford loosing 3 pixels (sometimes it’s not possible!), is to use [if !IE]> and <![endif] inside the comments bracket.
This way you still can make as many comments you want in your HTML, and you don’t have to bother with the 3 pixel lost. Works perfectly fine on other browsers, and fix the bug in IE.
February 7, 2009 at 12:15 am
Interesting!
Thanks for the inputs Mauro
March 4, 2009 at 4:48 am
Thanks soooooo much
August 10, 2009 at 12:26 pm
I can`t believe it works!
Why this IE must cause all these troubles?
Thanks!
December 27, 2009 at 1:53 pm
Thanks.
added to very last floated item and it worked. I had no comments though.