SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Comma After <li> Possible?

    I have a list of things generated by wordpress. I currently have it listed as:

    Cat 1 Cat 2 Cat 3

    I'm wanting however:

    Cat 1, Cat 2, Cat 3,

    Is there a style to add for <li> to add a comma after </li>? I know of the li:after but it seems that only works in firefox. Please let me know if there is anything else that could be done. Thanks!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Doing it with CSS-only, the only way I can think of is by using a background image of a comma for each list item (which would add it to the last one too unless there's a class already set for the last list item). Not the best solution really.

    Otherwise you'll have to change the template that produces the markup or resort to javascript. I'd change the template, shouldn't be too hard to find the spot where you need to add it.

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    It can be done with CSS using content of course won't work in certain browsers >.>

    Code:
    .yourlist li:after {
        content: ",";
        padding-left: 1px;
    }
    UNTESTED!
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using a background image would be too buggy. I don't think you could control the vertical alignment well enough. Also the comma size wouldn't change with font-size changes.

    logic_earth is correct. IE7 doesn't support doing that though.

    For a live example, check out Putting a List in a Paragraph in Firefox, Opera, or Safari.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Technically that should be:

    Code CSS:
    .yourlist li::after

    (after is a pseudo-element and takes two colons, as opposed to pseudo-classes which take one).

    As others have said, you won't get much browser support out of this, but if you do go this route you can also cancel the last one:

    Code CSS:
    .yourlist li:last-child::after {
        content: "";
    }

    But personally, and slightly dubiously, I would just do this:

    Code HTML4Strict:
    <ul>
        <li>Cat 1,</li>
        <li>Cat 2,</li>
        <li>Cat 3</li>
    </ul>

    It's not wrong, it's just tautological

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake View Post
    (after is a pseudo-element and takes two colons, as opposed to pseudo-classes which take one).
    In CSS3, yes, but not in CSS2 which uses single colons for both cases.
    Birnam wood is come to Dunsinane

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, adding the commas manually would solve the IE support issue and it is simple and practical despite being a little ugly.

    Do either of you know if all browsers that support any pseudo-elements handle this correctly? Also, do you have any idea when the CSS3 Selectors module will reach recommendation status? It seems to have had "last call" status for many, many months.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AFAIK, simple generated content like this works well in browsers that claim support for it. (There may be some discrepancies when you start trying to style the generated content.)

    Who knows when the CSS3 modules will become official? They haven't even managed to agree on CSS 2.1 yet.
    Birnam wood is come to Dunsinane

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My first question was too vague. I meant to ask which browsers support using the double colon.

    Here's what I found with my quick test:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    /*
    Firefox and NS7.2 (Mozilla 1.7+), Opera 7+, IE5.5-6, Safari (at least 1.2+)
    Konqueror 3 (at least 3.4+) apply the second rule.
    Older versions of Netscape, Mozilla, and Opera and IE5/Mac and 
    (ironically) IE7 apply the first rule.
    IE5.0/Win doesn't support the "first-line" pseudo-element as all.
    */
    p:first-line {
      background-color: #f66;
    }
    p::first-line {
      background-color: #6f6;
    }
    
    </style>
    </head>
    <body>
    
    <p>Fusce convallis, odio eu commodo ornare, risus wisi scelerisque lectus, non 
    feugiat sem turpis sit amet velit. Donec a mauris vitae diam mollis dapibus. 
    Donec dignissim ultrices tellus. Curabitur sagittis dictum turpis. Integer 
    accumsan wisi. Proin sodales pellentesque nibh. Nunc ultrices, libero sit amet 
    aliquet egestas, dui wisi vehicula purus, ac ornare pede erat eu arcu. Nunc nec 
    lacus posuere enim sodales luctus. Praesent vitae neque. In wisi nibh, sodales 
    blandit, egestas eu, ultrices at, est. Suspendisse ullamcorper tincidunt 
    sapien. Aliquam ac nisl vitae eros cursus aliquam.</p>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Hi Kravvitz,

    Firefox and NS7.2 (Mozilla 1.7+), Opera 7+, IE5.5-6, Safari (at least 1.2+)
    Konqueror 3 (at least 3.4+) apply the second rule.
    If I understand you right, then it means IE 6.0 will apply the second rule i.e.
    Code:
    p::first-line {
      background-color: #6f6;
    }
    But I checked here, I found that both the rules are working in IE 6.0! How could it be?
    _____________________________________________
    !!--Sumi-- !!
    Addicted to Web

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sumi, do you mean that if you remove the second rule then the first will be used? That's what is supposed to happen. The test is simply to see which browsers handle the "::" properly and which browsers ignore that rule.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help. I was able to get this solved http://www.imaginetrue.com/ as I have a comma after each keyword. Thanks for the help once again!

  13. #13
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Do either of you know if all browsers that support any pseudo-elements handle this correctly?
    IE7 doesn't support pseudo-elements when they are written with two colons. (IE6 does.)
    Quote Originally Posted by Kravvitz View Post
    Also, do you have any idea when the CSS3 Selectors module will reach recommendation status?
    Selectors is not a CSS3 module, it's a separate spec. As with most specs, it will probably reach Rec when there are two independent, complete and interoperable implementations.
    Simon Pieters

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    IE7 doesn't support pseudo-elements when they are written with two colons. (IE6 does.)
    We already established that.

    Quote Originally Posted by zcorpan View Post
    Selectors is not a CSS3 module, it's a separate spec.
    What's the difference?

    So Selectors and Media Queries are separate specs and the others are modules for one spec?

    Quote Originally Posted by zcorpan View Post
    As with most specs, it will probably reach Rec when there are two independent, complete and interoperable implementations.
    Is there a precedent for that?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  15. #15
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    We already established that.
    Not while I was typing!

    Edit:

    or perhaps I just didn't read the whole thread?



    Quote Originally Posted by Kravvitz View Post
    What's the difference?

    So Selectors and Media Queries are separate specs and the others are modules for one spec?
    Pretty much... Selectors is used by specs other than CSS, e.g. XBL2 and Selectors API, and is not dependent on CSS in any way. Therefore the CSS WG considered Selectors to be a separate spec rather than a CSS3 module.

    Quote Originally Posted by Kravvitz View Post
    Is there a precedent for that?
    In this day and age, yeah (see e.g. the CR exit critera for CSS 2.1). 10 years ago, you slapped on a Rec label when a spec was "done", regardless of implementations (see e.g. HTML4, which still doesn't have any complete implementations, nor interoperable).
    Simon Pieters


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
  •