It is not a very difficult task but it is bit tricky to set equal distance between your custom image bullet and text in an unordered list. Here I am going to explain this procedure step by step using the css.

1. Create an unordered list and enclose this list inside the div tags.

2. Set the id of div tag as “test” (you can choose any name as you want).

3. Create list items. Now it should looks like this:

<div id=”test”>
<ul>
<li>First item in unordered list</li>
<li>Second item in unordered list</li>
</ul>
</div>

Now we have to move to CSS

4. Create an id named as “test” and set width and background-color properties as you want.

#test {
width:250px;
background-color:#66CC99;
}

5. Set properties for ul tag: set margin and padding both equal to 0.

#test ul {
margin:0;
padding:0;
}

6. Now we will set the properties for list items.

Choose image for your bullet.
Set list-style-position to outside.
Set margin-left as 30px. (You can choose any value as per your requirements)
Now by setting the value of padding-left, you can increase or decrease the distance between your custom bullet and text.

#test li {
list-style-image:url(bullet.gif);
list-style-position:outside;
margin-left:25px;
padding-left:4px;
}

Enjoy! I have tested this code using internet explorer 7 and Firefox. If you have any difficulty write me.