4 replies [Last post]
MaxJ
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2003-08-28
Posts: 36
Points: 0

Does anyone know for sure how this feature works?

I've been looking at the CSS2 spec and trying it out but can't understand it.

The spec says :-
(1) The computed value is inherited.
(2) The percentage refers to the parent's font-size.

However, if I try out something like:

<h1>Heading 1 : Normal</h1>
<h1 style="font-size: 50%;">Heading 1: 50%</h1>
<h1 style="font-size: 100%;">Heading1: 100%</h1>
<h1 style="font-size: 200%;">Heading1: 200%</h1>

It doesn't do as I expect. i.e. 100% should be same size as normal, 50% half size and 200% twice size. (IE6, NS7, Op6 all seem to be the same.)

Is the computed value not in fact inherited? If this is the case, what is the reference for the base font size used to calculate the new value?

Thanks

Max

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

font-size: Text resizing using percentage

What you are seeing is correct.

The parent font size in this case is the size of the BODY font not the size of the <h1> font.
Your style declaration overrides the normal <h1> size and, in your case, uses the percentage size of the body font.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

font-size: Text resizing using percentage

What you have to remember is that the ultimate Parent element that any other element within HTML is the body element (or html in CSS markup).

Therefore, adding the parent font-size in the body CSS will set the parent font size of the document.

In other words, using:

body
{
font-size: 10px;
}

The standard H1 size without re-sizing style, will maintain it's usual relative height to the body (about 200%). The H1 at 50% will be 50% of the body's 10px size; the 100% H1 will be 10px (as the body text); and yep, the 200% will be 200% of the 10px size.

[EDIT]: Sorry, didn't notice Stu's response until I'd posted... Quickdraw McStu. Wink

The next sentence is true. The previous sentence is false. Discuss...

MaxJ
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2003-08-28
Posts: 36
Points: 0

Sorted

Thanks for both of the replies. I understand now. Looking back at the spec I now see that there is an example to explains this.

So, doing the following does double the size because the <h1> is the parent of the <span>;

<h1><span style="font-size: 200%">Now twice as big as H1</span></h1>

I don't see any other way to do this other than by setting the body text size.

Max

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

font-size: Text resizing using percentage

Something I have found regarding the font size cascade is that, on a cross-browser basis, font sizes are not commutative (The property that A+B=B+A). Thus a setting of

<body style="font-size:.9em;">
<div style="font-size:.120%;">
does not seem to be rendered cross-browser the same as:
<body style="font-size:120%;">
<div style="font-size:.9em;">
The method that seems to work best is to set a %age based font-size in the body and em based font-sizes in all child elements. This is especially important when dealing with child %ages<100% and base font-sizes <1em.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS