I love the new comments structure churned out by
<?php wp_list_comments(); ?> but as a theme developer it's a vile, unholy mess, a sea of divs.
Nearly all of those divs are unnecessary.
The source code looks horrible and is a nightmare to figure out. Perhaps it could be output more graciously? :-)
Anyhow, here's my suggestion for the basic layout of comments. I've removed all unnecessary divs. I've left all classes the same except for adding in a class for paragraph tags. Everything can be styled. It's just a simplified, cleaner version of what already exists.
The image with a class of avatar can be positioned absolutely or relatively e.g to the left
The cite class now contains the span, and can be positioned anywhere.
The div with the class commentmetadata is now a paragraph element.
Ordinary paragraph elements are given the class of comment-text.
The div with a class of reply is now a paragraph element with the class of reply.
And that's all we need, one div after another, with the depth and parent classes added in appropriately. What could be simpler? I could style that to make it look exactly as I wanted, effortlessly.
<div id="div-comment-19 depth-1" class="comment-body"> <img alt='' src='http://www.gravatar.com/avatar/3c75ee3ac5e?s=32& class='avatar avatar-32 photo' height='32' width='32' /> <cite class="fn">fifth comment <span class="says">says:</span> </cite> <p class="comment-meta commentmetadata"><a href="http://www.mysite.com/mypost/comment-page-2/#comment-19">February 24, 2010 at 6:29 pm</a> <a class="comment-edit-link" href="http://www.mysite.com/wp-admin/comment.php?action=editcomment&c=19" title="Edit comment">(Edit)</a></p> <p class="comment-text">Some text</p> <p class="comment-text">Some text</p> <p class="comment-text">Some text</p> <p class="reply"> <a rel='nofollow' class='comment-reply-link' href='/mypost/comment-page-2/?replytocom=19#respond' onclick='return addComment.moveForm("div-comment-19", "19", "respond", "110")'>Reply</a></p> </div>