If my list item spans more than one line the list icon/bullet image is centered between the two line (see image attachment).

Is there a way to get the image to be inline with the first line list this:

• Here is my line, when this goes to the new line the bullet stays in the same place.

Here is my CSS:

ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 0px;
}    

li {     background: url(images/bullet.jpg) left center no-repeat;
    margin-top: 0px;
    padding-left: 12px;
    margin-left: 1px;
}

Thanking you please.

Your style rule tells the image to be in the centre vertically, so that's where it will go.

Sorry, should've spotted that.

Do you know if its possible to have it top aligned but moved down a couple of pixels?

Of course.

Simply use a pixel value for the vertical/horizontal position. You are not limited to only using the named positions.

Originally Posted by chrishirst

Of course.

Simply use a pixel value for the vertical/horizontal position. You are not limited to only using the named positions.

Don't suppose you could give me an example of what thay would look like?

Originally Posted by Joe3000

Don't suppose you could give me an example of what thay would look like?

Just like any other pixel value

2px

http://www.w3schools.com/css/pr_background-position.asp

Where do I put that though, where it doesnt move the list?

in the background rule. Instead of - "center left" use - "2px left"

Thanks a lot.