Can you use images with ordered lists?

<ol> <li> and image use.

[scraptoft]

I am using a many ordered lists on my website and I want to know if it's possible to style the bullet. I'd be happy to style the numbers using bold/bordered or with an image.

(I am aware I can use one set image as a bullet but i'd like them be numbered)

Let's just say I wanted the following numbers to be pink with a black border - can it be done?
[1]
[2]
[3]

Cheers.

[sgietz]

If I understand correctly, you could set the style at the li level and then enclose the actual text of the list item inside of a differently styled span tag.

[scraptoft]

Sgietz, do you mean have a different <li> style for each item in the list? Isn't there a more efficient way that allows me to control the actual numbers?

If not I guess i'll settle with that, thanks.

[sgietz]

You don't need a different style. It would look like this:

<ol class="listclass">
<li><span class="spanclass">List Item</span></li>
<li><span class="spanclass">List Item</span></li>
<li><span class="spanclass">List Item</span></li>
</ol>

The span's purpose is to override the style for the li element. I don't think you can put a border around just the number. The entire list item would have a border. You could use images, but then you will have to set the style for each li element (if you want each bullet to be different).

I'm sure someone here can come up with a better way to do this.

[swa66]

Take a look at display:marker in CSS2.1
[w3.org...]
I'm unsure if there's support out there in browsers for this.
(considering it's intended to only work in :before and :after, the odds of it working in IE6 are ... ridiculous

Note that CSS3 will obsolete CSS2 markers ...
[w3.org...]

[Xapti]

Well one option would be to make a vertical line of numbers for the OL...
The easiest way would be to only display the necessary numbers, but setting overflow:hidden to the OL.
There remains a problem though, scaling for font size.
This is a messy and somewhat tedious fix...One would have to make an image for each OL which has a certain number of points (ie. 4 lines OL img, 5 lines OL img, 6 lines OL img, etc.), and then set the img height to equal the height of the OL, so that it stretches to conform to different font sizes. Horizontally can be done as well with something like 1em width. A big problem with this method is that the imgs cannot be backgrounds, as background cannot be stretched in current supported CSS, meaning the image will have to be placed in each OL (as non-semantic markup).

Meh, just brainstorming. But yeah, if you just want a border around the numbers, I think what sgietz said could work, except I think some browsers like IE6 (probably the only one) don't apply styles to the 'bullet'? I don't really know.

[edited by: Xapti at 6:25 am (utc) on May 10, 2008]