WordPress.org

Ready to get started?Download WordPress

Forums

Gravatars - need to position correctly with CSS (2 posts)

  1. Xitanto
    Member
    Posted 8 years ago #

    I've got skippy's gravatar plugin installed and I have a small problem.

    http://www.mediahug.com/almax/2006/08/15/why-do-people-like-instant-messenging/#comments

    For instance. My gravatars appear above my post content. Here is the CSS I am using:

    .gravatar {
    float: right;
    padding: 0px;
    border: 1px solid #fff;
    background: #fff;
    margin-right: 5px;
    }

    .postgrav {
    float: right;
    padding: 3px;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid #fff;
    background: #fff;
    }

    and my comments.php file:

    <?php foreach ($comments as $comment) :
    if (function_exists('gravatar')) {
    if ('' != get_comment_author_url()) {
    echo "comment_author_url' title='Visit $comment->comment_author'>";
    } else {
    echo "
    ";
    }
    echo "<img src='";
    if ('' == $comment->comment_type) {
    echo gravatar($comment->comment_author_email);
    } elseif ( ('trackback' == $comment->comment_type) || ('pingback' == $comment->comment_type) ) {
    echo gravatar($comment->comment_author_url);
    }
    echo "' alt='' class='gravatar' width='80' height='80' />
    ";
    } ?>
    etc.
    etc.
    etc.

    How can I fix my problem? I want the gravatars to be wrapped around by the text of the post. I know it's got something to do with the placement of the ids and classes, but I'm not an expert so I need an answer. :S

  2. chiensavant
    Member
    Posted 8 years ago #

    I fixed it myself by adding an extra <div> tag before the gravatar img tag. I called this tag "cd"...
    And here is an sample of my CSS file that aligns the gravatar to the right.
    .cd
    {
    float: right;
    text-align: center;
    color: black;
    border-width: 0 0 1px 1px;
    padding: 0 0 5px 5px;
    margin: -1px -1px 0px 5px;
    position: relative;
    border-color: #F93;
    border-style: solid;
    background-color: white;
    height: 1%;
    width: 1%;
    }
    /*
    This is a CSS comment where the end-of-comment marker is escaped. The following styles are not read by Explorer 5 Mac because it thinks they are still part of this comment.
    */
    .cd
    {
    height: auto;
    width: auto;
    }
    /*
    Another comment, now with a normal end-of-comment marker. Explorer sees the end of this comment as the end of the previous one.
    */

    Actually, it does do more than just aligning the img tag, so adjust it to you needs. You can see the rendering on my website.

    Don't forget to close your div tag as well...

Topic Closed

This topic has been closed to new replies.

About this Topic