Welcome to WebmasterWorld Guest from 54.221.49.52

Forum Moderators: not2easy

Message Too Old, No Replies

Nested ul's

Relative font size is smaller

     

MWpro

1:32 am on May 11, 2003 (gmt 0)

10+ Year Member



Say I have this:

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.

papabaer

3:15 am on May 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That alone should not cause the effect you experience. What browser(s) did you witness this result with? What other styles have you written that might be suspect?

MWpro

3:38 am on May 11, 2003 (gmt 0)

10+ Year Member



ul, ol {
font-size: .8em;
color: #000000;
font-family: arial, verdana;
}

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?

tedster

4:23 am on May 11, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The second UL is a child of the first. Shouldn't that mean that its font size is .8 of the parent element's em size? That is .8x.8=.64 -- it's what I would have expected.

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.

SuzyUK

12:25 pm on May 11, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Yes font-size inheritance is happening here:

<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>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month