IE9 letter-spacing problem

Question

I have a page that renders ok, in FF (3x, 4x), Chrome, IE (6, 7, 8).

When tested on IE9 the texts are wider. Investigating the problem it appears that the text is actu

Answer 1

Try this as this work with Internet Explorer 8 and Firefox:

letter-spacing:0.49px;
letter-spacing:0.88px !ie;

MSIE will floor the first letter-spacing to 0px and ignore the second rule. Firefox will read the second rule and use it instead of the first rule.

Then, to compensate, you can use the same trick and add more horizontal padding to your text in MSIE that what you give to in Firefox.

Of course, make further tests with other browsers!

Answer 2

Afraid I don't have IE9 on this machine - will try and look again tomorrow on a PC that does, but my immediate thought is that the w3c validator says your HTML is invalid.

It doesn't like the fact that your text is directly in the BODY and isn't in some other container. I just wondered if that was the issue? Perhaps the other browsers are 'correcting' on your behalf and assuming a paragraph container.

Does the appearance change if you put the text inside a paragraph or a DIV?

Answer 3

I have always found that the most useful way to set font size across browsers is using em not px values.

I tend to set up the base point in the body tag in CSS:

font-size: 62.5%

Then whenever I wish to set a font size I use an em value such as:

font-size: 1.1em;

This equates to 11px. The advantage I have found is that it renders more consistently across browsers and also resizes better using the browser resize controls.

Give this a try - I think it should solve your problem.

Thanks nathj07