Help! Crazy Font Sizes

[Kai Jaeger]

I am playing with setting font sizes in CSS using em as unit of
measurement. All seems to be fine. Even Netscape Navigator shows the
characters very similar to IE, what is not the kind if px is used!

But!
when selecting the "Larger" or "Smaller" command from the menubar in
IE, font sizes increases from normal (1em) to, say, 6em or so _in the
first step_!!!
In the next step it seems to be 20em or say. Choosing "Smaller" makes
the text already unreadable in the first step: 2 pixels or so.

What in the hell is going on here?

Interestingly, Netscape 7.1 and Opera 7.2 both works well.

Does anyone have experience with this?

Kai

[Graham J]

> when selecting the "Larger" or "Smaller" command from the menubar in

IE, font sizes increases from normal (1em) to, say, 6em or so _in the first step_!!!
By 6em, I guess you mean six times as big as they were before you
changed the font size? Using em when describing something like this
isn't terribly helpful as what 1em is will change with the fontsize.
In the next step it seems to be 20em or say. Choosing "Smaller" makes the text already unreadable in the first step: 2 pixels or so.
I believe that by default IE on Windows will use something like 12px,
13px, 16px, 19px, 21px as the default body font sizes equating to
smallest, smaller, medium, larger and largest (I think there are
different defaults if you have a higher resolution screen), so seeing
such drastic changes does seem a little unusual.
What in the hell is going on here?

Unless someone can instantly spot something I can't, which they may
well do, I think it would be good to give a URL of a page where you
experience this, or failing that give some example markup.

[Brian]

Kai Jaeger wrote:

I am playing with setting font sizes in CSS using em as unit of
measurement.

when selecting the "Larger" or "Smaller" command from the menubar in
IE, font sizes increases from normal (1em) to, say, 6em or so _in the
first step_

IIRC, some versions of IE/Win have problems with font size set in em
units. Try using percentage instead. It will work as well in IE/Win
5+, IE/Mac, Moz, and Opera.

instead of h1 {font-size: 1.4em}
use h1 {font-size: 140%}

N4 has some problems with font-size: 100% for body, so you may want to
hide it from that browser.

--
Brian
follow the directions in my address to email me

[Christoph Paeper]

*Kai Jaeger* <ka*@kai-jaeger.de>:

when selecting the "Larger" or "Smaller" command from the menubar in
IE, font sizes increases from normal (1em) to, say, 6em or so

Try setting

body {font-size: 100.01%}

--
The Sausage Principle: People who love sausage and respect the law should never
watch either one being made.

[kchayka]

Christoph Paeper wrote:

body {font-size: 100.01%}

I'm curious - why the extra .01%?

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

[Christoph Paeper]

*kchayka* <kc*********@si hope.com>:

Christoph Paeper wrote:

body {font-size: 100.01%}

I'm curious - why the extra .01%?

For Opera 5 & 6.

<http://webdesign.criss ov.de/temp/body-fontsize8.html> (or without the 8)

--
"Music is essentially useless, as life is."
George Santayana

[Kai Jaeger]

Thanks to all the guys trying to help!

However, in the meantime I found out that using em is definitly no
good idea ("designing with web standard", zeldman). Not only that the
IE3 runs into trouble (I am willing to ignore good-old-day-browsers),
but even the newest browser have really large problems when selectors
using em are nested.

I have changed now to "xx-large" - "xx-small" settings, and it works
fine on modern browsers. Only Modzilla runs into problems when
enlarging gets too high, since only the fonts are enlarged, nothing
else - especially not the text container.

Again, thanks for help!

Kai

[Jukka K. Korpela]

ka*@kai-jaeger.de (Kai Jaeger) wrote:

However, in the meantime I found out that using em is definitly no
good idea
You mean you found compelling evidence that makes you ignore expert advice?
Interesting.
but even the newest browser have really large problems when selectors
using em are nested.
You are supposed to understand what the em unit means. Then you'll know how
to use it. It suddenly becomes obvious that when _elements_ are nested
(which is what you actually mean here), the use of em _must_ have cumulative
effect. And, of course, there might be errors in browsers here, as in
everything in CSS.
I have changed now to "xx-large" - "xx-small" settings, and it works
fine on modern browsers.

That indicates lack of sufficient testing (or sufficient reading about other
people's tests). Browser bugs are rather common, and the actual effects vary
- after all, there's just a _recommended_ scaling factor. And it is
symptomatic that the recommended scaling factor was 1.5 in CSS 1 and then
dropped to 1.2 in CSS 2. Even with 1.2, you get a very coarse tool. Surely
if you wish to increase or decrease font size, if you can only do that in
steps of 20%, or in something that _might_ be 20% or something else, you are
in a rather awkward position.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Alan J. Flavell]

On Sat, 21 Nov 2003, Kai Jaeger wrote:

Thanks to all the guys trying to help!
But your responses contradict your thanks.
However, in the meantime I found out that using em is definitly no
good idea
I don't think you did. You just found a commentator that told you a
different story, but you haven't had time and depth of experience to
evaluate their advice yet.
("designing with web standard", zeldman).
A commentator that's not unknown to the denizens of this group...
Not only that the IE3 runs into trouble
IE3 "runs into trouble" with almost any significant use of CSS. In
any case, there are very few users, so it's not unreasonable to just
hide the CSS from them and leave them to get unadorned content. You'd
be a complete fool to let considerations of IE3 dominate your choice
of CSS strategy for current browser usage profiles.
(I am willing to ignore good-old-day-browsers),
I'm certainly _not_ prepared to "ignore" any browser that might be
still in practical use, but I don't mind them missing the
presentational details of CSS. After all, CSS is designed to be
optional: a properly-made web page will still give sensible access to
properly-marked-up HTML content, even when some or all of the CSS
features are switched off.
but even the newest browser have really large problems when selectors
using em are nested.
On the contrary: it's the old browsers that get nesting wrong.

(And authors who got accustomed to designing for the bugs of old
browsers, and now don't seem to be able to cope with spec-conforming
behaviour).
I have changed now to "xx-large" - "xx-small" settings,
thereby spitting in the collective face of the advice you got here.
and it works fine on modern browsers.
You haven't had the time or experience, in between posting your
original question and now, to evaluate that yet.
Only Modzilla runs into problems when
enlarging gets too high, since only the fonts are enlarged, nothing
else - especially not the text container.
If you think that's your problem, then there's something else that
you're doing wrong also.
Again, thanks for help!

Hmmm.

[David Ross]

Kai Jaeger wrote [in part]:

I am playing with setting font sizes in CSS using em as unit of
measurement. All seems to be fine. Even Netscape Navigator shows the
characters very similar to IE, what is not the kind if px is used!

The basic problem is that em is relative to the size of the font
in the parent element. Although permitted, em (and ex) should
never be used to specify the size of the font. After all, what do
you mean when you use em to specify the font-size for the body
element (parent to all other elements)?

Good HTML design -- design that considers the person viewing the
page (the end user) -- should use only relative or percentage
sizes for fonts, leaving the body of the page with whatever
font-size the user chooses. That accommodates those users who are
visually handicapped and have to set special sizes, those users
who have larger or smaller monitor screens than we expect, laptop
users, etc, etc.

From the CSS1 specification (Section 6.1):
"Style sheets that use relative units will more easily scale from
one medium to another (e.g. from a computer display to a laser
printer). Percentage units (described below) and keyword values
(e.g. 'x-large') offer similar advantages."

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone snooping into your E-mail?
Use PGP. See my <http://www.rossde.com/PGP/>