Comment List Stylng

[oswegan]

I have searched and searched for this in, but haven't found it.

My comments are very close together on my template and I am simply trying to separate each comment in the list with a space or a line or alternating colors. Just somerhing to separate them. Where in the code do I make those kinds of adjustments?

Here is the site so you can see what I mean: http://www.oswegan.com

[oswegan]

I have tried changing just about everything in my CSS stylesheet. The comment related code looks like this

#info-comments {
text-align:left;
padding:15px 25px 15px 25px;
background:#dfdfdf;
}

#info-addcomment {
text-align:left;
padding:15px 25px 25px 25px;
background:#d4d4d4;

/* Comments */

#comments-wrapper {

text-align:left;
padding-left:10px;
padding-right:10px;
}

#commentbox {
margin:0px auto;
}

#comment-top {
padding:20px 5px;
color:#FFF;
}

#comments {
margin:0px auto;
text-align:left;
}

#comment-top h2 {
font-weight:normal;
letter-spacing:2px;
font-size:11px;
text-transform:uppercase;
text-align:center;
}

#comment-middle h2 {
font-weight:normal;
letter-spacing:2px;
font-size:11px;
text-transform:uppercase;
}

#comment-middle {
padding:20px 0px;
margin-bottom:7px;
}

#addcomment {
text-align:left;
width: 100%;
float: left;
margin-top: 5px;
}

[oswegan]

Actually, here is the comment list code. I saw the thread below and am trying to see if that helps.

}

#image_comments {
width:55%;
float:right;
margin-top:8px;
margin-bottom:15px;
padding: 0 5px 15px 15px;
/*border-left:1px solid #999;*/
text-align:left;
background:#eee;
font: 9px/14px verdana, Helvetica, Arial, sans-serif;

}

#image_comments ul {
padding:0px;
margin:0px;
list-style:none;
}

#image_comments li {
color:#666;
margin:0px 0px 15px 0px;
padding-left:16px;
background: url(../images/comment.gif) no-repeat;
}

#image_comments h5 {
margin:15px 0 10px 0;

[dhdesign]

I've looked at your source code, and there is one minor change you need to make in your image_template.html in order for the css to work properly for the comments.

Change: <div id="info-comments">

To this: <div id="image_comments">

Then reupload your image_template.html file to the proper folder on your server.

Go back to your blog and check - the comments should display the way the stylesheet is set up, there should be spaces between them now.

[oswegan]

I was just looking at that. I'm not sure where that is pointing for it's information.

[oswegan]

That didnt work either. I think I have changed about everything but it doesn't move anything around at all - very odd.

[dhdesign]

Okay, put that div name back the way it was ( <div id="info-comments"> ).

Go to your css file and change #image_comments ul and #image_comments li to #info-comments ul and #info-comments li, then check it again.

[oswegan]

I did that - nothing.

Then I changed up the ul and li a bit and still nothing.

It must be getting its formatting somewhere that I can't get to - not sure where this "info-comments" is but there's also and "info-exif"

[oswegan]

This is what it looks like:

</div>
<div id="info_thumb">
<IMAGE_THUMBNAIL_NO_LINK>
</div>
<div style="clear:both;"></div>
<p><IMAGE_NOTES></p>
</div> <!-- info-exif -->

<div id="info-comments">
<h3>And The Critics Said...</h3>
<IMAGE_COMMENTS>
</div> <!-- info-comments" -->
<div id="info-addcomment">
<h3>You Eloquently Responded...</h3>

<div style="display:inline;margin:0;width:50%;"><!--prevents unwanted spacing-->
<form method='post' action='index.php?x=save_comment' name='commentform' accept-charset='UTF-8' style="display:inline;margin:0;">
<label for="name">Name</label><br>
<input type='text' name='name' class='formfield' value='<VINFO_NAME>' id="name"/><br>
<label for="email">Email (Not shared or displayed)</label><br>
<input class='formfield' type='text' name='email' value='<VINFO_EMAIL>' id="email"/><br>
<label for="url">Website URL (So I can visit you)</label><br>
<input type='text' name='url' class='formfield' value='<VINFO_URL>' id="url"/><br>
<input name='vcookie' type='checkbox' id="saveinfo" value='set' checked="checked" />
<label for="saveinfo">save user info</label><br /><br />
<label for="comment">Comment:</label><br>
<textarea name="message" rows="4" cols="24" onfocus="clearBox(this);" class="formfield"></textarea></p>
<input type='submit' value='Say It' class="formbutton"/>
<input type='hidden' name='parent_id' value='<IMAGE_ID>' />
<input type='hidden' name='parent_name' value='<IMAGE_NAME>' />
<input type="hidden" name="withthankyou" value="no" />
</form>
</div><!--END prevents unwanted spacing-->

[oswegan]

In the CSS there is an "info" section. the comment part looks like this:

}

#info-comments {
text-align:left;
padding:15px 25px 15px 25px;
background:#dfdfdf;

[dhdesign]

On your image_template.html file, change the div name back the way it was ( <div id="info-comments"> ). I just checked your site, and you still have the div name as "image_comments".

Once you've done that, then do the CSS changes I recommended in post #7. Reupload both the image_template.html file and the css file to their respective folders on the server. Then clear your cache, and check your site again.

Let me know when you've done this and I'll check it from my end.

[dhdesign]

Okay, I've just checked, and the changes that you made to the CSS file for the light style are indeed working - your comments display with the styles indicated for the ul and li.

Now make the same changes to the CSS file for the dark style, and you should be good to go!

[oswegan]

done

[oswegan]

The ul and li might look like it's there but when I make changes to it on the css, to put in a space or line or whatever, nothing happens.

[dhdesign]

You have to make the same changes to the dark.css file as well.

The only one that's been changed so far is the light.css file, and those changes were showing up correctly.

[oswegan]

did that

but still none of the changes I make to the li and ul code do anything.

All I am really trying to do is put some separation between comments.

[dhdesign]

What browser are you using to view your site? I've checked it using both Firefox and Opera and the changes are there in those browsers. However, when I check it in IE6, the changes are NOT there.

Don't make any more changes just yet - I'm going to do a couple of screenshots to show you what both styles look like in Firefox so you know what I'm talking about.

[oswegan]

I had to move this up into the "info" section underneath "info-comments"

#info-comments ul {
margin-bottom:10px;
}

#info-comments li {
margin-bottom:10px;
}

[oswegan]

well I'm in IE6 at my office right now so maybe that's it.

I use FF at home on the mac

[dhdesign]

The last set of changes (margin-bottom: 10px) to both the ul and li tags added space below the comments in IE, but the .gif image to replace the bullet isn't showing up in IE.

Here's the screenshots from Firefox:

http://www.kpimages.net/screenshots/oswegan-light.jpg

http://www.kpimages.net/screenshots/oswegan-dark.jpg

[oswegan]

Thanks so much for all of your help! I think I have it dialed in now.