I was working on a new site and I wanted to put an image in front of all the links that appeared as lists. Tony had told me that it was possible to do this using CSS. As with many of the things that I have been told are possible using CSS it took me quite a while to work out how to do this. I would have got the job finished much sooner had I read this post first. Mark’s article showed me how to use the list-style property to change the appearance of a list bullet. For example

<style type="text/css">
ul.URLlist {
  list-style: url(/images/arrow.gif) disc;
}
</style>

replaces the standard bullet with arrow.gif in modern browsers.

Even though I had the image I wanted as the list bullet I still had problems. The image was appearing outside the content area of the UL, which didn’t work with the design. I had read an article in the past about the positioning of markers on list items which I went and looked up again. After reading this I used the list-style-position property to move the image so that it appeared inside the <li> box.

<style type="text/css">
ul.URLlist {
  list-style: url(/images/arrow.gif) disc;
  list-style-position: inside;
}
</style>

On further reading I realised that instead of using the list-style-position property I could have added the value of inside to list-style and it would have done the right thing.

list-style { url(/images/arrow.gif) disc inside; }

I was really pleased with the results of my work until I discovered that this doesn’t seem to work with DL, DT, or DD. So, how do I get an image to appear in front of these?