list without using <li>

<li> tags aren't working with small text

[evisions]

I am working on a project where I have a need to use a very small text. I've discovered that the browser does not shrink an <li> bullet to match the point size of the font being used. Thus I am using &#8226; to create my bullets, but this lacks any formatting. Some of my lines are long and when they wrap I need them to align properly as follows (I've used _ to represent a space as this editor isn't allowing double spaces):

* this is my text which
__wraps to the next line
__and needs to line up

I don't want to use tables to do this as the data is all stored in a database and it will make a mess of my data. I've been messing with using <dl><dd> and style sheets (text-indent:-1em on the <dd>), but have found the <dl> adds too much left margin.

So, I am looking for a way to either shrink the size of <li> or reduce the left margin added to a <dl><dd> combo.

[tedster]

You might consider a list-style-image [w3schools.com], where you create a bullet image to be exactly what you want.

[evisions]

Thank you. This essentially does the trick. One issue remains however. Is it possible to reduce the space between the bullet and the text? By default there is basically 2-3x the space I want there.

[pageoneresults]

Is it possible to reduce the space between the bullet and the text?

Yup, view the site using Opera! ;)

I too have always wondered if there were some way to control that space. Opera doesn't put enough space and IE puts too much space. How about a space between attribute?

li{space-between-bullet-text:2px;}

[seindal]

There is no way in CSS1. CSS2 gives better control over the placement of the bullet.

René

[Longhaired Genius]

The list properties...do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box.

[w3.org...]

[seindal]

There is no way in CSS1. CSS2 gives better control over the placement of the bullet.

My mistake. Support for generalised markers and better control over placement of markers are in the drafts of CSS3.

René.

[evisions]

Yes, I see it is much different in opera, it actually resizes the bullet to match the font size as it should and the spacing is nice for the small font size. Sad that IE doesn't do that and we must code for IE. Also sad that Opera places the image bullet aligned to the bottom of the text, not the center, so the better solution on IE doesn't work as well in Opera. Is there anyway to fix that? Mozilla does something similar and it doesn't look as good....

[pageoneresults]

Best alternative is to take tedster's advice and use list-style-image. You still have the space to deal with, but all the other issues become non existent. Another one that comes up is that you cannot fix the size of the default bullet. Even though the rest of your fonts are fixed, bullet's are excluded from this.

Ever see what those default bullets look like when you browse using a larger font size in your browser and the site you are viewing uses fixed font sizes? Eek, I've see some that look horrid!