CSS-Tricks: Listen mit grafischen Aufzählungszeichen

<h3>Liste mit grafischen Aufzählungszeichen</h3>
<div id="gif1">
<ul>
	<li>Kisten erstellen</li>
	<li>Kisten gestalten</li>
	<li>Kisten positionieren</li>
</ul>
</div>
<div id="gif2">
<ul>
	<li>Kisten erstellen</li>
	<li>Kisten gestalten</li>
	<li>Kisten positionieren</li>
</ul>
</div>
<div id="gif3">
<ul>
	<li>Flaggen herstellen</li>
	<li>Fahnen gestalten</li>
	<li>Fahnen positionieren</li>
</ul>
</div>

#gif1 ul, #gif2 ul, #gif3 ul {
   background-color: #DFDFDF;
   border: 1px solid #000;
   padding: 2px 20px;
   margin-left: 0;
  }
#gif1 ul li {
   list-style-type: none;
   background: url(bullet_yellow.gif) no-repeat left 5px;
   padding: 2px 20px;
   margin-left: -0.5em;
  }
#gif2 ul li {
   list-style-type: none;
   background: url(arrow_right.png) no-repeat left 5px;
   padding: 2px 20px;
   margin-left: -0.5em;
  }
#gif3 ul li {
   list-style-type: none;
   background: url(at.gif) no-repeat left 6px;
   padding: 2px 22px;
   margin-left: -0.5em;
  }