Image Between Horizontal Menu Text

[slloyd]

I have a horizontal text menu that I'd like to add a small image to, but I can't figure out where to put the tag so it will display after each text link in the menu. Can someone guide me? TIA!

For example, I want it to look like this:

Home | About | Page | Page | Page

but the | I want to be an image.

[tsw]

put the image as a bg for the "a" element with css

something like

div#menu a {
background: transparent url('path/to/file.gif') no-repeat 0 0;
}

[slloyd]

Thanks. Actually, I have that in the stylesheet, but what I noticed is I also had a in there, which was making it NOT appear. I need to use that for the first menu item (so the image doesn't appear before the first menu item), but I'm not sure where to put it. Any ideas?

[slloyd]

Anyone have any ideas?

I've since removed the image since I couldn't figure out how to remove the image from appearing in front of the first menu item.

[Dr.CSS]

Do you have a link so we can look at some code?...

[slloyd]

Sure. Here it is:

http://schoolrockinc.com

Remember, I took out the image code in the CSS. I just need to know how to make the image NOT display before the first menu item or after the last item.

Thanks!

[Dr.CSS]

If you make a menu template out of the one you use now and put id="a{$node->id}"  in the li or a call it will give you a diff. id for each menu item then you can use CSS to input the image...

You need the a in front of the id call because it will render the id as a number and you cant use numbers in CSS...