/    Sign up×
Community /Pin to ProfileBookmark

letter-spacing text cut off

Copy linkTweet thisAlerts:
Oct 11.2010

I’m having an interesting issue with CSS. For some reason when I use letter-spacing and text-align: right together, IE8 (not 7) cuts the end of the text off. I can’t find anything about such a bug anywhere. Even more stupidly, it doesn’t do it all the time. Unfortunately I can’t post a link as the site isn’t mine.

A bit of the example code (yes, it still does it if I use something other than px, and I’m well aware of the issues with using px rather than, for example, em):

[CODE]#contenttext h1 {
color: #004e2c;
font-size: 20px;
font-weight: lighter;
letter-spacing: -2.5px;
text-align: right;
}[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 12.2010 — Have you removed margins from all elements, a css reset?
Copy linkTweet thisAlerts:
@sg1psychopathauthorOct 12.2010 — I hadn't, but I tried it and the problem was still there.
Copy linkTweet thisAlerts:
@FangOct 12.2010 — The snippet of code given is insufficient to find a solution.

All browsers will cut characters when letter-spacing is negative.
Copy linkTweet thisAlerts:
@sg1psychopathauthorOct 12.2010 — I know all browsers cut characters a little, but on IE8, for example I have the word Business aligned right, and the s gets cut in half. From deduction I think it's the right align that's causing problems. Oddly it doesn't do it on the left when I left align it.
Copy linkTweet thisAlerts:
@FangOct 12.2010 — Try[CODE]#contenttext {margin-right:2.5px;}[/CODE]
Copy linkTweet thisAlerts:
@sg1psychopathauthorOct 13.2010 — Unfortunately that didn't work. Thanks though.
Copy linkTweet thisAlerts:
@FangOct 13.2010 — You'll have to give a link or example if you want help.
×

Success!

Help @sg1psychopath 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.21,
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,
)...