Forum Moderators: not2easy
ul {
font-size: .8em;
}
<ul>
<li>One</li>
<li>Two
<ul>
<li>Two.A</li>
<li>Two.B</li>
</ul>
</li>
</ul>
The first one is .8em, but the font size inside of the second ul gets smaller (.6em I believe). Is there anyway to have .8em font size for both of them? I've searched with different phrases but cannot find anything on this.
Using IE6 and Opera 7.0 to test it. Even when I remove any parent divs and everything else and only have this style and the lists on the page, it still does it... Weird thing is when you do an em greater than 1, the second ul will actually become bigger than the first ul... Any ideas?
At any rate, no matter what "should" happen, in practice I also see the compounding effect when font-size set to less or more than 1em. You can stop that compounding by including this CSS rule:
ul ul {
font-size:inherit;
}
As an aside, many web developers don't know that the visual size of 1 em is really decided by the font's designer. Every font contains a rule for how big an "em box" should be - the size of a character with no ascenders or descenders.
Many fonts have very small em boxes, and if you use these fonts, they appear very small compared to what you would expect. It's just that the common fonts we use on the web have relatively "standard" em boxes, so the issue doesn't come up ... for now.
<ul>
<li>One</li>
<li>Two
<ul>
<li>Two.A</li>
<li>Two.B</li>
</ul>
</li>
</ul>
the second <ul> is a child of the first so it will, as tedster already pointed out, become 0.8em of the 0.8em already set on its parent <ul>
btw if you where to nest another list it will beome even smaller 0.8em of the 0.8em of the 0.8em
Thanks tedster for the ul ul {font-size: inherit;}, but it doesn't work in IE (surprise, surprise!)
some other solutions:
1. can the font-size be set on the parent div?
or
2. if 0.8em is the same size as the rest of the page it would only be necessary to set the font size on <body> tag..
or
3. if your aim is get the lists to appear smaller than the rest of your page text then you could either wrap them in a div and specify the font-size on it, or set up a class name and give the parent ul this class name.
e.g.
ul.smaller {font-size: 0.8em;}
<ul class="smaller">
<li>One</li>
<li>Two
<ul>
<li>Two.A</li>
<li>Two.B</li>
</ul>
</li>
</ul>
Suzy
<added> see this thread [webmasterworld.com] for a similar discussion</added>
