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.
Msg#: 3644700 posted 6:06 am on May 10, 2008 (gmt 0)
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...]
Msg#: 3644700 posted 6:22 am on May 10, 2008 (gmt 0)
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]