CSS is driving me nuts...

[elum.chaitu]

Been at this one for so long that I'm not seeing the wood for the trees. You know what it's like...

 

Anyway, here's the problem... I've got a nested list on my site navigation. The parent list font size is set to 1.2em (12px). I want the sub-list to be 1em (10px). The code, I thought, should look something like this:

Code:

#sitenav ul li ul li{font-size:1em;}

I've tried every combination I can think of and just can't get the font to the size I want! Could someone please put me out of my misery?!?!

 

And yes, I am embarrassed to be asking such an easy question!

[Wickham]

Using ems the size is adjusted cumulatively, so if the parent is 1.2em and the child is 2em the size displayed will be 1.2*2.0 = 2.4em.

 

If you want the child to be look like 1 em visually you will have to code it as 0.833em so that 1.2*0.833 = 1em. I believe that decimal places do get calculated but more than one decimal place won't show any difference on the screen.

 

If you later use the same list without a parent font size in em then you will have to use another class with 1.0em.

 

So using ems can need more attention to which is a child of which parent.

Edited September 4, 2010 by Wickham