Foros del Web » Creando para Internet » CSS »

Eliminar espacio entre celdas

Estas en el tema de Eliminar espacio entre celdas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/03/2008, 17:44
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Eliminar espacio entre celdas

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.
  #2 (permalink)  
Antiguo 06/03/2008, 03:57
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

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

Saludos.
  #3 (permalink)  
Antiguo 06/03/2008, 07:57
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Eliminar espacio entre celdas

y el html?
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #4 (permalink)  
Antiguo 06/03/2008, 09:05
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por juaniquillo Ver Mensaje
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.
  #5 (permalink)  
Antiguo 06/03/2008, 16:27
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Eliminar espacio entre celdas

intenta dándole a la tabla cellpadding="0" cellspacing="0" en el html.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #6 (permalink)  
Antiguo 06/03/2008, 17:38
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por juaniquillo Ver Mensaje
intenta dándole a la tabla cellpadding="0" cellspacing="0" en el html.
Lo he probado y no tiene ningún efecto, pero gracias.
  #7 (permalink)  
Antiguo 06/03/2008, 17:40
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

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.
  #8 (permalink)  
Antiguo 06/03/2008, 18:15
 
Fecha de Ingreso: febrero-2008
Mensajes: 31
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Eliminar espacio entre celdas

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...
  #9 (permalink)  
Antiguo 06/03/2008, 19:19
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por rith Ver Mensaje
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.
  #10 (permalink)  
Antiguo 07/03/2008, 00:17
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Eliminar espacio entre celdas

creo que te falta algo de css. ¿dónde están los atributos de commentmetadata y authorcommentcontent ?
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #11 (permalink)  
Antiguo 07/03/2008, 07:19
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por juaniquillo Ver Mensaje
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.

Última edición por rubencdl; 23/03/2008 a las 20:45
  #12 (permalink)  
Antiguo 07/03/2008, 13:41
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Hola puedes intentar esto: div#commentcontent p { margin: 0 } Saludos
  #13 (permalink)  
Antiguo 07/03/2008, 14:51
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por josdelaranda Ver Mensaje
Hola puedes intentar esto: div#commentcontent p { margin: 0 } Saludos
Tampoco funciona, pero gracias.

Empiezo a desesperarme.
  #14 (permalink)  
Antiguo 07/03/2008, 15:10
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: Eliminar espacio entre celdas

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>
  #15 (permalink)  
Antiguo 07/03/2008, 17:09
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por josdelaranda Ver Mensaje
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.
  #16 (permalink)  
Antiguo 07/03/2008, 18:29
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Eliminar espacio entre celdas

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/
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #17 (permalink)  
Antiguo 07/03/2008, 19:23
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Eliminar espacio entre celdas

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.
  #18 (permalink)  
Antiguo 08/03/2008, 05:52
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por juaniquillo Ver Mensaje
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.
  #19 (permalink)  
Antiguo 08/03/2008, 05:55
 
Fecha de Ingreso: marzo-2008
Mensajes: 14
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eliminar espacio entre celdas

Cita:
Iniciado por cleft Ver Mensaje
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.
  #20 (permalink)  
Antiguo 18/10/2011, 12:27
Avatar de aespinoza83  
Fecha de Ingreso: octubre-2011
Ubicación: Tijuana, Baja California, Mexico
Mensajes: 1
Antigüedad: 6 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Eliminar espacio entre celdas

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

}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:42.