Support » Themes and Templates » Comment styling & Validation

Viewing 14 replies - 1 through 14 (of 14 total)
  • Lorelle

    (@lorelle)

    Jinsan, when using a “span” it must be inside of a paragraph or div. It can’t cross div closing tags or paragraph closing tags or any other containers. It must be within a container.

    You have:

    <span class="commentbody"><p>i heard the butler got bizee...

    and it needs to be:

    <p><span class="commentbody">I heard the bulter...

    Jinsan

    (@jinsan)

    O_o – but I didn’t code it that way, it was pre done. Interesting. I’ll see if I can change it guess. Thanks

    ifelse

    (@ifelse)

    ..or you can use divs instead of spans i.e.
    <div class="commentbody"><p>

    Change this within the theme’s comment file.

    Jinsan

    (@jinsan)

    yeap i thought hmm what if I…and it woked – just out of curiosity, was there a reason for using span, rather than div?

    Any tips for question 2) phu?

    ifelse

    (@ifelse)

    just out of curiosity, was there a reason for using span, rather than div?
    I forget:-)
    Any tips for question 2) phu?
    The numbering of comments is done implicitly as the comments are defined as an ordered list. Unfortunately, most browsers (AFAIK) don’t provide the css support required to style these. Hence, your best bet is to do the following:

    1) suppress the numeric display (list-style-type:none).
    2) Manually keep a counter variable that increments through the comments loop i.e. $commentcount++.
    3) Using this counter, mark this up as <span class="commentcount"><?php echo $commentcount; ?></span><br />
    4) Style this appropriately in your css.

    Lorelle

    (@lorelle)

    spans are meant for “inline” styles, which means a ~~temporary little style~~ that comes on and goes off inside of a container. A div is literally a “division” of styles, better known as a container. It holds a group of styles together.

    They both basically do the same thing but work a little differently. In some older browsers, closing a div meant creating a line break – end of container, next! Closing a span means…nothing. It’s just closed and go about your business. In the simplist of terms.

    Jinsan

    (@jinsan)

    I ended up using:

    <?php $count = 0; foreach ($comments as $comment): $count++; ?><div class="count">#<?php echo $count; ?>:</div>

    This creates the count, but doesn’t do it sequentially for the site, and instead individually for each post. It’s not what I wanted, but I guess it’s better than nothing.

    It’s coming together, slowly but surely:)

    I’m still get invalidiation though 🙁

    ifelse

    (@ifelse)

    “This creates the count, but doesn’t do it sequentially for the site”
    Ahh… Didn’t read that part:-)

    Why don’t you use the comment_id which is a unique sequentially allocated identifier (eg. <?php comment_ID(); ?>)?

    Andrea Rennick

    (@andrea_r)

    Customer Care at Copyblogger Media and Studiopress

    @lorelle, re: div vs. span – A light bulb just went off in my head. Thanks! 😀

    Jinsan

    (@jinsan)

    would I replace the comment count call with <?php comment_ID(); ?>?

    EDIT: Ok that’s got the sequence sorted. Now I’m trying to style the bugger and I still get validation errors.

    I tried adding div class=”count” before and after the suggest tag, but that again causes validation errors

    ifelse

    (@ifelse)

    Yep e.g.
    <?php foreach ($comments as $comment): ?><div class="count">#<?php comment_ID(); ?>:</div>

    Jinsan

    (@jinsan)

    Yep, got that, got it working, validation is starting to piss me off though 🙁

    http://validator.w3.org/check?uri=http%3A%2F%2Fsekhu.net%2Fwp%2F2005%2F02%2F01%2Fhow-many%2F%23comments&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&verbose=1

    Says it doesn’t allow divs, so I tried span, and it doesn’t allow span so I tried li, and it still spews errors.

    Lorelle

    (@lorelle)

    By messing with the list order stuff, you’ve:

    assuming missing "li" start-tag

    screwed up your lists. Check your list nesting.

    Remember, for every action there is an equal and opposite reaction. This is the law of the world, not just CSS and web page design. And it works. The more you screw things up, move away from the tried and true to make things work in the way you WANT them to work not the way they were probably already working before you started….the more borked they become.

    You are walking proof of this theory right now, J. 😉

    Jinsan

    (@jinsan)

    Well just to clarify I didn’t touch the list themselves, I added and removed the decimel using the CSS. I made no actual changes to the list in anyway. After much thinking I have got it to work.

    Thanks for your help ifelse – I wasn’t aware it was the kubrick template for comments, could have played with that first 🙂

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Comment styling & Validation’ is closed to new replies.