Espacio entre div's

[the_web_saint]

Hola Compañeros, estuve buscando un tema que hablara de esto pero no lo encontre, así que decidí postearlo.

Tengo 3 imagenes que deseo desplegarlas en div, pero quiero que se visualicen sin ningun espacio entre ellas, en firefox y opera se ve excelente, en IE(como de costumbre) no, me deja un pequeño espacio entre cada div y no encuentro la razón.

La estructura de la página es la siguiente:

<div id="centro_index">
<DIV id="top_centro"></DIV>
<div id="form_centro">
<div id="imagen_centro"></div>
</div>
<div id="bottom_centro"></div>
</div>

el css que utilizo es el siguiente:

#centro_index
{
width:100%;
height:340px;
margin-top:170px;
display:table;
}
#centro_index #top_centro
{
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/top_login.jpg);
background-repeat:no-repeat;
background-position:right;
width:100%;
margin-bottom:0px;
}
#form_centro
{
margin-top:0px;
height:314px;
width:100%;
border:0px;
margin-bottom:0px;
}
#form_centro #imagen_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:313px;
background-image:url(../imagenes/center_login.jpg);
background-repeat:no-repeat;
background-position:top right;
width:354px;
float:right;
margin-bottom:0px;
}
#centro_index #bottom_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/bottom_login.jpg);
background-repeat:no-repeat;
background-position:right;
width:100%;

}

Como podran ver, me he hartado de colocar margin 0px y paddinng 0px, pero sigue igual en IE.
Podran notar que cada div tiene un tamaño especifico en pixeles de altura, esto es exactamente el tamaño de la imagen que contiene.

Muchas Gracias de antemano y espero puedan ayudarme

[guille_el3]

¿El problema es que hay espacio entre los divs o entre las imágenes?(estoy pensando que tienes las tres imágenes en un div)

prueba poniendo esto al comienzo del .css

* { padding:0; margin:0; }


para que le quite los márgenes y paddings por defecto a ver como funciona.
Luego avisa!

Saludos
Guille

[the_web_saint]

Bueno ya lo he solucionado, aqui les dejo la modificación:

#centro_index
{
width:100%;
height:340px;
margin-top:170px;
display:table;
}
#centro_index #top_centro
{
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/top_login.jpg);
background-repeat:no-repeat;
background-position:bottom right;
width:100%;
margin-bottom:0px;
}
#form_centro
{
margin-top:0px;
height:314px;
width:100%;
border:0px;
margin-bottom:0px;
}
#form_centro #imagen_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:100%;
background-image:url(../imagenes/center_login.jpg);
background-repeat:no-repeat;
background-position:top right;
width:354px;
float:right;
margin-bottom:0px;
}
#centro_index #bottom_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/bottom_login.jpg);
background-repeat:no-repeat;
background-position:top right;
width:100%;

}

basicamente con eso se ve igual en opera, mozilla y IE.

[Mikmoro]

Es decir, como bien te ha dicho guille_el3, el espcio no estaba entre los divs sino entre las imágenes

Mikel.

[the_web_saint]

Hola:
Bueno si, el espacio estaba entre las imagenes jeje.

ahora tengo una pregunta
Como puedo hacer para centar verticalmente una tabla dentro de un div?

Gracias!

[Mikmoro]

¿Tabla y div tienen tamaños definidos? ¿serán dinámicos? ¿uno sí y el otro no? Hay que procurar ser preciso en las preguntas para conseguir respuestas útiles.

Mikel.

[the_web_saint]

Bueno Mikel, la pregunta es que si hay alguna forma de alinear verticalmente una tabla dentro de un div, digamos que el div no es dinamico y posee una altura especifica; mientras que la tabla se genera de forma dinamica. He leido que utilizan una tabla de un solo td para contener la tabla dinamica, y la tabla contenedora le aplican la propiedad vertical-align:middle, pero no es posible hacer algo similar pero con un div como contenedor?
Gracias y disculpa.

[Mikmoro]

No tengo nada que disculparte: te lo digo porque cuanto más concretes la pregunta mejores repuestas puedes obtener.

Puedes usar el mismo truco haciendo una tabla que ocupe el 100% de alto y de ancho que el div, en ella colocas una única celda con align="middle" y dentro de ese td tu tabla dinámica:

<div id="contenedor">
<table border="0" width="100%" height="100%">
<tr>
<td valign="middle">
<table height="60%" border="1">
<tr>
<td>adjhadgjaj</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Espero que te sirva.

Mikel.