So I am using a simple method to use custom images as bullets using css. What I am doing looks great in firefox/safari and even in IE8 but it has a wide gap between the text and the bullet in IE7. Here is the code I am using:
HTML:
<div id=“blist”>
<li>Answers to your burning questions</li>
<li>Steps that make a difference to your transplant success</li>
<li>Tools to go from step to step successfully and without delays</li>
</div>
CSS:
#blist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}
#blist li
{
padding-left: 19px;
background-image: url(…/images/bullet_hp.png);
background-repeat: no-repeat;
background-position: 0 .7em;
}
I tried adding an IE7 only style sheet to try and tweak it with a less of a padding left for the #blist li, but no dice. Any suggestions?