Unordered List > icons for specific text

[Guest]

Hi

Hoping someone can help me....

I'm trying to get some icons next to a list of text within my individual products page text.

Its just a list but with the little icons on the left hand side.

This is what i have done so far.... in my css

div#list {

	margin: 0px;

}

div#list ul {

	margin:0;

	padding:0;

	list-style-type: none;

}

div#list li {

	background-position:left;

	background-repeat:no-repeat;

	list-style: none;

	background-image: url(../styleImages/icons/zoom_blu.gif);

	background-repeat:no-repeat;

}

This is what i have in my html

<div id="list">

<ul>

	<li id="list">Cross </li>

	<li>Tick </li>

</ul>

</div>

The problem is the icon shows on top of the text in Firefox and it doesn't show up at all in IE????

I have an external stylesheet that i can add the change that needs to make this happen in IE...

But the alignment issues on both browsers is also a problem... as the icon is on top of the text!

I've tried everything!!!!!

I'm sure i'm missing something and if there is an easier way please let me know.

Thanks in advance.

Kindest Regards,

Antz

Image is attached.

[bsmither]

The list-style-image property replaces the list-item marker with an image.

Try:

#list ul

{

list-style-image: url(blueball.gif);

list-style-type: circle

}

Note: Always specify a "list-style-type" property in case the image is unavailable.

[Guest]

Thank you...

I have given that a go...

I've set it up as this....

#list {

	margin:0;

	padding:0;

}

#list ul {

	list-style-image:url(../styleImages/icons/tick1.gif);

	list-style-type: circle;

}

and HTML

<div id="list">

<ul>

	<li>Cross </li>

	<li>Tick </li>

</ul>

</div>

It is now showing up both in IE and FF, except the alignment issues!!!!

I've attached the file so you can see what i mean.... how do i get the padding and margins to align correclty within height and padding to the right from the icon to the text?

Once again thank-you.

Cheers

Andrea

The list-style-image property replaces the list-item marker with an image.

Try:

#list ul

{

list-style-image: url(blueball.gif);

list-style-type: circle

}

Note: Always specify a "list-style-type" property in case the image is unavailable.

[bsmither]

Try editing this:

#list li {

list-style-position: outside;

margin: 0px 0px 0px 1.25em; /* sweeten to taste */

padding: 0px;

}

This is my store's list style (ol and ul are not modified).