Poner imágenes como borde de una caja de comentario

[DDrDark]

Hola!, estoy tratando de ponerle bordes redondeados a las cajas de los comentarios (en wordpress). Pensé que sería fácil, incluso creo que estoy bastante cerca de lograrlo pero tengo un pequeño problema. Podéis verlo en vivo AQUI

Como se observa, me sale una línea entre medio.. y no se como sacarla! probé 1001 maneras, que si padding-top, que si padding, que si margin, con diferentes valores (negativos también), quitandolos, etc... y es que yo creo que algo me lo está "jodiendo" pero no tengo ni idea que pueda ser. Os pego la parte del php y el css

Archivo comments.php:

Código PHP:

 <div class="comenarriba" style="min-height: 50px;" ></div>

<div class="comenbody" style="min-height: 2px; background-color: #f4fbff; padding: 0px;">

<img src="<?php gravatar("R", 60, "http://www.blueblog.org/wp-content/nogravatar.png"); ?>" alt="" align="left" border-width="0"/>

<p style="margin-left: 15px; text-align: left;">  Autor: <b><?php comment_author_link() ?></b> el <?php comment_date('d.m.y') ?> @ <?php comment_time() ?> <?php edit_comment_link(__("e"), ''); ?><?php comment_text() ?></p>

<p class="post-footer" style="margin-bottom: 0px; padding-left:0px;"></p>

<div class="comenabajo" style="min-height: 60px;"></div>  

Archivo style.css (El completo podéis verlo aquí)

Código:

.comenarriba {
	background: url(comentop.png) no-repeat top center;
	padding-bottom: 1px;
}
.comenbody {
	background: url(comenbody.gif) repeat-y;
	padding-top: 0px;

	margin-top: 0px;
}
.comenabajo {
	background: url(comenbot.png) no-repeat bottom;
	padding: 1px 1px 0 0;
	text-align: right;
	font: .65em Verdana, sans-serif;
}

[yogiri]

Asi funca en los 2:

HTML:

Código:

<div id="contenedor">

    <div id="post">
        <div id="encabezado">
        </div>
        <div id="cuerpo">
            Contenido
        </div>
        <div id="pie">
        </div>
    </div>

    <div id="post">
        <div id="encabezado">
        </div>
        <div id="cuerpo">
            Contenido mas grande
            <ul>
                <li>Tema uno</li>
                <li>Tema dos</li>
                <li>Tema tres</li>
                <li>Tema cuatro</li>
            </ul>
        </div>
        <div id="pie">
        </div>
    </div>

</div>

CSS:

Código:

#contenedor{
position:relative;
text-align:center;
margin-top:100px;
margin-left:0px;
}


#post{
position:relative;
width:470px;
height:auto;
margin-bottom:150px;
margin-left:auto;
margin-right:auto;
}


#encabezado{
position:absolute;
top:-50px;
left:0px;
background-image: url(imag/comentop.png);
background-repeat:no-repeat;
width:470px;
height:50px;
}
#cuerpo{
position:relative;
text-align:left;
background-image: url(imag/comenbody.gif);
background-repeat:repeat-y;
width:470px;
height:auto;
}
#pie{
position:absolute;
left:0px;
background-image: url(imag/comenbot.png);
background-repeat:no-repeat;
width:470px;
height:80px;
}

Estan centrados a modo de ejemplo, acordate que para que funcionen la posicion del elemento que los contiene a todos (en mi caso hice un div "contenedor") debe tener la posicion seteada, ya sea relativa o absoluta, ya que si no esta seteada se comportara de diferente manera en los diferentes exploradores.

Espero te sirva, saludos!

[DDrDark]

Muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuchi iiiiiiiiiiiiiiiiiiiiiiiiisimas gracias!!!!!!!!!!!!!! me ha funcionado perfecto!, ahora solo tengo que pulirle algunos detalles como margin, etc para que quede bien lindo!

GRACIAS NUEVAMENTE!!

[lsnr_27]

oye dime este es un sistema de comentarios para tu web ??