Lists and Custom Images in CSS

[paolodina]

Good Morning, it's only since few days that i use style sheets as a working tool, so, excuse me for the "poor content" question.

Well, i need to generate an horizontal menu, where each element is prefixed by an image.
So i thought to approach the problem in this way:

....
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">and so on</a></li>
</ul>
....

Here is the attached stylesheet:

li {
display: inline;
list-style-image: url(images/blue.gif);
margin: 0px 20px; 0px; 20px;
}

Now: why 'display: inline' applied to li makes the list marker(thus, the image blue.gif) disappear?

I need a way to solve this, even if sincerely i think that face the problem in this manner would be clean and straightforward.

Anyone would help please?

Thanks
Paolo Dina

[Longhaired Genius]

Trying to display a list horizontally is always problematic. I would use another approach, using a div to contain the menu and separating the elements with margins on the images and on <span> enclosing the fragments of text.

[drbrain]

list-style-image only applies to elements with display: list-item.

What you want is:

li { float: left; list-style-position: inside; /* the rest */ }

(IE6 seems to forget to display markers when you float a list-item, or when you set a height on the parent ul, gah!)