Grow your CSS skills. Land your dream job.

problem assigning font size value em for html element

  • # December 14, 2012 at 7:02 am

    Hi, everyone

    I’m stucked in the wierd problem. I google it but can’t find solution. Here’s the problem:

    http://jsfiddle.net/prathoven/dm4Dk/

    If px is assigned it works. I’m stuck here with curiosity. Thanx.

    # December 14, 2012 at 7:12 am

    You are encountering the fact that the size ‘em’ inherits its base size from the parent, in this instance the li.

    Thus in your example, the size is 1.8×1.8 which = 3.24? [or is it 1.8+0.8=2.6?? I always get confused]

    See: http://jsfiddle.net/tvgbW/1/

    # December 14, 2012 at 7:13 am

    The unit of measure em is calculated on the selector’s parent element. Therefore ul li is 1.8 times the base font and ul li em is 3.24 times the base element, because it’s 1.8 * 1.8 (ul li’s font-size).

    To solve this, you can either use rem, which is based on the root element (so, the html or body font-size), or you can set ul li e to 1em.

    Sorry if my explanation is a bit confusing :)

    @Paulie_D Too fast for me :D

    # December 14, 2012 at 7:19 am

    @David_Leitch No problem, of course rem is the answer but browser support is [very limited](http://caniuse.com/#search=rem “very limited”) [IE9+] at the moment AFAIK.

    # December 14, 2012 at 7:25 am

    I was thinking that rem support was a bit limited, but couldn’t remember how much so; thanks for the link :)

    Just out of interest, do you think it’s still worth the time to use rem, with em fallback, despite the limited support? i.e.:

    ul li{
    font-size: 1.2rem;
    font-size:1em;
    }

    Or should it be something to keep in mind, but wait until more widespread support?

    # December 14, 2012 at 7:29 am

    >Or should it be something to keep in mind, but wait until more widespread support?

    I think this purely because I don’t want to set two properties every time at the moment.

    However, if you wanted to future-proof then there is no reason you couldn’t use both now (of course the rem setting should be after the em setting….no?).

    Personal choice I guess.

    # December 14, 2012 at 7:31 am

    Guys, if you are actually working out the em value, is there any point to also using rem? After all, em is just as future proof as rem.

    # December 14, 2012 at 7:32 am

    Ah yes, sorry. Had meant to put them the other way round; blame it on trying watch a movie at the same time as typing :)

    Good point, @joshuanhibbert

    # December 14, 2012 at 7:36 am

    Ah…multi-tasking. :)

    # December 14, 2012 at 7:40 am

    REM with a PX fallback is how I roll for typography related sizing.

    I actually use a bunch of different measurements in stylesheets, PX for breakpoints, REM’s for font sizing and percentages for elements.

    # December 14, 2012 at 10:00 pm

    Thanx all for helping me figuring it out.
    So the buttom line is font size of for < .em> here is double of parent of li.

    I think i won’t use rem because its not widely supported and moreover to save few bytes!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".