style of inner div is not overriding that of outer div

Discussion in 'HTML' started by Mc Lauren Series, Feb 12, 2010.

  1. 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?
    Mc Lauren Series, Feb 12, 2010
    #1
    1. Advertising

  2. 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/
    Jukka K. Korpela, Feb 12, 2010
    #2
    1. Advertising

  3. Mc Lauren Series

    dorayme Guest

    In article
    <
    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
    dorayme, Feb 12, 2010
    #3
  4. Mc Lauren Series

    Neredbojias Guest

    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/
    Neredbojias, Feb 13, 2010
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. lonelyplanet999

    Access outer / inner class variables query

    lonelyplanet999, Nov 11, 2003, in forum: Java
    Replies:
    3
    Views:
    5,296
    lonelyplanet999
    Nov 18, 2003
  2. lonelyplanet999
    Replies:
    1
    Views:
    2,211
    VisionSet
    Nov 13, 2003
  3. phl
    Replies:
    1
    Views:
    4,343
    Martin Jay
    Jun 8, 2006
  4. Replies:
    1
    Views:
    305
  5. Tom Y
    Replies:
    1
    Views:
    222
    Elegie
    Jul 12, 2011
Loading...

Share This Page