Egen icon till <li>

Har denna koden i mitt Style Sheet:

ul
{
    list-style-type:circle; 
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 15px;
}
li
{
	list-style-image:url('/aaa_media/search/icon_01.gif');
	padding:0px 0px 0px 0px;
}

Saken är den att i IE kommer den lite högt i t-led gentemot textraden och i NS kommer den något lite under.

Exicterar lösning?

/E

Jag var på väg att slå upp ordet "exicterar" innan jag insåg att det var "existerar" du avsåg :)

Hur som helst...
Det hela görs ganska enkelt genom att använda bilden som bakgrund istället:

ul {
    list-style-type: none;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 15px;
}
li {
	background: url('/aaa_media/search/icon_01.gif') left center no-repeat;
	padding-left: 10px;
}

Att jag sätter padding-left till 10px beror på att vi vill att bakgrundsbilden ska synas utan någon text eller annat innehåll över.
Ändra 10px till vad som är lämpligt för dig.

Lite tips om hur man kan modifiera listor: http://css.maxdesign.com.au/

Toppensida!

enda problemet är att hela den <li> får det, så om man inte vill ha indenting på andra raden så blir det problem.

simmel skrev:

enda problemet är att hela den <li> får det, så om man inte vill ha indenting på andra raden så blir det problem.

Då kan du testa med

li {
	background: url('img1.png') 0 5px no-repeat;
	text-indent: 25px;
}

Jag skrev "0 5px" (horisontell resp. vertikal placering) för att få bilden justerad efter första raden istället hela li-elementet.
Det kan naturligtvis också ändras efter behag.