Changing <li> bullet size?

Drile_s_Friend · January 23, 2005, 6:49pm

Is there a way to the size of the bullets without using a resized image? I can’t find anything in the styles of HTML attributes. I want to use the squares but my text is almost as small the squares themselves.

C

maxor · January 23, 2005, 6:54pm

I don’t believe so.

zcorpan · January 23, 2005, 7:08pm

You could do something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>
<style type="text/css">
ul {list-style-type: square; font-size: 50%; line-height: 2;}
li span {font-size: 200%; vertical-align: middle;}
</style>
<ul>
  <li><span>Foo</span>
  <li><span>Bar</span>
</ul>

Drile_s_Friend · January 23, 2005, 7:34pm

zcorpan:

You could do something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>
<style type="text/css">
ul {list-style-type: square; font-size: 50%; line-height: 2;}
li span {font-size: 200%; vertical-align: middle;}
</style>
<ul>
  <li><span>Foo</span>
  <li><span>Bar</span>
</ul>

I’m not getting anything from that. They are smaller in IE, but not in FireFox. I guess I’ll just use images. Thanks though.

C

zcorpan · January 23, 2005, 8:03pm

Hmm… I actually tried it with (only) Firefox.

Although, then I tried it with Opera aswell, and the font size was 200%… Perhaps it didn’t work that well.