style of inner div is not overriding that of outer div

M

Mc Lauren Series

I have this CSS:

..one {
font: normal normal 100% Verdana, Arial, Sans-serif;
font-size: small;
}
..two {
font: normal normal 100% Verdana, Arial, Sans-serif;
}

which is applied on this HTML:

<body>
<div class="one">
Foo
<div class="two">
Foo
</div>
Foo
</div>
</body>

However, I see that all the three "Foo" strings appear to be of the
'small' size. I was expecting the second one to be of 100% size since
the "two" class overrides the small size of "one" class to make it
"100%" size. Is my expectation incorrect?
 
J

Jukka K. Korpela

Mc said:
.one {
font: normal normal 100% Verdana, Arial, Sans-serif;
font-size: small;
}

Oh my. Verdana. And first declaring 100%, then small. Why?
However, I see that all the three "Foo" strings appear to be of the
'small' size.

You asked for it.
I was expecting the second one to be of 100% size

It is. When you declare an element's font size as 100%, it means 100% of the
parent element's font size.
 
D

dorayme

<[email protected]
m>,
Mc Lauren Series said:
.one {
font: normal normal 100% Verdana, Arial, Sans-serif;
font-size: small;
}
.two {
font: normal normal 100% Verdana, Arial, Sans-serif;
}

which is applied on this HTML:

<body>
<div class="one">
Foo
<div class="two">
Foo
</div>
Foo
</div>
</body>

Your font-size *percentage* in class two is *of* the class one's
(the parent container's) font-size. If you were to have say, 80%
in class one and 120% in class two, you would get a bigger font
in your sandwich.

By the way, you need not have a completely separate font-size
rule for class one.

Perhaps:

..one { font: normal normal small sans-serif;}
..two {font: normal normal medium sans-serif;}

might do you?
 
N

Neredbojias

I have this CSS:

.one {
font: normal normal 100% Verdana, Arial, Sans-serif;
font-size: small;
}
.two {
font: normal normal 100% Verdana, Arial, Sans-serif;
}

which is applied on this HTML:

<body>
<div class="one">
Foo
<div class="two">
Foo
</div>
Foo
</div>
</body>

However, I see that all the three "Foo" strings appear to be of the
'small' size. I was expecting the second one to be of 100% size since
the "two" class overrides the small size of "one" class to make it
"100%" size. Is my expectation incorrect?

The second one *is* 100% of "small" which is the parent font-size.
Look at it this way: if you have a box in a box and a picture of Highly
Silasy in the inner box which is 100% the size of it's container, is
the image as big as the first box or as big as the second?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top