CSS is driving me nuts...
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!
Share: 
Hi Gary,
I think I know what you need to do, but can you post the list's code and any related styles so I can make sure (so that I don't end up confusing matters!)? In particular, wondering what #sitenav applies to - the parent or the sub list.
James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share:
Hi James,
#sitenav is the parent. Initial body font size is set to 62.5% (10px) then increased to 1.2em (12px) using:
| Code: |
| #sitenav ul{font-size:1.2em} |
No problems with this. The parent list is then styled thus:
| Code: |
| #sitenav ul {
list-style-type:none; margin-top:-10px; } #sitenav ul li { margin-bottom:10px; border-top:1px solid #191970; border-bottom:1px solid #191970; padding:5px } |
Again, no problems. The sub-list is styled thus:
| Code: |
| #sitenav li ul {
background:#fff; margin:5px 0 0; padding:0; } #sitenav li ul li { border:none; margin:0 0 5px 15px; padding:0; } #sitenav li ul a { font-weight:400 } |
Again, no problems. But, no matter what I do, or what combination I use, I just get the sub-list link text set to 1em (10px).
Any pointers gratefully accepted as I'm tearing out what little hair I have left!
Share:
ems are relative so I think your sublist is inheriting the 1.2em from the parent list, and setting the sublist size as 1em effectively just keeps it at the same size as its parent. So you might need to give it a smaller size to compensate (something like 0.83em should be about right).
Might also be worth giving the sublist its own id?
James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share:
James,
You're right...inheritance is the problem - how could I not see it!
Working on it. Cheers!
Share:
ems suck. Why more people don't use x-small, small etc... is beyond me.Johan De Silva / Portfolio
Share:
Johan...never even thought of that approach - cheers!
Share:
| Johan007 wrote: |
| ems suck. Why more people don't use x-small, small etc... is beyond me. |
Another difference is em lets you choose the exact amount. You can do 0.83em as in your example. But you can't do not-quite-as-small-as-smaller; you are limited to a handful of offsets. These won't correlate to exact pixels at times, so you'll get sub-pixel positioning differences within the page and between browsers.
(EDIT) Didn't realise this was an old thread when I replied. But it is one I would have replied to if I'd seen it at the time!
Share: