RE: bullet list w/CSS problem
by "Ben Chang" <ben.chang(at)bts.gov>
|
| Date: |
Wed, 20 Mar 2002 16:28:06 -0500 |
| To: |
<ben.chang(at)bts.gov>,
<hwg-techniques(at)hwg.org>,
<jami(at)jamisniche.com>,
<dbarne20(at)visteon.com> |
| |
todo: View
Thread,
Original
|
|
Hi Jami,
Thanks for the reply.
I did tried the following methods hundreds of times.
1. In the first example below, different combination works on different =
browsers.
For example, in IE I may have UL 90%, UL UL 100%, UL UL UL 100%; in =
Netscape 4x version I may have UL 90%, UL UL 100%, UL UL UL 90%....so on.
It all depand on the browsers, in other words, I will need to have at =
least 3 stylesheets to cover this part. (this is where we don't want to go =
..)
>>>>>>>>>>>>>>>>>>>>
ul { list-style-type: disc; font-size: 90% } /* first=20
child level */ =20
ul ul { list-style-type: circle; font-size: 100%} /* second=20
child level */
ul ul ul { list-style-type: square; font-size: 110%} /* third=20
>>>>>>>>>>>>>>>>>>>
2. The second example is what we are currently using.
We have a class for this font size purpose.
ex.
.fontsize {font-size:90%}
<ul class=3D"fontsize">
......<ul>.....
..............</ul>...
</ul>
thanks,
ben
>>> "Jami Moore" <jami(at)jamisniche.com> 03/20/02 02:25PM >>>
Ben,
this works:
ul { list-style-type: disc; font-size: 90% } /* first=20
child level */ =20
ul ul { list-style-type: circle; font-size: 100%} /* second=20
child level */
ul ul ul { list-style-type: square; font-size: 110%} /* third=20
child level */
If that won't work for you, also try <UL style=3D"font-size: 90%"> in =
the=20
first UL only. I tested both of these methods, and they seemed to work=20
fine (no cascading). If you specify the same font-size inline for the=20
following two UL's, they will get smaller, so that is why I say only=20
apply it to the first one.
HTH,
Jami
> Hi David,
>=20
> I can not use fix font size, i.e. 12pt, 12px....etc.
> We need to use %.
>=20
>=20
> thanks,
>=20
> ben
>=20
>=20
> >>> "Barnes, David (D.)" <dbarne20(at)visteon.com> 03/20/02 11:09AM >>>
> Can you use something other than the percentage for your size, i.e.=20
if you
> put font size 15px in the ul class then the size would remain the same
> throughout all the nested lists. =20
>=20
> hth,
>=20
> Dave Barnes=20
>=20
> Body, Safety, and Security Lab=20
> Room LS-115C=20
> 313-755-1360=20
> dbarne20(at)visteon.com =20
>=20
>=20
>=20
> -----Original Message-----
> From: Ben Chang [mailto:ben.chang(at)bts.gov]=20
> Sent: Wednesday, March 20, 2002 10:03 AM
> To: hwg-techniques(at)hwg.org=20
> Subject: bullet list w/CSS problem
>=20
>=20
> HI,
>=20
> I have tried to figure this out for a quiet some time...but still no=20
luck.
>=20
> I have a problem putting font size 90% in the HTML bullet lists by=20
using
> CSS.
> I can not put font size 90% in the <BODY> selector in CSS because of=20
some
> other reasons; therefore, I need to create=20
> another class for <UL> and <OL> to use (ex. <UL=20
class=3D"fontsize90%">). =20
> If I put font size 90% in the <UL> and <OL> selector in CSS, the=20
child <UL>
> and <OL> will be cascaded (the font size will become smaller and=20
smaller). =20
>=20
> Does anyone know any other way to do this quick and easy? without=20
putting a
> class in the <UL> and <OL> tags?
> I have enclosed an example at the bottom of the message.
>=20
> Thanks,
>=20
>=20
> Benjamin
>=20
>=20
> Example code:
> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
> <html>
> <head>
> <title>CSS List testing</title>
> <style type=3D"text/css">
> /* can not put 'font-size: 90%;' in the body because of other
> reasons */ =20
> ul { list-style-type: disc; } /* can not put 'font-size:=20
90%;'
> here, will casue cascade effects */ =20
> ul ul { list-style-type: circle; } /* second child level */
> ul ul ul { list-style-type: square; } /* third child level */
> /* only way to do it now is to create a class for UL and OL.
> ex. .fontsize { font-size: 90%; } */ =20
> </style>
> </head>
>=20
> <body>
>=20
> <ul>
> <li>Food
> <ul>
> <li>TV Dinner</li>
> <li>Junk Food
> <ul>
> <li>Potato Chips w/ salsa</li>
> <li>Twinke</li>
> </ul>
> </li>
> </ul>
> </li>
> <li>Soup</li>
> <li>Beer</li>
> </ul>
>=20
> </body>
> </html>
>=20
>=20
>=20
>=20
--
Jami Moore
http://www.jamisniche.com/
HWG hwg-techniques mailing list archives,
maintained by Webmasters @ IWA