0

I am having a huge problem with cross-browser letter spacing which is causing box/input boxes to be off in different browsers, particularly safari and chrome.

As the picture shows, one is scrunched up while other looks normal. Does anyone have any fixes for this?

Letter Spacing Example

font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;
web-tiki
  • 99,765
  • 32
  • 217
  • 249
bryan
  • 8,879
  • 18
  • 83
  • 166
  • 1
    You're probably fighting anti-aliasing. – SLaks Oct 23 '13 at 20:35
  • Have you tried explicitly setting letter-spacing in your CSS? 'letter-spacing: 1px;' – Stuart Kershaw Oct 23 '13 at 20:38
  • @StuartKershaw I have tried letter spacing 0px (doesn't do anything) but 1px is way too much, I also do not have any anti-aliasing in my css. – bryan Oct 23 '13 at 20:43
  • I can barely tell a difference with that picture. – Malachi Oct 23 '13 at 20:48
  • have you tried doing a css reset and then manually adding the spacing? – Sergio Wizenfeld Oct 23 '13 at 20:54
  • Not sufficient code to reproduce the problem. Screenshot is obscure. The question speculates on letter-spacing but no `letter-spacing` setting is present in the code. The real problem is probably differences in font rendering, a frequently asked question (with the basic answer that it’s outside your control). – Jukka K. Korpela Oct 23 '13 at 21:48
  • I guess I'll have to accept it, I've found a work around I'll post – bryan Oct 24 '13 at 05:25

1 Answers1

0

The reason I was asking this question is because I had a site that had:

<div style="width:300px">Text: <input width="260px" /></div>

So what was happening is, the text would end up being a few pixels longer in different browsers, throwing off the ending of how long the input box was.

It has come to my attention that different browsers inevitably will render some font's slightly differently and there really is no work around for letter-spacing.

So, instead of changing the letter spacing so that the input box's matched - I made the input boxes fill the remaining space of the div that it was inside with a percent rather than a pixel length. This way, each input box ended at the same point in all the browsers and ended up matching.

Thanks for your help everyone.

How I did it:

HTML:

<div style="width:300px">
  <label>Text:</label>
  <span><input /></span>
</div>

CSS:

label { float: left; }
span { display: block; overflow: hidden; }
input { width: 100%; }
bryan
  • 8,879
  • 18
  • 83
  • 166