Forum Moderators: not2easy
I have a Wordpress blog and on the comments page (typical WP comments page), I am trying to place a gravatar in the top right position of each individual comment, with the text wrapping around it to the left and below the iamge. I had it working great in Firefox and then I brought it up in IE and it broke. What's happening is in IE, the comment text is beginning below the gravatar's bottom border, instead of wrapping around the image. So I figured it must have something to do with clearing floats.
These are the code snippets with which it works in FF and not IE:
.commenttext {
background: #E9E9E9;
width: 440px;
min-height: 60px;
color: black;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 5px 5px 5px 5px;
margin: 10px 0px 10px 0px;
border-top: 1px solid #DDDDDD;
border-right: 1px solid #666666;
border-left: 1px solid #DDDDDD;
border-bottom: 1px solid #666666;
}
.commenttext .avatar {
float:right;
padding:0px;
margin:0px 0px 0px 0px;
background:none;
border: none;
}
<div class="commenttext">
<div class="avatar">
<?php if(function_exists('get_avatar')){
echo get_avatar($comment, '60');
} ?>
</div>
<?php comment_text() ?>
<cite>
<?php comment_author() ?> on
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<?php comment_date('F jS, Y') ?> <?php comment_time() ?> <?php edit_comment_link('(Edit)','',''); ?>
</cite>
</div>
So, I tried adding "clear: both" in the CSS and/or in the comment template code and the only way I have gotten it to work in IE is when I use the INCORRECT syntax as follows:
<div style="clear:both; class="avatar">
<?php if(function_exists('get_avatar')){
echo get_avatar($comment, '60');
} ?>
</div>
When I put the proper closing quote after "both", with and without the semicolon, it does not work! Correct me if I'm wrong, but isn't the above syntax incorrect? If so, why would it be acting this way?
My site is going to get big publicity on Thursday and I'd sure like to figure out this little quirk by then.
Help?
E.g. what does:
get_avatar($comment, '60');return ?
As far as creating invalid html to fix it, take a deeper look at it
E.g.: What does it with
<div style="clear:both;">?
Try to take elements out of the "avatar" class and see when it resolves the problem: you'll have found the statement the version of IE that's giving you trouble dislikes and a good idea of what to put in the conditional comment.
CSS can be written shorter:
padding: 5px 5px 5px 5px; -> padding: 5px;
padding:0px; -> padding: 0; /* no need for a unit on 0 */
Font Families best ens in a generic font like serif or sans:
font-family: Arial, Tahoma, Verdana; -> font-family: Arial, Tahoma, Verdana, sans
