Fonts in EM

crazy link behavior

[createErrorMsg]

I'm trying to switch the font units on a site from PX to EM, as I'm told this creates a more liquid environment for adding sizing options to a page.

I fear I'm missing some important peice of information, however, since switching the units to EMs has caused my link text to behave very oddly. The first and last links in any given section of the page are one size, but all the one's in the middle are another. Looking like this...

link1 link2 link3 link4

...the main place this happens is in a horizontal nav bar, but it seems to be sporadically effecting other links on the site.

I scoured my stylesheet free of any extraneous font declarations, so that only the body (with size in PX), the primary <p>tag, headers (slightly bigger) and footer (slightly smaller) have font declarations.

Any typologists out there know what I'm doing wrong?

[DrDoc]

As with most things, font sizes are inherited...

Imagine the following:

div, p {
font-size: 50%; /* .5em */
}

<div>
some text
<p>more text</p>
more text
</div>

What does this mean? Well, the div will default to a font size that is 50% of that of its parent (in this case, the browser) = half the user defined font size
What about the paragraph? Well, same thing... it will have a font size that is 50% of its parent (in this case, the div) = half the font size of the div = 1/4 of the user defined font size :o

That's not what we wanted!
...and that's probably what's happening to you ;)

So, what's the solution? Utilize the inheritance of CSS. Set the font size on the body, and override it whenever needed (just remember that the font size will now be in reference to that of the body).

[ktwilight]

lol interesting. thanks for bringing up this subject createErrorMsg and for the solution DrDoc.

solved my future problems. *bows* :D