Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > style of inner div is not overriding that of outer div

Reply
Thread Tools

style of inner div is not overriding that of outer div

 
 
Mc Lauren Series
Guest
Posts: n/a
 
      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?
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      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/

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-12-2010
In article
<(E-Mail Removed)
m>,
Mc Lauren Series <(E-Mail Removed)> 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
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      02-13-2010
On 12 Feb 2010, Mc Lauren Series <(E-Mail Removed)> 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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


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



Advertisments