Custom graphic in bullet list <li>

This is a way to use graphic images as your bullets in unordered lists, bullet lists. This used to be achieved by creating a table with two columns, where the image would be in the first column and the the text in the second column. Semantically weak, this was never a good solution, but CSS comes to the rescue again.

The only drawback behind this solution is that the text will not be centered vertically compared to the graphic. Any suggestion on how to get around this is welcome.

Give me feedback on this page/code

Example:

Item one

Item two

Item three

Item four

CSS:


<style type="text/css">

<!--

  li { list-style-image: url(assets/exbullet.gif); }

-->

</style>

HTML:


<ul>

<li>Item one</li>

<li>Item two</li>

<li>Item three</li>

<li>Item four</li>

</ul>