11

What is the most efficient way to make all nested list items the same size while using an em that is not equal to 1. For example, I want all li's in this list to be sized to 0.85em of the ul's parent. Do I have to create a separate class for each "level" of depth?

<html>
<head>
    <style type="text/css">
        li
        {
            font-size: 0.85em;
        }
    </style>
</head>
<body>
    <ul>
        <li>Level 1 item
            <ul>
                <li>Level 2 item
                    <ul>
                        <li>Level 3 item</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

7 Answers 7

9

Use the "rem" unit for font sizing. This fixes the font-inheritance problem.

Johnathan Snook has a great article on this.

3
  • Yes, it's indeed the best method. I can add only you should use fall-back value using pixels. Like this: li {font-size: 8.5px; font-size: 0.85em;} And you should set base font size not on body element as usually but on html.
    – Mike Eshva
    Oct 29, 2011 at 2:49
  • 1
    @MikeEshva: your css example should be {font-size: 8.5px; font-size: 0.85rem;}
    – chotchki
    Oct 29, 2011 at 18:33
  • Note that "rem" is only available on IE9+
    – Travis
    Jun 4, 2014 at 14:00
7

Should work.

li li {font-size: 100%;}
3
  • 1
    It does, but it's not the most efficient way.
    – Bobby Jack
    Jul 23, 2009 at 20:45
  • @Bobby, why is it not the most efficient way?
    – You
    Jul 30, 2009 at 22:27
  • Without adding extra markup to your page this is the easiest way.
    – Matt
    Jul 31, 2009 at 16:17
0

My recommendation would be to give the first <ul> an id or class, and set the font-size there.

0

(This answer assumes you want all li-elements the same size (you say both that you want the the same size, and different size in the question))

Font-size cascades, so if you just set it on the outer element (say a wrapper div or something), everything inside it will get one step smaller like (I think) you want to.

<div id="navigation">
    <ul>
        <li>...</li>
        <li>
        <ul><li>...</li><li>...</li></ul>
        </li>
    </ul>
</div>

#navigation { font-size: 0.85em; }
6
  • The example above works as it should though. Even in IE6, that doesn't support the child selector. Jul 23, 2009 at 20:22
  • True - I was working with the HTML he gave us. He didn't specify browser compatibility, so I'm assuming he wants something that adheres to the CSS2.1 spec.
    – Bobby Jack
    Jul 23, 2009 at 20:34
  • Where in the question does he say that he wants them to be different sizes?
    – Bobby Jack
    Jul 23, 2009 at 20:46
  • "make all nested list items the same size" vs. "all li's in this list to be sized to 0.85em of the ul's parent". I'm leaning towards the first, but I can't be sure, and for some reason people are downvoting my answer, so I'm just trying to clarify. Jul 23, 2009 at 20:51
  • Fair enough; I've un-downvoted your answer because this seems like a genuine misunderstanding, and your answer does work. But I think it's quite clear - "make all nested list items the same size" means, I assume, "... as each other". The other quote simply states that they should ALL be the computed value of 0.85em of the base font size - there's no inconsistency that I can see.
    – Bobby Jack
    Jul 23, 2009 at 21:04
0

I agree with Emil, and would vote him up on this if I had enough rep points (n00b here). I would use a class like he mentions in his first point, so its re-usable in the same document. If you want cross browser and are using the current css spec then I cant suggest a better real world example..... roll on css 3 and the death of IE6 !

1
  • Its how I would do it, and I think it was unfair to mark you down for actually being right and giving good advice
    – Crayonz
    Jul 24, 2009 at 13:48
-1

I want all li's in this list to be sized to 0.85em of the ul's parent

body > ul { font-size: 0.85em; }

would do that

0
-1
li { font-size: 0.85em; }
li li { font-size: 1em; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.