Question about using the "em" unit to set font sizes in a web page

[laura888]

I'm setting all my font sizes in my CSS with the "em" unit (so that they can become larger, smaller, depending on viewer's browser.

What's happening is that whenever I set a link to a font that's sized with ems (assigning the style to the TD that holds the link), the font in the link becomes extremely tiny.

Any idea why that's happening?

I thought it might be an inheritance thing, but there's nothing around that I can find.

thanks for any info on this.

[Xithras]

1. It IS an inheritance issue.

Here's the problem in a nutshell. Let's say that your CSS sets a .9em height for the P tag, a .9em height for the A tag, and a .9em height for a class called "myclass". Now look at the following code snippet:

<p class="myclass"> Click <a href="somewhere.com">my link</a>.

Now, if the users browser sets 1em=10px, then simply wrapping your text in a paragraph tag will drop it to 9px. In our case, however, we're setting the class of the P tag. Myclass, in this case, will render its font size as 90% of .9em, NOT of 1em, meaning that the word "Click" will actually render at 8.1px (or as close as the browser can reasonably get). To make it worse, the .9em setting on the A tag will draw its parent value from the combined P and myclass values, so the link text will render at 7.29px.

There is NO "fix" for this problem, and no way to block inheritance. You simply have to plan your CSS with inheritance in mind and work around it. Also, ask yourself whether you really NEED to define the height of all the different text classes. In my example above, my goal was to set the height of the text to .9em, but inheritance screws up my ability to do that. The correction is simple...stop defining the height for my custom class and A tag. The P tag will set the .9em height, and all of the other tags will automatically inherit that height. If there is text that I want larger or smaller, I set my height in ems with the understanding that it will render relative to the base page font height (1.5ems will render 150% larger than the rest of the text, .5ems will render half size, etc).