Pixels, Font Size, and Internet Explorer

I've been fussing with Internet Explorer* 7 beta and trying to figure out why it matters that IE won't resize pixel-sized elements and how this affects using relative font sizing in CSS.

Let's recap. If you set a relative font size, it has to be relative to something. Indeed, a font size set in ems or percentages is calculated with respect to the element's parent. So, a p element set to 100% would be 100% of its parent, which is usually the body.

What is the size of the body? If none has been set, the browser uses its default--usually 16 pixels (though Firefox lets users adjust this value). If a relative size has been set, it is calculated with respect to this default and then this number is used to find the size of the p and any other descendants.

The tricky part comes when visitors use the Text Size option (called Text Increase in Firefox). What an average visitor might expect, and what happens in Firefox and others, is that when they choose a new Text Size, the size of all the text in the Web page changes in proportion to their original sizes.

But in Internet Explorer, the Text Size option seems to affect only the default size of the body element, and any other elements that are relative to the body. Any element whose font size is set to a fixed size (e.g., in pixels) is not changed when a visitor chooses a new setting for Text Size. This kind of makes sense. If the designer sets a pixel size for an element, why should changing the default size of the body have any effect on it?

But there's one very weird thing. If you set a pixel size for the body, thinking that you can then have control over all the elements contained in that body, for some reason Internet Explorer decides that header elements are not children of the body element and do not inherit its size. This has a further consequence: when the visitor uses the Text Size option, the headers grow and shrink but other elements, like p (rightly treated as children of body), do not.

No matter that h1 and p are both children of body.

One more point. If you decide to set a pixel size for the body and then give the header elements a relative size, all of a sudden Internet Explorer recognizes the parent-child relationship between the body and the header and immediately applies the calculation (and stops affecting headers with the Text Size option).

It's just not quite right.

The solution is probably to continue to follow Owen Briggs' proposal to use both percentages and ems to size text.

(*Note, Internet Explorer's unwillingness to resize pixel-specified font sizes is not peculiar to version 7. Earlier versions have the same characteristic.)