Site wide fontsize for A and P

How?

[fischermx]

I want that all my a hrefs and paragraphs have the same exact size all over my site.
So, I declared this :

body
{
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 62.8%;
}

a, p
{
font-size: 1.1em;
}

But this doesn't work correctly, if I have "a" elements inside paragraphs they grOW!
I can't break the paragraphs since they're part of the text.
I guess must be a practical solution that my newbieness blind me to see it.
So, any input is greately appreciated!

[D_Blackwell]

<edit> Rethinking </edit>

[D_Blackwell]

I'm just not seeing this in Firefox, Opera, or IE.? Perhaps it's coming from a cascade elsewhere.

I'm curious about font-size: 62.8%; for the body. How did that come to be?

[fischermx]

The 62.8% is just a magic number to have the ems comparable to px just multiplied by 10.
Having the body font size of 62.8% 1.0em = 10px.

For repro just see this :

<a href="">Terms of Use</a>
<p>Use of this site, content, product or service of MySite constitutes acceptance of our <a href="terms.aspx">Terms of Use</a> and <a href="privacy.aspx">Privacy Policy</a></p>

You'll see the first "Term of use" is the same size of the paragraph, but those inside the paragraph are bigger.

[edited by: fischermx at 12:29 am (utc) on June 26, 2005]

[chunk_split]

I think it should be 62.5%

[fischermx]

I've seen some using 62.5 and some other 62.8.
I made many tests and found no difference measuring fonts pixel by pixel in a drawing program.
So, frankly I just threw a coin ... :)

[fischermx]

I've found the solution, though, I don't very like it.
Just declare a contextual for "a" :

p a
{
font-size: 1.0em;
}

That's make all the "a" inside "p" to be the same size again.

[chunk_split]

Yeah theres not a lot of difference, 62.5% of 16 is 10. 12px = 1.2em.

I think it's some sort of nested element problem, tho i've never seen it with <a> within <p>

[D_Blackwell]

Sorry. Using too high a resolution to see it. Just drop the a from:

a, p
{
font-size: 1.1em;
}

[chunk_split]

The size of <a> will be the same as <p> once the size of <p> has been declared.

[Robin_reala]

ems inherit. You've saying that for all <p> you want the font size to be 1.1 times larger than the containing element, and for all <a> the same. Because you can nest <a> inside <p> then you're saying you want those <a>s to be 1.1 time the containing element which is already 1.1 times the body. The solution as you've discovered already is to decalre <a>s nested inside <p>s to be only 1 times the containing element which is already 1.1 times to body.