Getting rid of the margin between list style type and text

Answer 1

You can hack around to get it working, but maybe you might want to consider removing the list-styles and use a background on your <li> instead, like that you'll have total control over it.

A good reference about that: http://www.alistapart.com/articles/taminglists/

W3Schools : http://www.w3schools.com/Css/css_list.asp

Answer 2

If you want to remove the space between text and bullet, you got to change the HTML-code a little bit:

<ul>
  <li><span>first item</span></li>
  <li><span>second item</span></li>
</ul>

By giving the li a relative position and the span an absolute position, you can move the span to the left:

li {
    position: relative;
}

li span {
    position: absolute;
    left: 0;
}

Answer 3

The only reliable cross-browser way to achieve this is by dropping the bullets altogether and using background images on your lis instead. This works in all major browsers (even IE5 and Netscape 7.1) and does not require any changes to the HTML itself. See Listamatic for an excellent guide.