homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Can you use images with ordered lists?
<ol> <li> and image use.

5+ Year Member

Msg#: 3644700 posted 1:30 pm on May 8, 2008 (gmt 0)

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?




5+ Year Member

Msg#: 3644700 posted 2:30 pm on May 8, 2008 (gmt 0)

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.


5+ Year Member

Msg#: 3644700 posted 4:06 pm on May 8, 2008 (gmt 0)

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.


5+ Year Member

Msg#: 3644700 posted 7:18 pm on May 8, 2008 (gmt 0)

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>

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.


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3644700 posted 6:06 am on May 10, 2008 (gmt 0)

Take a look at display:marker in CSS2.1
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 ...


WebmasterWorld Senior Member 5+ Year Member

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]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved