homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Nested ul's
Relative font size is smaller
MWpro




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

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




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

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




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

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




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

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




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved