[pixzeto]

Hey ppl

I have added rounded corners to the comments on my site (using tables and CSS). It looks nice on Opera 9, but not as good on IE 6, as there is a kind of 1px width line on top of the corner images.

See the page here

Here's the HTML code for the comments:

Code:

<!-- Comment -->
<center>
<table class="comment" cellpadding="0" cellspacing="0">
	<tr>
	<tr class="commentinfo">
		<td class="comment-1i">&nbsp;#{comment-iteration}</td>
		<td>
			Por <b>{author}</b> el {date}:
		</td>
		<td class="comment-1d"></td>
	</tr>
	<tr>
		<td></td>
		<td class="commentcontent">
			{comment}
		</td>
		<td></td>		
	</tr>
	<tr>
		<td class="comment-2i"></td>
		<td></td>
		<td class="comment-2d"></td>
	</tr>
</table>
</center>
<br />

And here's the CSS:

Code:

.comment		{ width: 586px; background-color:#8DEF95; color:#666; margin: 0; padding: 0; }
		.comment-1i	{ width: 26px; height: 16px; text-align: center; font-weight: bold;
					background-image:url("/sitioy/img/comentario_1i.gif"); background-position: top left; background-repeat: no-repeat; }
		.comment-1d	{ width: 12px; height: 16px; background-image:url("/sitioy/img/comentario_1d.gif");
					 background-position: top right; background-repeat: no-repeat; }
		.comment-2i	{ width: 26px; height: 12px; background-image:url("/sitioy/img/comentario_2i.gif");
					 background-position: bottom left; background-repeat: no-repeat; }
		.comment-2d	{ width: 12px; height: 12px; background-image:url("/sitioy/img/comentario_2d.gif");
					 background-position: bottom right; background-repeat: no-repeat; }

	.commentinfo	{ font-size: 12px; vertical-align: top; }
		.commentinfo A:link		{ color: #666; text-decoration: none; }
		.commentinfo A:visited	{ color: #666; text-decoration: none; }
		.commentinfo A:hover	{ color: #666; text-decoration: underline; }
		.commentinfo A:active	{ color: #666; text-decoration: underline; }
	.commentcontent	{ font-size: 12px; }
		.commentcontent A:link		{ color: #FFF; text-decoration: none; }
		.commentcontent A:visited	{ color: #FFF; text-decoration: none; }
		.commentcontent A:hover		{ color: #FFF; text-decoration: underline; }
		.commentcontent A:active	{ color: #FFF; text-decoration: underline; }

I also uploaded a screenshot.

Help me with it please. I just can't find what's wrong.

Thanks,
Pixzeto

[pkcidstudio]

try
border="0"
let me know if this works

[Spaced]

If you can't get it to work try getting rid of your tables all together and using Nifty Corners

[pixzeto]

I tried with border: none; and border: 0; but none seems to work.

What else do you suggest me?

[JonnyBee]

I don't think its either your css or html... probably more the way in which IE renders tables.. try the making design using<div> tags instead of tables for much more flexibilty