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)
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
<h4><a href=\"#\">Focus Dailies All day Comfort</a></h4>
<p class=\"iabout\">30 unit package. Biocompatible contact lens with a moisturizing effect. Svehust oychivost to dehydration..</p> <a class=\"more\" href=\"#\"><span>Find out more</span></a>
<p class=\"price\"><strong>£7.87</strong><br /> was <span>£7.99</span></p>
</div><!--//.item-->
<a id=\"all_stock\" href=\"#\">Click here to see all our stock</a>
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.
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.
<!--close wrapper div--></div>
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 :|
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.
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)
#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:
Thanks for providing solutions.
eg.
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 :|