ThomThom's Website

list-style-image vs. background-image

30 Jun 07 - 15:43

I was playing around with the layout of my site here the other day. I was adding some small glyphs to some of the lists elements. It was then I realised how limited the control over the bullet images in CSS. In fact, I was very surprised that other than choosing the image, you had no control at all. The image gets located in the top left corner; which in many cases just looks odd and miss-aligned.

The standard bullet browsers renders usually relates to the line-height of the list item and therefore better positioned according to the content.

Immediately I was thinking that it'd be easy to work around that by using background-image which would allow absolute control over the image's position. But then I thought it could provide some accessibility issues. If the image doesn’t load for whatever reason, then there would be no fallback leaving the list items look like indented paragraphs.

But much big an issue is it? How serious of a usability issue is a missing bullet item in a list? Of course it'd be hard to distinguish the items if there's not whitespace separating them, and if each list item's text runs over several lines it's then look like a continuous piece of text. But with other elements such as white space, colouring, borders etc.; is it an acceptable trade-off to obtain better control of your layout?

While I was pondering on this I viewed the site without any images loaded. I found that there were several elements that failed because the foreground colour was too similar to the background colour making the text unreadable without the images. That can of course be avoided, at least in most cases by simply supplying a background image. But what do you do if the image contains transparency and adding an background colour would bleed through the image?

In general I found felt that using background-image instead of list-style-image didn't affect readability much if the image didn't load. But am I missing something? Please let me know your thoughts.


  • On 07.05.09 06:38 GMT illusions said:

    Goog idea
Comments are closed due to spam. Thank you spammers, well done!