Text Alignment on second line of Bullet point

Hi,

I am creating a site that uses quite a lot of bullet points in various areas of the design, such as content and navigation.

I have designed my own bullet image, which is applied through my stylesheet.

Is there a way to get the second (and subsequent) lines of text all to align together when using bullet points.

An example is below

- Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

This is what I currently have, but I want all the lines of text to be aligned with the first "B" on the first line.

Thanks for your time, I hope I have explained myself correctly!

Adrian

Hi Geoff,

Thanks for you reply. Unfortunately this is not working. I have applied a padding so that the text is an acceptable distance from the bullet image.

When I apply your snippet of code, the text padding seems to be overridden and the text overlaps the image.

The CSS I am using is below...

#content li {
background: URL(images/bullet.gif) no-repeat 5px 5px;
padding: 2px 0 2px 5px;
list-style-position:outside;
}

Thanks once again for your time

Adrian.