/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] IE6 duplicating part of link

Hey everybody! Here’s [URL=”http://spencer-designs.com/Stor-it/”]the website[/URL] 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…

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

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…

[CODE]/* 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;}[/CODE]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@novemberGreyauthorFeb 26.2008 — 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.
Copy linkTweet thisAlerts:
@aj_nscFeb 26.2008 — 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.
×

Success!

Help @novemberGrey spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...