If you're like me then you've probably spent many a frustrating time trying to get those darn list-style-image: url(/images/bullet.gif) bullets aligned properly with the text. They are either too high or too far to the left and the inside list-style only messes things up even more.
The trick is to disable the css list-style attribute and use background images instead. I tag the ul-element with an id #list-images-background and put the following in my css file:
ul#list-images-background li {
list-style: none;
background-repeat: no-repeat;
background-position: 0 2px;
padding-left: 24px;
}
An example is the list of my social media links on the right of my blog index page. Each list bullet image can be defined separately by using the background-image:url(/images/facebook.png) style. The markup code looks something like this:
<ul id="list-background-images">
<li style="background-image:url(/images/facebook.png)"><a href="http://www.facebook.com/kiffin.gish" target="_top">Facebook</a></li>
<li style="background-image:url(/images/twitter.png)"><a href="http://twitter.com/kiffin" target="_top">Twitter</a></li>
<li style="background-image:url(/images/googleplus.png)"><a href="http://www.google.com/+KiffinGish" target="_top">Google+</a></li>
<li style="background-image:url(/images/linkedin.png)"><a href="http://www.linkedin.com/in/kiffin" target="_top">LinkedIn</a></li>
<li style="background-image:url(/images/github.png)"><a href="http://github.com/kgish" target="_top">GitHub</a></li>
</ul>
The exact position of the image bullet can now be tweaked easily by adjusting the values of padding-left and background-position. After some minimal fine-tuning, here's what the list finally looks like:
The final result looks pretty professional, at least for someone like me. I invite all you so-called expert web designers out there to come up with something better.
