SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: CSS counters

  1. #1
    SitePoint Enthusiast ericthehalfbee's Avatar
    Join Date
    Oct 2001
    Location
    Auckland, NZ
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS counters

    I don't suppose that anyone has anyexperience of using these?

    My CSS looks like

    # content{
    }
    p {
    position:relative;
    left:50px;
    margin-right:50px;
    }
    #content h1:before {
    content: counter(chapter);
    counter-increment: chapter; /* Add 1 to chapter */
    counter-reset: section; /* Set section to 0 */
    }
    #content p:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
    }

    I can't get them to work at all.

    Ta

  2. #2
    Bangarang! Karloff's Avatar
    Join Date
    Mar 2003
    Location
    Manchester, United Kingdom
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hihi...

    It sure is pretty hard getting something to work that, as far as I know, doesn't work in any browser yet :-)

    The counter properties are part of the CSS 2 recommendation which isn't fully implemented in any browser yet. If you need an overview of CSS 1 & 2 properties that will work with the browsers we've got now *sigh* check out: http://www.w3schools.com/css/css_reference.asp

    Karl

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works fine in Opera 7, and I suspect it may work in older Opera versions as well.

    You're falling foul of poor browser support for this area of CSS2. IE6 doesn't do any of the generated-content stuff. Mozilla does bits of it, but not counters.

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Karloff:

    Thanks for the link, it's a nice complement to the tables over at http://www.westciv.com.au/style_mast...ort/index.html

    Unfortunately, both these tables need updating for more recent browsers. Netscape 6 is now over 2 years old. Netscape 7 and Mozilla now support several items marked as "unsupported" in these charts, and Opera supports all kinds of things that the other browsers don't.

    For example, Netscape 7/Mozilla have perfectly good support for Border-collapse, max/min-width/height.

  5. #5
    Bangarang! Karloff's Avatar
    Join Date
    Mar 2003
    Location
    Manchester, United Kingdom
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blufive
    For example, Netscape 7/Mozilla have perfectly good support for Border-collapse, max/min-width/height.
    I only ever use these when I work with XUL in NS/Mozilla. Hevn't even attempted trying out any fancier CSS styling with IE... and Opera, uhm, who uses that? If it had something like Mozilla has with XUL, fine, but other than that it is just _yet_another_browser_ to worry about. I definately wouldn't bet on it even though the counter property would be really nifty for TOCs, FAQs and help files. Alas, though I don't know where Opera stands on XML and XSLT, you can easilly achieve such a counter if you're dealing with an XML document and can have that processed on the client (both IE and Moz will handle it) via XSLT :-)

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera's CSS support is good - as demonstrated here, there are places where it can show Moz a thing or two.

    > I don't know where Opera stands on XML and XSLT

    http://www.opera.com/docs/specs/
    (summary: good at XHTML and XML, but no client-side XSLT)

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by blufive
    Unfortunately, both these tables need updating for more recent browsers. Netscape 6 is now over 2 years old. Netscape 7 and Mozilla now support several items marked as "unsupported" in these charts, and Opera supports all kinds of things that the other browsers don't.
    Remember that even after six years, there are still some of us who have to support Netscape 4! Netscape 6 being only 2 years old is no excuse not to still cater to it; IE6 is also two years old. The average software lifespan is 3-5 years; I try to at least stay on the short end of that range. I do use CSS2 and other tricks that only advanced browsers understand, but I make sure it does not affect the usability of my page any.
    Quote Originally Posted by blufive
    For example, Netscape 7/Mozilla have perfectly good support for Border-collapse, max/min-width/height.
    If I remember correctly, IE6 also supports the min-height property. I can still take them to task about min-width and position: fixed though.

  8. #8
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wasn't saying that N6 should be dropped because it's 2 years old.

    I was pointing out that both the CSS compatibility charts needed updating, since they exclude N7 (released over 6 months ago). The Westciv one I linked covers Opera, too - except it stops at version 5 - 6 and 7 have better CSS support.

  9. #9
    SitePoint Enthusiast ericthehalfbee's Avatar
    Join Date
    Oct 2001
    Location
    Auckland, NZ
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karloff
    Hihi...

    It sure is pretty hard getting something to work that, as far as I know, doesn't work in any browser yet :-)

    The counter properties are part of the CSS 2 recommendation which isn't fully implemented in any browser yet. If you need an overview of CSS 1 & 2 properties that will work with the browsers we've got now *sigh* check out: http://www.w3schools.com/css/css_reference.asp

    Karl
    oh well, it was a nice thought. There's a lot of information out there regarding something which doesn't work on much.

    Have to find some other way of doing it.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •