[Solved] Ie6 makes content from nowhere, how to fix it?

[Frodo64]

Hello,

Im am working on a project. I saw that IE6 started to make the content from nowhere. I type <h2>What you should know about contact lenses</h2> in the xhtml, but he displays: What you should know about contact lenses lenses. Firefox and all other normal (sorry IE) browsers displays it normally like it should be. I have been managing this bug not the first time. Some times the fake text disappears when I add a news division like <div class="fixie6"></div> witch does completely nothing and it fix the bug, but am tired of adding like 5 divisions witch does completely nothing, so I’m looking for help. I have noticed that this bug appears only when I add a box (div or etc) and float it (in my page it is div#items) and when I add lot of more floated divs in it (div#items div.item). Then the ie6 starts to bug the content and make it from nowhere. I hope that anyone will know how to deal with that, because it really make me mad :evil: .

[attachment=1]Ie6lenses.jpg[/attachment]

[attachment=0]fflenses.jpg[/attachment]

Here is the web page link: LINK DELETED

Here is the code that I think (maybe it is not) makes this bug:

(I believe that it is something about the css, because when I remove style IE6 works OK with that)

Code:

#items {float:left; width:741px; display:inline; margin-top:13px; margin-left:6px;}
.item {float:left; width:163px; height:227px; padding:0 12px 16px 9px; background: url(images/item-bg.gif) bottom right no-repeat; position:relative;}
#items .last {background:url(images/item-last-bg.gif) bottom left no-repeat;}
.item .img {width:100%; height:105px; display:table; }
.item .img p {display:table-cell; vertical-align:middle; text-align:center;}
.item .img p a img {border:none;}
.item h4 a {font-size:11px; margin-bottom:6px; float:left;}
.item p.iabout {float:left; line-height:14px;}
.item a.more {position:absolute; bottom:16px; right:13px; background:url(images/item-a-more-bg.gif) no-repeat; height:32px; width:59px; color:#FFF; outline:none;}
.item a.more span {margin-top:2px; float:left; width:100%; text-align:center;}
.item p.price {position:absolute; bottom:16px; left:13px;}
.item p.price strong {font-size:18px; color:#3892a5;}
.item p.price span {text-decoration:line-through;}
#items a#all_stock {float:right; background:url(images/a-all_stock-bg.gif) left center no-repeat; padding-left:12px; font-weight:bold; margin-right:16px; display:inline; margin-top:7px;}

xHTML:

Code:

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Focus Dailies All day Comfort

30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..

Find out more

£7.87
was £7.99

Click here to see all our stock

Thanks for providing solutions.

[apostrophe]

I’ve never come across this bug but I’ve done a quick search and it looks like your comments are causing the problem. Try putting the comments before the closing div.
eg.

Code:

[Frodo64]

"apostrophe" wrote:

I’ve never come across this bug but I’ve done a quick search and it looks like your comments are causing the problem. Try putting the comments before the closing div.
eg.

Code:

OMG, you are right! How you came up with that idea? THANK YOU

P.S. Now I will need to change my beautiful comment style :|

[TheDoc]

This is one of my favourite IE6 bugs ever, makes absolutely zero sense haha. I remember when I first had to deal with it, so confusing. Fortunately, once you know what it is, it’s easy to avoid in the future.

[Author]

Posts