CSS Issue with Wordpress Comments in IE8

Discussion in 'CSS' started by jhmattern, Mar 1, 2010.

  1. #1
    Readers reported a problem with my single post pages on my wordpress blog when those pages have comments. See an example here:

    http://allfreelancewriting.com/2010...se-for-publicly-sharing-your-freelance-rates/

    The comments display correctly in Firefox and Chrome, but in ie8 they're completely screwed up -- alignment is way off, they don't stay to the content area, and the're also pushing the sidebar down to the footer (not a sidebar prob in general though -- only when comments interfere and push into the sidebar's area).

    Any thoughts on how I could fix this? I haven't heard back from my usual coder that I go to for trouble-shooting so I figured I'd reach out here in the meantime. The css for the comment area on single post pages is below if that helps.

    
    .commentlist li {
    	font-weight: bold;
    }
    
    .commentlist li .avatar { 
    	border: 1px solid #eee;
    	padding: 2px;
    	background: #fff;
    	margin: 5px 0;
    }
    
    .commentlist cite, .commentlist cite a {
    	font-weight: bold;
    	font-style: normal;
    	font-size: 1.1em;
    }
    
    .commentlist p {
    	font-weight: normal;
    	line-height: 1.5em;
    	text-transform: none;
    }
    
    .commentlist {
    	text-align: justify;
    }
    
    .commentlist li {
    	margin: 15px 0 15px 0px;
    	padding: 10px;
    	list-style: none;
    	background: #def0c2;
    	height: 1%;
    	overflow: hidden;
    }
    
    .avatarplace {
    	width: 200px;
    	float: left;
    }
    .commenttext {
            float: left;
            border-left: 1px solid #593d21;
    	width: 365px;
    	padding-left: 10px;
    }
    .commentlist p {
    	margin: 10px 5px 10px 0;
    }
    .trackbacks {
    	background: #d6eaf1;
    	padding: 10px;
    }
    
    
    input, textarea {
     background-color: #ffffff;
     border: 1px #666666 solid;
    }
    
    #commentform input {
    	width: 170px;
    	padding: 5px;
    	margin: 5px 5px 1px 0;
    	background: #f5ebc8;
    }
    
    #commentform textarea {
    	padding: 5px;
    	background: #f5ebc8;
    }
    
    #commentform #submit {
    	padding: 0;
    }
    
    #commentform p {
    	margin: 5px 0;
    	font-weight: bold;
    }
    Code (markup):
    If it helps, here's the comments.php file as well.

    <?php // Do not delete these lines
    	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
    		die ('Please do not load this page directly. Thanks!');
    
    	if (!empty($post->post_password)) { // if there's a password
    		if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
    			?>
    
    			<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
    
    			<?php
    			return;
    		}
    	}
    
    	/* This variable is for alternating comment background */
    	$oddcomment = 'class="alt" ';
    ?>
    
    <!-- You can start editing here. -->
    
    <?php if ($comments) : ?>
    
    <h3><a name="comments"><img src="<?php bloginfo('stylesheet_directory');?>/images/comments.gif" alt="<?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;" /></a></h3>
    
    	<ol class="commentlist">
    
    	<?php foreach ($comments as $comment) : ?>
        <?php $comment_type = get_comment_type(); ?>
    <?php if($comment_type == 'comment') { ?>
    
    <li class="<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>"
            <?php if ($comment->comment_approved == '0') : ?>
    			<em>Your comment is awaiting moderation.</em>
    		<?php endif; ?>
             <div class="avatarplace">
                <?php comment_author_link() ?><br />
    			<?php echo get_avatar( $comment, 32 ); ?><br />
                <small><?php edit_comment_link('edit','&nbsp;',''); ?></small>
             </div>
             <div class="commenttext">
    			<?php comment_text() ?>
             </div>
    
    		</li>
    
    	<?php
    		/* Changes every other comment to a different class */
    		$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
    	?>
    <?php } else { $trackback = true; } /* End of is_comment statement */ ?>
    	<?php endforeach; /* end for each comment */ ?>
    
    	</ol>
    <?php if ($trackback == true) { ?>
    <div class="trackbacks">
    <h3>Trackbacks</h3>
    <ol>
    <?php foreach ($comments as $comment) : ?>
    <?php $comment_type = get_comment_type(); ?>
    <?php if($comment_type != 'comment') { ?>
    <li><?php comment_author_link() ?></li>
    <?php } ?>
    <?php endforeach; ?>
    </ol>
    </div>
    <?php } ?>
     <?php else : // this is displayed if there are no comments so far ?>
    
    	<?php if ('open' == $post->comment_status) : ?>
    		<!-- If comments are open, but there are no comments. -->
    
    	 <?php else : // comments are closed ?>
    		<!-- If comments are closed. -->
    		<p class="nocomments">Comments are closed.</p>
    
    	<?php endif; ?>
    <?php endif; ?>
    
    
    <?php if ('open' == $post->comment_status) : ?>
    
    <div style="padding-top:12px;"><h3 id="respond"><img src="<?php bloginfo('stylesheet_directory');?>/images/share-your-thoughts.gif" alt="Leave a Reply" /></h3></div>
    <p>All comments posted to All Freelance Writing are subject to our <a href="http://allfreelancewriting.com/comment-policy/">comment policy</a>.</p>
    
    <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
    <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
    <?php else : ?>
    
    <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
    
    <?php if ( $user_ID ) : ?>
    
    <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p>
    
    <?php else : ?>
    
    <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
    <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
    
    <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
    <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
    
    <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
    <label for="url"><small>Website</small></label></p>
    
    <?php endif; ?>
    
    <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
    
    <p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>
    
    <p><input name="submit" type="image" src="<?php bloginfo('stylesheet_directory');?>/images/submit.gif" id="submit" tabindex="5" value="Submit Comment" />
    <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
    </p>
    <?php do_action('comment_form', $post->ID); ?>
    
    </form>
    
    <?php endif; // If registration required and not logged in ?>
    
    <?php endif; // if you delete this the sky will fall on your head ?>
    
    Code (markup):
    Thanks!
     
    Last edited: Mar 1, 2010
    jhmattern, Mar 1, 2010 IP