In this article I want to share my opinion on using the property “list-style-image” to place an image next to a list. I found that it is difficult to position/align the image to the proper place relative to the list item text. But then what do we use? Hang on and I will show you.

So here we have a vertical unordered list of items you want to display and you want to accompany the list items with a pretty little icon graphic next to them to highlight some points but it is a huge struggle to position the icon center aligned with the text item next to it. Have a look at the following screenshots of what the default “list-style-image” would look like next to the item list in different browsers. Use the baseline drawn as a reference.

Looking at the screenshot above what if I want to align the icon down a few notches so that the list item text is at the center of the icon? Well I found it very difficult to control the alignment correctly where it will play nice across all the browsers using the property “list-style-image”. Ok so what do we use? It turns out that using the “background-image” property and the “background-position” property gets the job done nice and easy and it is cross browser consistent. Let me show you how.

Have a look at the markup and css:

HTML:

        <ul id="background-image">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>

CSS:

ul#background-image {
	margin-top:25px; /* just to give it some spacing from the top */
	list-style:none;
}

ul#background-image li {
	background:url(../images/padlock.png) no-repeat;
	background-position:5px 0px; /* to move the icon into position of your choice */
	margin-bottom:20px; /* spacing between the list items */
	line-height:2.2em; /* to set the line height between the list items and to reveal the icon image or you can declare a height instead */
	padding-left:50px; /* to push the list item text over to the right revealing the icon */

}

Ok let’s have a look at the demo. I have put both list side by side for your comparison. The list on the left uses “list-style-image” property and the right uses “background-image” property.

CLICK TO VIEW DEMO

As you can see with the “background-image” property we were able to position it just right and it looks almost identical across all the above mentioned browsers. I guess the thing to take home from this is if you ever get stuck trying to align your pretty icons next to a list, think about using background-image property instead.

Be Sociable, Share!

•