views:

80

answers:

2

I assume the answer is "no," but I thought I'd throw the question out there to all you CSS ninjas, since it has cropped up before, and when you're digging through code that involves a whole team, the happiest answer isn't always "well, just rework the code."

Given an ordered list:

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

Is it possible to remove the decimal points but retain numbering via JUST CSS, no javascript hackery, etc.? My gut and experience says "absolutely not," but I know there are some pretty creative types out there, and I wonder if there's something I haven't considered yet.

Update

Possible text example, as requested:

Convert ordered list that looks like this:

1. [...content...]
2. [...content...]
3. [...content...]

To something like this:

1 [...content...]
2 [...content...]
3 [...content...]

All with CSS wizardy, no javascript. Again, I realize this might be impossible, but ya just never know, do ya.

+6  A: 

This works in Firefox 3.6.6 and Chrome 6, but not in IE7 or IE8 (no suprise there).

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) " "; counter-increment: item }

See http://www.w3.org/TR/CSS2/generate.html#scope

sgriffinusa
+1  A: 

For a low-tech but highly cross-browser compatible solution, you can use a background image with vertically stacked numbers applied to the ol; just specify a line-height to be sure it all aligns.

reisio
Not sure I follow the logic here entirely. Can you expound on this?
American Yak
http://reisio.com/temp/olbg/
reisio
Wow -- that's pretty smart -- it has it's limitations, but *definitely* can work with the right constraints.
American Yak