How do I control the styling of an html unordered list?

Question

Who thought that styling a list of links could be so troublesome!

• First issue I would like to use an arbitrary char as the bullet. I am sure now that this is impossible but maybe you know different?

• In any case I would like to control the distance between the bullet and the contents of the <li>.

• I would like to control the height of the bullet (so it stays centered to the text in the <li> irrespective of fonts/sizes etc).

• I would like the bullet to stay within the <div> that contains the <ul> rather than hang out the side.

• I would like long items in a <li> to wrap around leaving the bullet clear of the text.

I want it to work in all browsers above IE6. with as little special pleading for IE's weirdnesses as possible! (this means I cannot use :before)

I am tempted to use <span> and </br> rather than lists!

Answer 1

For an unordered list, you will have to make a graphic to display an arbitrary character. The other available values are:

list-style-type: disc | circle | square | none

To make the bullet stay within the text instead of hanging out, use

list-style-position: inside

??? Not sure what you mean about "wrap around" in your last point.

Answer 2

First of all, make sure you use a remove the paddings/margins of the list element using CSS so you will have a clean slate for all browsers. Then, if you always want the bullet image to be centered, use an image.

 ul{
   margin: 0;
   padding: 0;
}

ul li{
  padding: 0 0 0 20px; /*so text does not appear on top of bullet */
  background: url(error.gif) no-repeat 0 50%; /* this will set the bullet to appear in the middle */
}

Answer 3

http://css.maxdesign.com.au/listamatic/