style of inner div is not overriding that of outer div

02-12-2010

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?

02-12-2010

Mc Lauren Series wrote:

> .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.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

02-12-2010

In article
<1f560441-4b57-4c6c-bc6d-
m>,
Mc Lauren Series <> wrote:

> .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?

--
dorayme

02-13-2010

On 12 Feb 2010, Mc Lauren Series <> wrote:

> 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?

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
problem in running a basic code in python 3.3.0 that includes HTML file	Satabdi Mukherjee	Python	1	04-04-2013 07:48 PM
FF 3.6 vs IE7 -- clicking on inner DIV causing outer DIV onBlur tofire in FF not in IE	Tom Y	Javascript	1	07-12-2011 08:36 AM
Resize inner DIV to fill up outer DIVs height in IE 6	ckirchho@directmedia.de	Javascript	1	08-14-2007 11:06 AM
row bottom border in inner table not matching up with row border in outer table	phl	HTML	1	06-08-2006 03:43 PM
Access outer / inner class variables query	lonelyplanet999	Java	3	11-18-2003 07:16 PM