How to vertically align custom bullets and text with CSS

These solutions provide a cure for Internet Explorer 7, 6 and 5 which do not permit the vertical alignment of list-style-image bullets. The fixes below work uniformly across Operating Systems (Mac, PC and Linux) and their respective browsers.

Problem

Code:

ul#problem li {
  list-style-image: url(http://graphics.milesarts.com/misc/bluearrow.gif);
  vertical-align: middle;
  }
  
<p><strong>Problem:</strong></p>
<ul id="problem">
  <li>Item #1</li>
  <li>Item #2</li> 
  <li>Item #3</li> 
  <li>Item #4</li> 
  <li>Item #5</li>
</ul>  

Result:

• Item #1
• Item #2
• Item #3
• Item #4
• Item #5

Notes:

The result looks like this (left) when viewed through I.E. 7, 6 and 5.

Solution 1

Code:

ul#soultuion_01 li {
  list-style-image:url(http://graphics.milesarts.com/misc/bluearrow.gif);
  _list-style-image:url(http://graphics.milesarts.com/misc/bluearrow_ie.gif);
  }

<ul id="solution_01">
  <li>Item #1</li>
  <li>Item #2</li> 
  <li>Item #3</li> 
  <li>Item #4</li> 
  <li>Item #5</li>
</ul>

Result:

• Item #1
• Item #2
• Item #3
• Item #4
• Item #5

Notes:

Adding additional pixels to the top of the original bullet (left) will compensate for I.E.'s incompatibility. This solution is widely known and documented on the internet.

FYI, the underscore in the CSS declaration is a hack for I.E. We can effectively designate one graphic for I.E. and one for all other browsers. The use of a hack (as a purist) is not the ideal situation. Conditional statements in the header would be the best way to avoid them.

Solution 2

Code:

ul#solution_02 {
  padding: 0;
  margin: 0 0 0 22px;
  }

ul#solution_02 li {
  background-image:url(http://graphics.milesarts.com/misc/bluearrow.gif);
  background-position: 0 4px;
  _background-position: 0 6px;
  background-repeat: no-repeat;
  list-style-type: none;
  padding: 0 0 0 18px;
  margin: 0;
  height: 20px;
  line-height: 20px; 
  }

<ul id="solution_02">
  <li>Item #1</li>
  <li>Item #2</li> 
  <li>Item #3</li> 
  <li>Item #4</li> 
  <li>Item #5</li>
</ul>

Result:

• Item #1
• Item #2
• Item #3
• Item #4
• Item #5

Notes:

Why add another more complicated and verbose solution to the mix? Because it provides more control over the position, size and style of these elements. My hope is to supplement the limited styling options available for semantically correct code.

I welcome any comments or additional ideas.