Customer Street CSS

At Customer Street we recently encountered a strange problem with duplicate text appearing in Internet Explorer at the bottom of some dynamic listings. With a little bit of research we discovered this duplicate content was due to one of IE’s many strange quirks related to the IEs hasLayout property.

Affected Browser: Internet Explorer Version 6

The “Duplicate Content” article above covers the issue in detail but to briefly summarise the problem: Hidden elements inserted between two or more consecutively floated elements will cause IE to duplicate content, starting from the end of the last floated element and working backwards, two characters per comment. In our case this was triggered by a comment placed between each one of a series of dynamically generated results floated left. The comments or other hidden elements must fall between the floated elements to trigger the problem not within them.

According to the article the amount of text repeated is linked to the number of hidden elements found between the floats. But in this case there was only one comment between each one of multiple floated elements so it would seem that the effect is cumulative. The problem was fixed before I was able to compare the problem in detail but both the appearance and solution seem to suggest that it was part of the same issue.

Solutions

Where possible the simplest solution would be to remove the offending hidden element altogether. If this is not an option then converting comments to, or placing your hidden elements between, conditional comments seems to work also. This does have certain obvious drawbacks if these elements were crucial to the function of your page which I guess it’s possible you would still like to work in IE.

This bug is found only in IE 6 and has been fixed for version 7

Read this article for more info about hasLayout the source of most IE based browser bugs

3.67

after 3 Votes