Forum Moderators: not2easy
I use relative font sizes for text and I get problems when using second and third tier unordered lists. When I have set <li> to say 0.9em the bullet on the next tier will inherit the font size and display 0.8em the next tier 0.7em etc etc.
What is the best way to correct this? separate classes for each tier? wrapping the list somehow? it's one thing I have yet to find a clean solution for, opting instead to pepper large lists with a maze of classes to get control, but there must be an easy way that I can't spot.
Cheers, Limbo
In the following text page, I set the <ul> to 0.5em and the <li> to 2.0em and the list is identical to the second list with everything set to 1.0em. (Overlapping the lists and swapping z-index values shows they're the same).)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>List font-size Test</title>
<style type="text/css">
body{font-family: Verdana, Tahoma, sans-serif;}
.box{width:400px;border:1px solid #369;}/*Uncomment this to overlap the two lists and see that they are the same size*/
/* .box{position:absolute;top:100;left;0;} */
/*Uncomment this to set the re-sized list on top*/
/* .one{z-index:100;} */
/*Uncomment this to set the normal-sized list on top*/
/* .two{z-index:100;} */.one {color:red;}
.one ul{font-size:0.5em;}
.one ul li{font-size:2.0em;}.two {color:blue;}
.two ul{font-size:1.0em;}
.two ul li {font-size:1.0em;}
</style>
</head>
<body>
<div class="box one">
<p>ul=0.5em, li=2.0em</p>
<ul>
<li>Lvl 1 Text
<ul>
<li>Lvl 2 Text
<ul>
<li>Lvl 3 Text
<ul>
<li>Lvl 4 Text</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="box two">
<p>ul=1.0em, li=1.0em</p>
<ul>
<li>Lvl 1 Text
<ul>
<li>Lvl 2 Text
<ul>
<li>Lvl 3 Text
<ul>
<li>Lvl 4 Text</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
The problem might be calculating the opposite EM value. For this example, 0.5 (one half) is converse to 2.0 (double), but making the same calculation for 0.9 is somewhat trickier, and well beyond my limited math skills. ;)
cEM
Cheers, Limbo
ul {font-size:0.9em;}
ul li {font-size:1.0em;}
ul li ul {font-size:1.0em;}
If you change the font-size property in the first UL tag, but leave the UL LI and UL LI UL at 1.0em, it carries the change uniformly across the tiers. Which makes sense, since the LIs are being made 100% of the UL, then the nested ULs are being made 100% of the LIs, then the LIs in those ULs are being made 100% of that...etc, etc, ad infinitum.
cEM
Thanks cEM, tested that and seems to be good across all the browsers I have here, and such a slick solution too! This will save me many hours.
Ta, Limbo
