Problema de espacios entre filas de tabla

[de-troit]

Hola Foreros, tengo un problema al cuál no le he logrado descubrir el detalle. Tengo un formulario en donde cada campo y su input va dentro de una fila de una tabla, este se ve excelente en Firefox, pero en Chrome y Explorer no.

Lo que pasa es que para poner un espacio entre filas de una tabla añadí la propiedad: padding-bottom: 3px, pero en los navegadores que se ve mal se ve mucho más ancho el espacio, de hecho, al poner esta misma propiedad en 0px, en Firefox se ve sin espacio pero en los demás con el mismo espacio que cuando le ponía 3px, les dejo una captura de ambas situaciones y el formulario en .rar para que puedan descargarlo y analizarlo completamente.

Con el zorrito se ve así:



Y con Chrome así (con Explorer algo similar):



Cabe mencionar que el formulario se abre dentro de un LightBox y que si reseteo las propiedades CSS con un reset.css.

Bueno, les dejo el .rar con todo para que lo examinen, saludos!

Descargar: www.neoproyex.com/pruebas/CCBForm.rar (libre de virus)

Ojalá me puedan ayudar, muchas gracias :)

[PrendekZ]

No eh entendido bien,

Pero lo que parece es que quieres espacio abajo de los botones de Enviar y limpiar?

Bueno al contenedor de todo agregale la siguiente función CSS:

div{
overflow:hidden;
padding:0 0 5px 0;
}

Hay tienes arreglado lo de la barra espaciadora y lo del padding.

Explicate mejor para ayudarte, Saludos!

[de-troit]

El problema es el espacio entre filas de la tabla que contiene los elementos del form. La estructura es algo como:

nombreCampo | input
nombreCampo | input
.
.
.
nombreCampo | input

Tal como se ve en el formulario (los bordes no son visibles pero es cosa de imaginarselos)

Saludos!

[PrendekZ]

Bueno hablas de que los input text estan pegados verticalmente?

Si es así, agregale al input text un class llamado "spacing" o como quieras.

input.spacing{
display:block;
padding:5px 0;
}

Puedes modificar el nombre de la clase pero modifica tanto el del input como el de CSS, si tienes problemas enviame un Privado.

Saludos!

[de-troit]

Creo que no me haz entendido, el problema es el espacio entre filas.

Quiero que se vea como en la primera imágen (firefox) en todos los navegadores. Compara las 2 imágenes, fíjate en el espacio entre filas 'table tr'.

Saludos!

[jomaruro]

Hola:

Iniciado por PrendekZ

si tienes problemas enviame un Privado.

No me parece correcto utilizar los MP para resolver dudas planteadas, el foro el público y donde aprendemos unos de otros.

Saludos.

[de-troit]

Algún tipo de ayuda para mi problema?
Saludos!

[masterojitos]

Seria mas sencillo si mostraras la tabla y el css de la tabla.

por cuasualidad has puesto todo esto:
<table cellspacing="0" cellpadding="2">....</table>

Si aun asi persiste el problema, me indicas y recurremos al css ^^

Suerte

[masterojitos]

Me descargue tu archivo :S

Y creo que tu problema es que en el css formStyle.css, exactamente en la linea 77, tienes esta clase:

Código CSS:

table td {
    padding-bottom  : 3px !important;
}
 

Ese padding es muy distinto en un navegador que en otro... asi que si deseas arreglarlo deberas cambiar algo en ese css o podrias usar un css para cada navegador ^^

Suerte

[de-troit]

Iniciado por masterojitos

Me descargue tu archivo :S

Y creo que tu problema es que en el css formStyle.css, exactamente en la linea 77, tienes esta clase:

Código CSS:

table td {
    padding-bottom  : 3px !important;
}
 

Ese padding es muy distinto en un navegador que en otro... asi que si deseas arreglarlo deberas cambiar algo en ese css o podrias usar un css para cada navegador ^^

Suerte

El problema es que al darle valor 0px a esa misma propiedad, en chrome y explorer se sigue viendo con espacio entre filas :S

Por medio de Javascript podría hacerle modificaciones al CSS dependiendo del navegador, pero el problema es que no sé cómo hacer que se vea el espacio entre filas iguales, o también, hacer que no haya espacio (padding-bottom: 0px), porque no he logrado conseguirlo.

Iniciado por masterojitos

por cuasualidad has puesto todo esto:
<table cellspacing="0" cellpadding="2">....</table>

Si aun asi persiste el problema, me indicas y recurremos al css ^^

Al crear la tabla puse:

<table cellpadding="0" cellspacing="0" border="0">
.
.
.
</table>

Bueno, supongo que lo viste al descargar el archivo =P, pero lo digo porsi acaso.

Saludos! Muchas gracias por responder :)

[masterojitos]

Iniciado por masterojitos

Me descargue tu archivo :S

Y creo que tu problema es que en el css formStyle.css, exactamente en la linea 77, tienes esta clase:

Código CSS:

table td {
    padding-bottom  : 3px !important;
}
 

Ese padding es muy distinto en un navegador que en otro... asi que si deseas arreglarlo deberas cambiar algo en ese css o podrias usar un css para cada navegador ^^

Suerte

Yo cambie esa linea y le puse:

Código CSS:

table td {
    padding-bottom  : 0px !important;
}
 

Y si se quito el espacio.... tienes que jugar con esa clase...

Saludos ^^

[de-troit]

Estás seguro? porque a mi me sigue apareciendo el espacio al ponerlo en 0px (en Firefox se ve sin espacio) :S
Revisaste en Chrome y Explorer?

Saludos y gracias!