cross browser letter-spacing

Question

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?

font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;

Answer 1

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%; }