List item image marker - A cross browser solution

    Styling the list item markers is required on so many instances. There are so many readily available list styles like - square, circle, lower-alpha, roman and many more. Even after having a wide range of list styles, we are often faced with the challenge of using a custom list style. This is when we tend to use an icon mage for the list items.

    With CSS adding a custom image icon for list style is easily possible using the following code.

list-style-image:url('icon.png');

    However, this is not as simple as it appears. The above code doesn't display the output in the same way in all the browsers. IE7 and Opera will display the image marker a little bit higher than Firefox, Chrome and Safari. Our dear QA friends, will pounce on this and log an issue. QA 1 up! Now what? The developers have to find a solution to this and most will end up with a dirty hack. To avoid this, and be 1 up on our QA friends, here is a cross browser solution that works!


    Hope this small bit of code proves useful to all of you. If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. Till next time; happy coding!

Popular posts from this blog

Where does Google get it's live traffic data from?

Geodesic Polyline

Ground Truth - How Google Builds Maps