List style image issues

Hey guys I have just a created a menu which based on list item and I used list-style-image When I check out with ie6 it dosent seem align to link so I would appreciate it if you guys could help me

here is picture

 

I really do hate to say this, but list-style-image is inconsistent across browsers; you're better off using padding and a background image instead.

 

Dan's right you can never get the darn lists to work across the major browsers, do you really need them to be exact? If not then just make sure it has a large left padding.

If you want things perfect then use a table, floated images or backgrounds

 

Thank you both very much I used background and it worked

 

Won't putting a left margin inside the text tag only effect the text of the list (something I don't want to mess up again)?

Isn't there some image block element that I can put inside the ul.services tag that can define my image's size so it won't get cut off?

It's only the bullet image itself that gets cut off, not the text.

Or am I simply not uderstanding what the tags mean?

 

Use min-height (or height in IE 6 and earlier) to give the element a minimum height. Or better yet, use height and line-height (make sure they match).

Oh, and margins won't work with background list images. It's all about the box model.

 

I've been looking at this thing for quite some time now and although I am still a beginner I believe everything is correct but it obviously isn't. And I'm beginning to get nervous.
I want to display an arrow in my list. The arrow is placed in the main folder of the site where all the other files are. Here is the code I'm using:

<ul class="left">
<li>Item One</li>
<li>Item Two</li>
</ul>
ul.left
{
color:#3779c4;
font-size:10pt;
list-style-image:url('arrow.jpg');
}


and it is not displayed.

 

With no other code to see, I assume that image is way off to the left due to the ul's default margins in some browsers.

Dan's solution was use a background image instead:

<ul class="left">
<li>Item One</li>
<li>Item Two</li>
</ul>

Who do you want to have the arrow? The li of course.

.left li {
color: #3779c4;
font-size: 10pt;
padding-left: the width of the image plus a bit more;
background: #color url(arrow.jpg) 0 50% no-repeat;
}

It the image still doesn't appear, make sure you can actually see the image at all and that your path is correct. The above path (arrow.jpg) assumes the image is in the same folder as your css file (and if your css file is in the same folder as your html file, then the image should also be seen at yourdomain.com/arrow.jpg).

How often have I not seen an image, and when I try to access it directly, I get a 403 Forbidden (because of the permissions on the image before I uploaded it!).