Need help from a CSS person for aligning my gravatar!

  • Hi, I hope someone who’s good at CSS can help me with this. I’m using Cutline 1.2 and I’ve added a gravatar beside the post title, but I’m having trouble getting it to align correctly. (Funny enough it shows correctly in Safari, but not in any other browser.) My CSS looks like this:

    h2 { font-size: 2.0em; }

    h2 a { color: #000; text-decoration: none; }

    h2 a:visited { color: #555; text-decoration: none; }

    h2 a:hover { color: #090; text-decoration: none; }

    .posts h2 { margin: 0 0 0.1em 0; line-height: 1.2em; }

    .pages h2, h2.page_header { margin: 0 0 0.75em 0; padding: 0 0 0.6em 0; background: url(‘images/hr_title_sep.gif’) 0 100% no-repeat; }

    .avatar{ float:right; display: inline; padding:0 2px 0 2px; }

    h2.archive_head { font-weight: bold !important; font-size: 1.4em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 3px solid #000 !important; background: url(‘images/hr_dot_black.gif’) 0 100% repeat-x !important; }

    And then in my index.php and my single.php it looks like this:

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <h2>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?>

    <div class=”avatar”>
    <?php echo get_avatar( get_the_author_email(), ’48’ ); ?>
    </div></h2>

    <h4><?php the_author() ?> · <?php the_time(‘l, F j, Y’); ?> at <?php the_time(‘g:i a’); ?> <?php edit_post_link(‘Edit’, ”); ?>
    </h4>

    What am I missing here? I just want the gravatar to be aligned on the right side opposite my title (h2) and post info (h4). Right now it’s placing the avatar between the two lines, or it’s pushing the h4 line down below it. I’m sure it’s a simple fix, right? But….. I’m fairly new to CSS.

    I’d appreciate anyone’s help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter john_wright

    (@john_wright)

    bump. Can someone take a look at this for me?

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    A link to the site might help so people can actually see the results and the CSS…

    Thread Starter john_wright

    (@john_wright)

    Sorry…. it’s

    https://www.klpz1380.com/parkerlive

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    John,

    My CSS is *cough* horrendous *cough* not that good but try this:

    .avatar{ right:165px; display: inline; padding:0 2px 0 2px; position: absolute; }

    I’m using EditCSS in FireFox and that seems to line it up on the top.

    Edit: (I edit a lot…) Scratch that, that only works for the width of _my_ window…

    Hi John,

    The CSS you gave as an example seems fine to me. Try putting the Avatar div above the first heading (the h2), though. That will put the avatar at the top-right of each post.

    When you float an element, it allows all the elements beneath it to sit in the horizontal space it doesn’t occupy.

    Thread Starter john_wright

    (@john_wright)

    Guys,

    You’re awesome. A combination of both your pieces of advice worked for me: the first made it display right in IE6 and IE7, the last one corrected it on Firefox and Safari too.

    Woohoo! Thanks again

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Uh, John, if you look at it in IE7 re-size your window to the left and right… on mine the Gravatar moves in relation to the window border…

    I’d stick with markfoskr’s advice and leave the CSS as it was but move that <div>.

    Thread Starter john_wright

    (@john_wright)

    I’d tried that already… on some browsers it was placed above the h2 when I did that. Yikes. Any other suggestions?

    Try setting a width on the containing div equal to the width of the image, that should do it. Whenever you float an element, you should always declare a width. Additionally, IE handles floats MUCH better with a defined width.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Need help from a CSS person for aligning my gravatar!’ is closed to new replies.