Eliminar espacio entre celdas

rubencdl · #1 (**permalink**) 05/03/2008, 17:44

Buenas, me estoy volviendo loco intentando juntar dos celdas para hacer el efecto que podéis ver a continuación.
En la primera celda irá la imagen que hace el efecto del bocadillo y en la celda inferior va el comentario.

Tengo definido en la CSS lo siguiente:

Código:

table#comentario {
width : 479px;
margin : 0 0 10px 0;
padding : 0 0 0 0;
border-spacing : 0 0;
border-collapse : collapse;
}
td#comentario {
vertical-align : bottom;
border-spacing : 0;
}
div#commentcontent {
background : #ddd;
font-size : 11px;
margin : 0 0 0 0;
padding : 0 5px 0 5px;
border-left : 1px solid #aaa;
border-right : 1px solid #aaa;
border-bottom : 1px solid #aaa;
}

¿Qué puedo hacer para juntarlas? En IE se ve un poco más junto que en Firefox pero en ninguno se ve bien del todo.

Saludos.

rubencdl · #2 (**permalink**) 06/03/2008, 03:57

Venga... ¿nadie sabe qué es lo que falla?

Saludos.

juaniquillo · #3 (**permalink**) 06/03/2008, 07:57

y el html?

rubencdl · #4 (**permalink**) 06/03/2008, 09:05

Cita:

Iniciado por juaniquillo

y el html?

Perdón.

Está hecho en php (Wordpress):

Código:

<table id="comentario">
                <tr>
                <td id="comentario">
                <?php if (get_comment_type()=="comment") : ?>
	
<li class="<?php if ( $comment->comment_author_email == get_the_author_email() ) echo 'mycomment'; else echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

		<p class="commentmetadata">Escrito por <strong><?php comment_author_link() ?></strong> el <?php comment_date('j \d\e F') ?> a las <?php comment_date('g:i a') ?> | <a href="#respond">Responder</a><?php edit_comment_link('Editar',' | ',''); ?></p>
		<?php if ($comment->comment_approved == '0') : ?>
		<em>Tu comentario está pendiente de aprobación.</em>
		<?php endif; ?>
                </td>
                </tr>
                <tr>
                <td id="comentario">
                <?php if ($comment->comment_author_email == get_the_author_email()) : ?>
		<img id="nomargin" src="http://files.motorsemanal.es/comentario-autor.gif" />
                <?php else : ?>	
		<img id="nomargin" src="http://files.motorsemanal.es/comentario.gif" />
		<?php endif; ?>
                </td>
                </tr>
                <tr>
                <td>
		<?php if ($comment->comment_author_email == get_the_author_email()) : ?>
		<div id="authorcommentcontent"><?php comment_text() ?></div>
                <?php else : ?>	
		<div id="commentcontent"><?php comment_text() ?></div>
		<?php endif; ?>
                </td>
                </tr>
                </table>

Espero que no sea muy lioso descifrar el código.

La id="nomargin" de la imagen en la CSS es esta:

Código:

img#nomargin {
margin : 0 0 0 0;
text-decoration : none;
}

Saludos.

juaniquillo · #5 (**permalink**) 06/03/2008, 16:27

intenta dándole a la tabla cellpadding="0" cellspacing="0" en el html.

rubencdl · #6 (**permalink**) 06/03/2008, 17:38

Cita:

Iniciado por juaniquillo

intenta dándole a la tabla cellpadding="0" cellspacing="0" en el html.

Lo he probado y no tiene ningún efecto, pero gracias.

rubencdl · #7 (**permalink**) 06/03/2008, 17:40

Bueno, algo de efecto sí que ha tenido, en IE me lo ha juntado un poco más, quedarán como 4 pixeles de separación, pero en firefox no ha habido cambios.

Saludos.

rith · #8 (**permalink**) 06/03/2008, 18:15

mira quitale toda clase a la tabla y proba con cellspacing=0 celpadding=0 y border=0 eso te tiene que ayudart y pon las imagens y hace pruebas pero no se por que cundo combinas tablas y css con propiedades padding unos no responde y las de la tabla tampoco...

rubencdl · #9 (**permalink**) 06/03/2008, 19:19

Cita:

Iniciado por rith

mira quitale toda clase a la tabla y proba con cellspacing=0 celpadding=0 y border=0 eso te tiene que ayudart y pon las imagens y hace pruebas pero no se por que cundo combinas tablas y css con propiedades padding unos no responde y las de la tabla tampoco...

Tampoco resulta, pero gracias, ya no se que hacer, como no lo consiga pronto me voy a tener que olvidar del bocadillo para los comentarios

Saludos.

juaniquillo · #10 (**permalink**) 07/03/2008, 00:17

creo que te falta algo de css. ¿dónde están los atributos de commentmetadata y authorcommentcontent ?

rubencdl · #11 (**permalink**) 07/03/2008, 07:19

Cita:

Iniciado por juaniquillo

creo que te falta algo de css. ¿dónde están los atributos de commentmetadata y authorcommentcontent ?

Cierto, ahora los pongo.

He cambiado algo y ahora la imagen superior está de fondo en vez de estar insertada en la tabla, pero da lo mismo.

Código:

.commentmetadata {
border-left : 1px solid #aaa;
border-right : 2px solid #aaa;
border-top : 1px solid #aaa;
border-bottom : 2px solid #aaa;
font-size : 11px;
text-align : left;
padding : 2px 5px 2px 5px;
margin : 0 0 0 0;
}
table#comentario {
width : 479px;
margin : 0 0 10px 0;
padding : 0 0 0 0;
border-spacing : 0 0;
border-collapse : collapse;
}
td#comentario {
height : 30px;
border-spacing : 0;
background-image : url('http://files.motorsemanal.es/comentario.gif');
background-repeat : no-repeat;
}
td#comentario-autor {
height : 30px;
border-spacing : 0;
background-image : url('http://files.motorsemanal.es/comentario-autor.gif');
background-repeat : no-repeat;
}
div#commentcontent {
background : #ddd;
font-size : 11px;
margin : 0 0 0 0;
padding : 0 5px 0 5px;
border-left : 1px solid #aaa;
border-right : 1px solid #aaa;
border-bottom : 1px solid #aaa;
}

div#authorcommentcontent {
background : #ff7e00;
font-weight : bold;
font-size : 11px;
color: #fff;
margin : 0 0 0 0;
padding : 0 5px 0 5px;
border-left : 1px solid #aaa;
border-right : 1px solid #aaa;
border-bottom : 1px solid #aaa;
}

Saludos.

josdelaranda · #12 (**permalink**) 07/03/2008, 13:41

Hola puedes intentar esto: div#commentcontent p { margin: 0 } Saludos

rubencdl · #13 (**permalink**) 07/03/2008, 14:51

Cita:

Iniciado por josdelaranda

Hola puedes intentar esto: div#commentcontent p { margin: 0 } Saludos

Tampoco funciona, pero gracias.

Empiezo a desesperarme.

josdelaranda · #14 (**permalink**) 07/03/2008, 15:10

Prueba con esto:

Código:

<table id="comentario" cellspacing="0" border="0" celpadding="0">
	<tbody>
	<tr>
		<td> ...
		</td>
	</tr>
	<tr>
		<td> ...
		</td>
	</tr>
	<tr style="position: relative; top: -1px;">
		<td>
			<div id="commentcontent">
			<p style="margin: 0;">...</p>
			</div>
		</td>
	</tr>
	</tbody>
</table>

rubencdl · #15 (**permalink**) 07/03/2008, 17:09

Cita:

Iniciado por josdelaranda

Prueba con esto:

Código:

<table id="comentario" cellspacing="0" border="0" celpadding="0">
	<tbody>
	<tr>
		<td> ...
		</td>
	</tr>
	<tr>
		<td> ...
		</td>
	</tr>
	<tr style="position: relative; top: -1px;">
		<td>
			<div id="commentcontent">
			<p style="margin: 0;">...</p>
			</div>
		</td>
	</tr>
	</tbody>
</table>

Gracias, eso tampoco funcionó.

Pero finalmente lo he conseguido, bueno a medias, en firefox funciona bien pero en IE se sigue viendo una rayita de 1px.

Gracias a todos.

juaniquillo · #16 (**permalink**) 07/03/2008, 18:29

yo creo saber que es esa raya en IE. lee este mensaje y espero que te ayude:
http://www.forosdelweb.com/f53/ie-no...rgenes-534949/

cleft · #17 (**permalink**) 07/03/2008, 19:23

Mira, la siguiente se que no es la mejor solucion, pero para "calmar" la situacion mientras se busca implementar algo mejor:

1. Define un alto para #cabeceracomments (17px por ser la altura de la imagen)

Código:

td#cabeceracomments {
background-image : url('http://files.motorsemanal.es/comentario.gif');
margin : 0;
padding : 0;
height: 17px;
}

2. "Oculta" la imagen que has declarado en la estructura (HTML):

Código:

td#cabeceracomments img {
height: 0px;
}

En caso te funcione, seria bueno que ya mas tranquilo, pensases en buscar una mejor alternativa para esto. Recomendaria utilizar capas.

Bueno, cualquier cosa nos avisas para ayudarte en lo que podamos.

rubencdl · #18 (**permalink**) 08/03/2008, 05:52

Cita:

Iniciado por juaniquillo

yo creo saber que es esa raya en IE. lee este mensaje y espero que te ayude:

Muchas gracias

. Ahora ya funciona perfectamente en IE7, Firefox, Opera y Konqueror.

Había que ponerlo en la misma línea, aunque se haga el código un poco ilegible. Que cosas.

Saludos.

rubencdl · #19 (**permalink**) 08/03/2008, 05:55

Cita:

Iniciado por cleft

Mira, la siguiente se que no es la mejor solucion, pero para "calmar" la situacion mientras se busca implementar algo mejor:

1. Define un alto para #cabeceracomments (17px por ser la altura de la imagen)

Código:

td#cabeceracomments {
background-image : url('http://files.motorsemanal.es/comentario.gif');
margin : 0;
padding : 0;
height: 17px;
}

2. "Oculta" la imagen que has declarado en la estructura (HTML):

Código:

td#cabeceracomments img {
height: 0px;
}

En caso te funcione, seria bueno que ya mas tranquilo, pensases en buscar una mejor alternativa para esto. Recomendaria utilizar capas.

Bueno, cualquier cosa nos avisas para ayudarte en lo que podamos.

Gracias, pero ahora que he encontrado la solución que funciona no es plan de ponerse a retocar nada, ya sabes el dicho, "si algo funciona ¡no lo toques!"

Saludos.

aespinoza83 · #20 (**permalink**) 18/10/2011, 11:27

Usa esto

.subtopic1 {
display:none;
background:#FC9;
font:Verdana, Geneva, sans-serif;
empty-cells:hide;
border-collapse:collapse; <----- Con esto quitas la separacion entre celdas

}