Negative ems and letter-spacing.

[jlizarraga]

Hi all,

Only Firefox (3.0.7) understands the following:

letter-spacing: -0.03em;

It has no effect in IE6, IE7, Safari 3, Opera 9, nor Chrome 1.

Am I doing something wrong here?

Thanks!

EDIT: It seems to have to do with the decimal places? Using "-0.1em" works in all browsers, but then my letters are too close.

EDIT 2: I have narrowed it down to this: Anything higher than -0.05 will not work for me except in Firefox. For example, "-0.05em" works but "-0.04em" does not. Very confusing! Is Firefox the only one getting it right, or the only one getting it wrong?

[magicyte]

It will always depend on the height of the text in your code. One browser may interpret sizes differently and display them differently, and this may be the case. Ems are determined by text size, as I've recently learned.

[Snookerman]

The size of the ems is decided by the font size of the parent element. If you have the default font size which is usually 16px then 1em is 16px. 0.05em would then be 0.8px which is rounded up to 1px and 0.03em would be 0.48px which I guess Firefox rounds down to 0 and that is why you don't see a difference.

A good idea if you want to work with ems is to set the body font size to 62.5% which is 10px (16 x .625). It then becomes easier to calculate the ems since 1em equals 10px, 1.5em equals 15px and so on.

This gets more complicated with nested elements since the ems are relative to the value of the parent element font size. If you for instance set the body font size to 62.5% and then you set the font size of wrapping div to 2em that will be 20px which means that in the child elements, 1em is now equal to 20px.

I suggest you google around for some tutorials that explain how ems work.

Good luck!

[jlizarraga]

Thank you Snookerman. By the way that is smart what you did with your signature links. :P

I do use 62.5% and ems in everything I do. I didn't even think about the whole fraction of a pixel thing. In this case the text size was 1.2em/12px, so 0.03em of that was just over a third of a pixel. That makes sense then that 0.04em at just barely under half a pixel would get rounded up.