The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Ordered Lists are a Pain

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #33435

    Hello, Forums! I come to you with some strange, but hopefully fixable problems!


    I’m working on a timeline-page that’s following the events of the characters in a popular webcomic – a fan project that’s doubling as web design practice. Each character has his/her own section, which is a definition list separated into sections. It’s not live, but the HTML is basically:

    Character Name

    First Section

    first event

    second event

    third event

    Second Section

    first event

    second event

    third event

    The extra divs are for some simple jQuery toggling – when you click the DT, the next sibling .timePeriod chunk shows/hides. Maybe not the most semantic solution? If there’s a better way, I’m all ears.

    In the CSS for the DD tags, I’ve got the following counter:

    	counter-increment: li;
    content: "EB-" counter(li);

    which lists EB-1, EB-2, etc., in front of each DD.


    The purpose of the counter is that each DD is a unique event with its own id (like EB-24, CG-30, etc), so that the events of one character can be tagged with those of another, and you can CTRL+F one id to leap to the other. So if EB-24 is tagged with CG-30, you can CTRL+F to CG-30.

    The problem is twofold. First, text in a counter (decimal numbering in OL included) can’t be searched with CTRL+F! Obviously most people aren’t going to be searching for “1.” or “VII.”, but what about custom counters like: content: "Section #" counter(sect); Most people would probably search for something else in the text, but how can you be sure? Augh!

    edit: Any string that’s part of the “content:” attribute is unsearchable. :(

    The other problem is that showing or hiding different chunks of the DL reorders the counter based on what’s visible. Which means that if you’re only viewing the third section, the counter will display starting at EB-1, instead of EB-16 like it’s supposed to, which completely defeats the purpose for me.

    Is there a workaround for this? I don’t know much PHP or Javascript (or jQuery, for that matter), but I’m open to learning if that’s how to solve the problem.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.