Sent by John Lewis on 19 October 2002 12:12
Hello Tony,
Saturday, October 19, 2002, 3:25:03 AM, you wrote:
> I'd like to use em for positioning, but the guesswork is making my
> head ache, anyone got a resource that gives a conversion guide?
> e.g. 10px=2em if ......
Does not compute. How many pixels are there in an em? Ten, twenty,
whatever. It varies. If a user has a default font size of 24 pixels
and no other font size defined, then one em is equal to 24 pixels.
On the font-size property, one em is equal to the font-size of the
parent element. On everything else, one em is equal to the font-size
of the current element. With that out of the way...
What if blockquotes are 0.9em? Then 1em on font-size on the blockquote
is 24px (since it checks the parent value, which is 24px). If 1em is
still 24px, then 0.9em is about 22px. However, on the width property
1em is now equal to 22px, which means 0.9em is about 19px. Shifty,
ain't it?
In practice, this makes sense to me. In theory, this gives me
headaches. For me, usually the best way to get things working is to
use Gecko (Mozilla, Phoenix, etc.) to figure out the values for
something, just by trying them out. If you use ems for anything, be
prepared for it to vary a lot. Try not to let things break just
because the default font-size is 36px and you thought it would be
18px.
By design, ems will never look identical on 100% of Windows machines
running IE6, while pixels (as far as I know) do. That is, one pixel is
always one pixel. In reality, people have different sized monitors
running at different resolutions, which means one pixel is only one
pixel in theory. Geez!
So, make it look right (in Gecko or possibly Opera) and then make sure
it looks good in all the browsers you can find. It won't look the same
since default sizes are guaranteed to be different, but it should look
good. You can also try zooming in and out (in Opera) or changing the
text size (in Mozilla/IE) to see how the positioning changes.
--
John
