adjust list style image position

Question

is there a way to adjust the position of list-style-image ? when i use padding for list items the image will stay at its position and wont move with padding...

Answer 1

I normally hide the list-style-type and use a background image, which is moveable

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

The "7px 7px" is what aligns the background image inside the element and is also relative to the padding.

Answer 2

Not really. The padding that you're applying is (likely) being applied to the list item, so will only affect the actual content within the list item. You might also be looking to add styling to the parent container (ul) to position your bulleted list items. It'd help if you posted some sample code. This A List Apart article has a good starting reference.

However, if you're interested, and depending on the effect you're looking for, you can try and use a combination of background and padding styles to do something that looks similar.

e.g.

li
{
  background: url(images/bullet.gif) no-repeat left top;
  padding: 3px 0px 3px 10px;
}

Answer 3

I think what you really want to do is add the padding (you are currently adding to the <li>) to the <ul> tag and then the bullet points will move with the text of the <li>.

There is also the list-style-position you could look into. It affects how the lines wrap around the bullet images.