em versus percent

Forum Moderators: not2easy

Message Too Old, No Replies

em versus percent

please discuss

Purple Martin

5:41 am on Nov 4, 2002 (gmt 0)

Seeing a discussion about % in another thread, and remembering similar discussions in the past about ems, I thought I'd ask you all what the difference is.

When you look at this page in IE6, you'll see that em and % appear to do exactly the same thing:

[hpaa.com ]

They both set your font size to something relative to the browser default size.
They both inherit from the parent element(s).

So is there any real difference between % and em?
Does browser support vary (significantly)?
Which should we be using?

tedster

8:33 am on Nov 4, 2002 (gmt 0)

They are equivalent as far as I know...

1em = 100%
.5em = 50%

...and so on. I also don't know of any browser handling that differs between em and %. Bugs are the same and support is the same.

jamie

9:02 am on Nov 4, 2002 (gmt 0)

hi tedster,

in my IE5.5 manually changing the font size via the toolbar gives extreme results if the page is styled using ems. makes the text unreadable.

% gives a much more gradiated difference between larger, smaller, etc

only difference i know.

Longhaired Genius

10:24 am on Nov 4, 2002 (gmt 0)

The advantage of ems is that you can use them for padding and margins as well as font-sizes. So your whitespace grows and shrinks proportional to your text if it is resized (A Good Thing). I don't think percentages give a finer control than ems; there's nothing to stop you specifying in hundredths of ems (0.01em) and the browser will interpret as it sees fit.

j_h_maccann

2:07 am on Dec 27, 2002 (gmt 0)

The message that started this thread refers to a sample page

[hpaa.com ]

to demonstrate the claim that "1em = 100%". But when I look
at that same page, I seem to see that the page actually shows
the opposite!

I wasted a lot of time using ems that didn't work as expected,
reasoning about the CSS beginning from this claim. But
there does seem to be an easy way to make the claim become true.

Here's the full text of the sample page:


<HTML>
<HEAD>
<TITLE>Specifying type in ems and percent</TITLE>
<STYLE TYPE="text/css">
BODY {margin-left: 5% }
.m1 {font-size: 1em }
.m12 {font-size: 1.2em }
.m15 {font-size: 1.5em }
.m2 {font-size: 2em }
.m1p {font-size: 100% }
.m12p {font-size: 120% }
.m15p {font-size: 150% }
.m2p {font-size: 200% }
</STYLE>
</HEAD>
<BODY>
<H3>1em = 100% = font size of parent element.</H3>
<P>This page shows the value of relative sizing. If you change the default font size on your browser, the relative font sizes below should change relatively. The font at 2em and 200% should be exactly twice the size of the default font. IE 3.x and early 4.x Netscape Navigator versions do not display this page correctly.<BR>&nbsp;
<P>This is the default font at the default size.
<P class=m1>This is the default font at 1em.
<P class=m1p>This is the default font at 100%.
<P class=m12>This is the default font at 1.2em.
<P class=m12p>This is the default font at 120%.
<P class=m15>This is the default font at 1.5em.
<P class=m15p>This is the default font at 150%.
<P class=m2>This is the default font at 2em.
<P class=m2p>This is the default font at 200%.
</BODY>
</HTML>

On both IE6 and Opera6, when I look at that code, I see the
opposite of what it claims--1em does NOT equal 100%. And the
two browsers differ in opposite directions. On IE6, the
sample page shows that 1.2em=100%. On Opera6, it looks like
about 0.85em=100%.

HOWEVER, if I change the specification for BODY to


BODY {
font-size: 100%;
margin-left: 5% }

then both IE6 and Opera6 render the remaining lines so that
1em DOES EQUAL 100%, both equal the default, the multiples
match and are accurate, and so forth. It almost seems that
one needs to give the system a 100% "at the top" to calibrate
it, and then one can use either ems or percentages below.
(The two are not defined interchangeably, of course, but either
can be specified to work.) Setting BODY {font-size: 1em} does
NOT have the same effect of making 1em=100%, but actually makes
the discrepancy worse.

This is very mysterious, but it does seem to work. On a large
site, I set the font-size to 100% in the BODY, and then used
only ems for all the DIV's, and Hn's, and P's, and all the other
places I wanted font-sizes. With the BODY {font-size:100%} in
place, all the ems seemed to work and nest just as expected,
observing the desired "1em=100%".

Can anyone explain the effect of including BODY {font-size:100%}
to change the interpretation of em sizes throughout the page?
(Or, are there other factors that make the sample page look
different to different observers?)

tedster

7:12 am on Dec 27, 2002 (gmt 0)

Good observations, j_h_m. I don't know that any "explanation" will really account for these differences, but I appreciate your observation about setting body to 100%. That's very helpful for stabilizing things

FWIW, I fired up the Phoenix browser from Mozilla, and I don't see any size differences between em and % there, no matter what the body tag says.

BlobFisk

10:13 am on Dec 27, 2002 (gmt 0)

I've looked at the page in IE6 (on win2k) and I too see no difference between the 1em and 100%, and 2em and 200%

choster

2:39 pm on Dec 27, 2002 (gmt 0)

j_h_maccann, I wonder if your example would work if you used XHTML-validated code, in particular if all the <p> tags were closed with </p>. Otherwise, browsers will vary their interpretation-- whether or not to infer the closing tag (it is implicit in earlier HTML versions) and thus whether or not each subsequent paragraph will be considered nested and inherit size according to the cascade. I'm afraid I don't have access to IE6 or Opera 6 to test it out myself, but the em and pct defined values looked identical in IE 5.5 and Mozilla 1.2 on Win2K.

j_h_maccann

1:13 am on Dec 29, 2002 (gmt 0)

I looked again more carefully. I looked at the sample
file (which is not mine) on the net using five browsers,
with the following results:


WinXP, Mozilla 1.21.... : 1.0em = 100% OK 
WinXP, IE6, ("quirks"). : 1.2em = 100% BROKEN 
WinXP, IE6, (standards).: 1.2em = 100% BROKEN 
WinXP, Opera 6.0.5......:~0.8em = 100% BROKEN 
Win98, IE5..............: 1.2em = 100% BROKEN 
Win98, Netscape 4.79....:~1.1em = 100% BROKEN

So unless there is something strange in my browsing,
almost no browser shows the sample as "1em = 100%".

I then made a copy of the source and added "font-size:100%"
to the BODY style, and tried the same experiments again:


WinXP, Mozilla 1.21.....: 1.0em = 100% OK 
WinXP, IE6, ("quirks")..: 1.0em = 100% FIXED 
WinXP, IE6, (standards).: 1.0em = 100% FIXED 
WinXP, Opera 6.0.5......:~0.8em = 100% BROKEN 
Win98, IE5..............: 1.0em = 100% FIXED 
Win98, Netscape 4.79....:~1.1em = 100% BROKEN

So it appears that 1em = 100% is true on Mozilla (as tedster
reported), and can be fixed to be true on IE5 and IE6 by adding
the "100%" sizing to the BODY. But Opera 6 remains unmodified
(I mis-reported this earlier). NN4 changes the text sizes it
displays, but 1em still does not equal 100%.

[edited by: Nick_W at 1:23 am (utc) on Dec. 29, 2002]