• ResolvedModerator James Huff

    (@macmanx)


    I’m trying out Meng Gao’s nifty comment bubble, but I’m having trouble getting them to validate. https://wuhan.authenticasian.com/goodies/?p=4

    So far, I fixed one of two validation problems by moving the first <div> outside of the <a href> tag. The other problem is, of course, that I have a second <div> inside the <a href> (which is not allowed). Here’s what I have right now:

    <div class="comment-bubble"><a href="<?php comments_link(); ?>">
    <?php if ($comment_count_cache[$post->ID]!=0) { ?>
    <div class="comment-star"><?php echo $comment_count_cache[$post->ID] ?></div>
    <?php } ?>
    </a></div>

    And the stylesheet entries:

    .comment-bubble {
    float: right;
    background-image: url(images/comment.gif);
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    width: 40px;
    }
    .comment-star {
    background-image: url(images/star.gif);
    background-repeat: no-repeat;
    background-position: right top;
    height: 20px;
    width: 20px;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    padding-top: 6px;
    font: 9px Georgia;
    }

    Ibessant suggested that I use <span class="comment-star"> instead of <div class="comment-star">. That validated the site, but moved the comment star off to the left. Any ideas on how I could get around this would be greatly appreciated by both myself and Meng.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Can you use something like a negative margin or padding on the right to move the star back? Or is there some way of calling the <?php comments_link(); ?>">
    <?php if ($comment_count_cache[$post->ID]!=0) { ?>
    <div class="comment-star"><?php echo $comment_count_cache[$post->ID] ?></div>
    <?php } ?>
    section without an href?

    Or could you get around using the div by using “display: block” maybe instead?

    Guess I’ll have to grab the code and play with it some….

    Moderator James Huff

    (@macmanx)

    Thanks, Vkaryl. Would you mind posting an example of those two? I’m having trouble visualizing.

    Tried playing with it but as usual I’d have to have all the pieces-parts to get it to display correctly *sigh*. First thing to try would be to use text-align:right where you have center…. and that may not help at all, but can’t hurt to try it.

    Okay: for the neg margin and/or padding thing, where you have margin-left: auto;
    padding-top: 6px;

    try margin-right: -5%;
    padding-right:-5%;
    padding-top: 6px;

    Keep in mind that I really can’t see it without a test platform, so I’m just guessing at values and at which (margin or padding or both) would work.

    For the display:block call, try putting a link element in your css such that #comment-star a {display: block;}, take out the div inside the href, put the id into the href call, and see if that helps (may not – may bork the whole thing!)

    Now, if you’ve got a test platform set up with all the relevant files, and want to give me the address, I can go there and (using the dev toolbar in FF) play with it some there – no permanent changes, but would let me see what’s happening….

    Moderator James Huff

    (@macmanx)

    Thanks, I’ll take stab at it. If you want to give it a shot too, the image files can be found here: https://wuhan.authenticasian.com/goodies/?p=4

    Moderator James Huff

    (@macmanx)

    Blast it, those didn’t work either. It appears that it hinges on the fact that we do need the second div to be inside the first dive, or else it doesn’t layer properly. And, that we do need the href or it doesn’t link. And, to top it just, I just found out that IE 6 won’t even recognize it as a link because of the misplaced div. I think I’ll have to switch back for now as (unfortunately) I have a rather high IE visitor rate and I’ll have to leave in an hour so. But, if anyone can get it running and validated, I’d love to hear some success stories.

    Well, I’ll probably grab all of it and install it on a theme somewhere. This might even be something I can get to display on my localhost server (most of my stuff won’t now that I’ve got all my plugins reinstalled *sigh*)

    Okay macmanx – try this stuff:

    HTML – replace with following:

    <div class="comment-bubble"><a href="<?php comments_link(); ?>">
    <?php if ($comment_count_cache[$post->ID]!=0) { ?>
    <span class="comment-star"> <?php echo $comment_count_cache[$post->ID] ?> </span>
    <?php } ?></a>
    </div>

    CSS – replace with following:

    .comment-bubble {
    float: right;
    background-image: url(images/comment.gif);
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    width: 40px;
    }
    .comment-star {
    background-image: url(images/star.gif);
    background-repeat: no-repeat;
    background-position: right top;
    height: 20px;
    width: 20px;
    color: #ffffff;
    text-align: right;
    margin-bottom:10px;
    margin-left: 45%;
    padding-bottom: 10px;
    padding-left:45%;
    font: 9px Georgia;
    }

    You’ll note that neg margin/padding didn’t work – which is why I have to try things out….

    You can take a look at it following tweaks at P O V – I just left Rin selected….

    I’m on this. Will let you guys know if anything works out =)

    It works now. I’m not sure if this is the most elegant solution, but at least it validates now. What I did was to use the object tag to wrap the divs. All you have to change is to add the object tag to what you insert into the loop. For the exact code, look at the modified post here. And now, my Wuhan Goodies site validates.

    MacManX: Thanks for pointing this out man. I can always count on you to make sure my stuff validates! (I don’t know if you’ve noticed but I’ve been clicking on the ads on your site whenever I’m there (if I remember to do it). Karma, it’s all about karma man =)

    Well that’s way more elegant than my putzing with the css! But then I don’t have any background with stuff like “object” – would never have occurred to me to even look at that.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Trouble Getting Nifty COmment Bubbles to Validate’ is closed to new replies.