[RESOLVED] IE6 duplicating part of link

[novemberGrey]

Hey everybody! Here's the website (http://spencer-designs.com/Stor-it/) I'm working on right now, and if you notice the right column you will see the three "Learn More" links with the little arrow to the right. All three of these links display perfectly in Firefox (as always) and Internet Explorer 6 displays the first two correctly but then screws up the last one. View these screen shots to see what it's doing...

Firefox (Correct) (http://spencer-designs.com/Stor-it/firefox.jpg)
Internet Explorer 6 (Incorrect) (http://spencer-designs.com/Stor-it/explorer.jpg)

It appears that, for some reason, Internet Explorer 6 is extending the link and duplicating the last "E" and the arrow image.

Also here is the CSS behind the column...
/* Column */
#column {width: 269px; height: auto; float: right; background-color: white;}

/* Spotlights */
#spotlights {width: 262px; height: auto; float: right; background: #eff7fa url('http://www.spencer-designs.com/Stor-it/global/images/spotlights.gif') repeat-x;}
.spotlight {width: 220px; height: auto; float: right; padding: 10px 20px 15px 20px; font: 11px Verdana; color: black; border-right: 1px solid #b5d1ee; border-left: 1px solid #b5d1ee; border-bottom: 1px solid #b5d1ee;}
.spotlight h1 {height: 48px; margin: 0px; padding: 10px 0px 0px 0px; font: italic normal 24px Georgia; letter-spacing: -1px; color: #294776;}
.spotlight h1 span {font-style: normal; color: #336699;}
.learn {margin: 10px 0px 0px 0px; text-align: center;}
.learn a:link {padding: 0px 15px 0px 0px; font: 11px Verdana; color: #336699; background: transparent url('http://www.spencer-designs.com/Stor-it/global/images/arrow.gif') no-repeat right 2px; text-decoration: none;}
.learn a:visited {padding: 0px 15px 0px 0px; font: 11px Verdana; color: #336699; background: transparent url('http://www.spencer-designs.com/Stor-it/global/images/arrow.gif') no-repeat right 2px; text-decoration: none;}
.learn a:hover {padding: 0px 15px 0px 0px; font: 11px Verdana; color: #336699; background: transparent url('http://www.spencer-designs.com/Stor-it/global/images/arrow.gif') no-repeat bottom right 2px; text-decoration: underline;}

[novemberGrey]

Ahhh I figured it out, I did a little more searching on the web and found that it was a well known "Explorer 6 Duplicate Characters Bug"! I simply added "margin-left: -3px;" to the last "Our Facility" box and it fixed it.

[aj_nsc]

Google "IE duplicating character bug".....It has something to do with floats and may or may not be triggered by HTML comments between floated divs. I've had the same problem and mine wasn't triggered by comments. A terrible workaround, which works, nonetheless, is to add a few   at the end of your content so IE will just duplicate these characters and not any actual content. Good luck and let us know what you do to solve it.