Can I do Inline Images inside <li> tags?

I’ve placed images within <li> tags in an unordered list. I’ve set up the CSS code to display:inline for these li tags. However it’s not working most of the time.

I’m getting different results in Firefox, Safari and Chrome for mac. It displays as a row of images in FF but in Safari and Chrome, the <li> tags are stacked one after the other.

Any ideas as to why this is? You can view it here:
http://estevancarlos.com/?tag=nails

div id=“inline”
the css
#inline ul li { display: inline; }

That’s actually what I had originally. I got rid of the UL and LI now.

However I have a follow up question. I have some HTML characters in between the images at the top “NEWS FAQ CONTACT”. Those characters are not appearing although you can see it in the code. The characters are

&nbsp; &#47;

.

Any suggestions?

 ⁄ 

css also needs (a if its a link) (no a if not a link)

#inline ul li a
{
background-image: url(photos/linkbackground.jpg);
background-repeat: no-repeat;
}