Hi Chuck,
On 05/11/2014 03:30 PM, Charles Miller wrote:
Good morning -
My business client donates a website for the Flag Day Parade here in
Appleton, WI, USA. Each year the site lists all the participants.
I’ve normally done that by converting a docx file to an html table.
But with my limited import experience and my limited code skills,
that always resulted in a significant amount of manual editing. And
renumbering when they modify the list. This year I read in my
HTML/CSS books and decided to try an organized list.
It hasn’t gone well. All 105 lines had the same <li> formatting
(identical to my eye) but they displayed differently. Plus the
numbers showed in Dreamweaver but not in any of the browsers I
proofed it in. Safari, Firefox, Opera. The site structure is
inherited, so I don’t fully understand it. I thought perhaps
something was squelching the numbers, or rendering them in white,
etc. So I tried to redefine color etc. in the head of the page. Had
no effect.
So I Googled and wound up at:
http://stackoverflow.com/questions/725741/how-to-colour-the-list-style-type-auto-generated-numbers
From there I trial-and-errored to this review page:
http://www.lasersaveinc.com/FlagDay-2014/lineup.html
This looks OK with one exception. The list starts with the number one
(as you’d expect), but the parade committee begins their list with
the number 0 (zero). I thought I could use value=“0” within the first
<li> item — but it has no effect given the code I’m employing. I
hoped I could use start=“0” within the opening <o;>. But it had no
effect.
Any suggestions? (I wondered if another approach might be some sort
of full reset for ol and li.)
The easiest solution would be to use the browser's built-in numbering
and use something like
# li::marker {
# color: #8B0025;
# }
to style the number. Unfortunately, I know of no browser that supports
this at this point.
A second option would be to wrap the contents of the li elements in
spans, and use
# li {
# color: #8B0025;
# }
# li > span {
# color: black;
# }
, though you might find that unsatisfactory as well.
The solution with the manual counters you found on SO, though, could be
improved by using
# ol li:not(:first-child) {
# counter-increment: list;
# }
# ol li {
# position: relative;
# }
rather than
| ol li {
| list-style-type: decimal;
| counter-increment: list;
| position: relative;
| }
. (The list-style-type is not useful, as you're overriding the list-item
display type on the li elements.) This solution appears to work in
Firefox and Chrome here.
HTH
Ms2ger
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
