Remove the ' ' surrounding the file location.

it wouldn't work either. i just tried it.

Depending on where you want the image to appear, you might also want to position the arrow, e.g.

list-style-image:url(arrow.jpg) no-repeat 0 0;
or
list-style-image:url(arrow.jpg) no-repeat 50% right;
etc.

instead of "list-style-image," make it "background:"

try:

.left ul

instead of: ul.left

in your style sheet

Is arrow.jpg in the same directory as your web page?

and remove the ''

Hi panchosansa, your original code is OK and works - by itself (so long as arrow.jpg isn't too big or something?!)

Does this display OK?

<img src="arrow.jpg" border="2">

Remove the ' ' surrounding the file location.

Yes, the quotes are unnecessary in this case (since you have no spaces in the filename)... but they are still perfectly valid. You can use either '...' (single quotes) or "..." (double quotes) to surround your filename, and you would need to if the filename contained spaces (IE works with/without quotes, even with spaces in the filename, but FF doesn't)

[w3.org...]

You say the arrow doesn't appear... do you get the usual circular 'bullet', or nothing at all?! If you get the usual list 'bullet' then your arrow.jpg file can simply not be found.

padding/margins... Do you have any other CSS that affects lists? If the margin/padding on the ul element (particulary the left side) has been set to 0 (zero) you may not see the image, as it is usually rendered on the 'outside of the box' (reason for margin), so may now be hidden. Try giving it a margin and padding:

ul.left { 
... 
margin:20px; 
padding:20px; 
}

Thanks for all of your responses. I still can't make it work despite our efforts but I think that I know what the problem is now. I tried the <img src=...> and it is displayed but strangely enough as a huge image (although in paint, and the windows preview the file is 497 bytes and dimensions 9x9px)and this must be the problem. I am trying to figure out why the image is displayed like this now but I still can't. If anyone has any suggestions, please tell.
Thank you for your help.
Kindest regards

I really can't understand what is going on. I've tried setting the width and height values of the image but it doesn't change its dimensions. It should be 9x9 pixels and it displays 50x50 or something- very big and pixelated.

I found out why the image is displayed like this: I've specified a height:100 for another image and it has automatically assigned it to this one also because in the specifications I didn't use an identifier.
I can't believe I'm that stupid :-).
BUT... Eventhough the image is displayed normally now, it still doesn't appear on the list. I've used the padding and margin suggested, and the .left ul, but they didn't help either. If anyone could help me, I would be more than grateful.

I tried the <img src=...> and it is displayed but strangely enough as a huge image (although in paint, and the windows preview the file is 497 bytes and dimensions 9x9px)and this must be the problem.

If it displays huge in the <img> tag, but is small (and the correct size/filesize) in Windows, then it's hard to imagine it is the same file?! (For a 9x9px image, 497 bytes sounds about right.)

If you try to display a large image as the list-style-image, then the rows in the list should be spaced out (are they?), to allow room for the big image (although the image will be off to the left, and possibly out of sight).

(Ok, I think you've solved the image size problem now...)

I've specified a height:100 for another image and it has automatically assigned it to this one also because in the specifications I didn't use an identifier.

Is this in 'Paint' - when you created the image?

--------

Have you tried testing your list HTML/CSS on a separate page all by itself...? Does it still not work?

no, the thing is I was asked to duplicate a layout and the guys from the company sent me a link to an image of the title page and from there I cropped the image in Photoshop and saved it. And as I said it displays fine now, but not in the list.
(i'll try your suggestions about the separate page now)

YES, it does display on a separate page all by itself exactly the way I want it to. This is unbelievable.

I fixed it! I gave the li a class name and put it in the stylesheet and now somehow the arrow are displayed.
I would like to thank everyone for the support and help. I really appreciate it because I am still a beginner and I find every advice very useful. Thank you very much

Kindest regards,
Valentin

To clear up confusion:

Depending on where you want the image to appear, you might also want to position the arrow, e.g.

list-style-image:url(arrow.jpg) no-repeat 0 0;

This is wrong. You cannot position a

list-style-image

other than "inside" or "outside", as per

list-style-position

specification.

instead of "list-style-image," make it "background:"

This is indicating putting a background image to the

li

itself, so that you can get greater "bullet" control.

This is a good method.

try:

.left ul

instead of: ul.left

The

ul

has a class of

left

on it, so

ul.left

is correct rule syntax.

Remove the ' ' surrounding the file location.

You don't need to remove them. But I would check that the image is residing in the path you're specifying.

padding/margins... Do you have any other CSS that affects lists?

Usually a good start when using

list-style

.

I fixed it! I gave the li a class name and put it in the stylesheet and now somehow the arrow are displayed.

This sounds like a specificity problem - overriding rules creating havoc. Because it sounded like you haven't written the stylesheet yourself/entirely yourself, you're unsure of what else is there with higher specificity than your rule.

If you're happy leaving it that way (with an added class on every

li

, then sure.

If you want to investigate, search for every instance of

ul

being declared in a rule in your stylesheet/all stylesheets/all embedded styles/inline styles.

:)

Thank you for your comments and remarks, Setek.
I have really looked into it and noticed quite a few places where things could be optimized.
The thing that was causing me trouble was that I have specified width and height for another image in my css and it was overriding for this one also making it a very big one and therefore not displaying it instead of the bullets.
I had a bunch of other issues with this later on and now I'm almost done and more or less satisfied.

@everyone
Thank you for your time and advice.

P.S.
@setek
I've done the whole thing myself, it's just that this is like the second layout I'm doing and I'm still quite confused. :-)