Graphical Bullets in css: home made

Graphical bullets: self made

This is a home made graphical bullet, applied as a background image for each list item.
Item 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis te feugifacilisi.
Item 4.
Item 5.
It has a background positioning of .3em down from the top of the item line. Then the position is related to the scaling of the font size by the visitor, and will stay at the right place.
Fine-tuning!
IE needs .5em from top; that is arranged with a "conditional comment", that only IE can read.
See source code.

<head>
...
...
<!-- *** general styles first *** -->

<style type="text/css"> /* *** or link to external stylesheet with the styles below in it: *** */

.container {
	width: 500px; 
	margin: 0;
	padding: 10px;      /* *** setting the bullet-img horizontally *** */
	background: #F8FCC2;
	color: #000000;
	border: 1px dashed blue;
}

.container li {
	list-style: none;
	background: url(images/catbullet.gif) no-repeat 0 .3em; 
	margin: 10px 0;     /* *** vertical margin between the list items *** */
	padding-left: 20px; /* *** distance text of the list item to the margin / bullet-img *** */
}

</style>

<!-- *** the next Conditional Comment for IE has to follow the lines of the normal styles
         (if before the normal styles, 
          then the normal styles should overrule the special IE-only styles > no effect in IE) *** -->

<!--[if lte IE 6]>
	<style type="text/css">
	.container li { background-position: 0 .5em; } /* *** IE correction *** */
	</style>
<![endif]-->

</head>

<body>
...

somewhere 2006,
francky

updated: 09 Mar. 2007 (added where to put the CC)