text is wrapping under bullet in css list

Question

I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!

Answer 1

You could try

ul {
  list-style-position: outside;
}

but I would personally use a background image and some padding, something like:

li {
    list-style: none;
    background: transparent url(your/icon.png) no-repeat left center;
    padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}

See this page for more details: http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html