inline 'li' element - background image only displaying on first element?

Hi All,

I am currently trying to get an unordered list to display with its elements inline, with bullet seperators.

The way I am doing this at present is with the following CSS:

<ul id="steps-info">
<li>foo</li>
<li>bar</li>
</ul>


		#steps-info {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
			#steps-info li {
				display: inline;
				padding: 0 5px 0 15px;
				background-image: url(img-white-bullet.gif);
				background-repeat: no-repeat;
			}

Code (markup):

This approach works perfectly in Firefox, but in IE only the first bullet is rendered.

Grateful for any comments.

Cheers,

Jamie

 

Jamie

The code displays both bullets for me in IE6. Created a 10px square .gif to test.

 

try ul#steps-info li instead of #steps-info li
Sometimes solves my problems but don'y know why.

 

Thanks for everyone's help - ended up doing it graphically as I couldn't get it to work properly in the evil IE5!