Adjust list style image position?
Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item.
Using a combination of background and padding styles can create something that looks similar e.g.
li {
background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
You might be looking to add styling to the parent list container (ul) to position your bulleted list items, this A List Apart article has a good starting reference.
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.
A possible solution to this question that wasn't mentioned yet is the following:
li {
position: relative;
list-style-type: none;
}
li:before {
content: "";
position: absolute;
top: 8px;
left: -16px;
width: 8px;
height: 8px;
background-image: url('your-bullet.png');
}
You can now use the top/left of the li:before to position the new bullet. Note that the width and height of the li:before need to be the same dimensions as the background image you choose. This works in Internet Explorer 8 and up.
I had the same problem, but i could not use the background option (and didn't want to use multiple backgrounds) so i thought of another solution
this is an example for a menu that has a square like indicator for the active/current menu item (the default list style is set to none in another rule)
nav ul li.active>a:before{
content: "■";
position: absolute;
top: -22px;
left: 55px;
font-size: 33px;
}
it creates a square by using a square character with the ":before" pseudo class and it is freely positionable by using absolute positioning.