Hola!
He estado intentando crear unas cajas con una imagen de fondo. En FF funciona bien pero no en IE7 (no he mirado todavia en IE6). El problema es que IE7 agrega unos cuantos pixeles a la imagen lo que produce un salto de linea en la ultima caja.
Los divs que crean las cajas tienen todos el mismo ancho que es el ancho de la imagen. Son 4 cajas. Y en FF se ven todas la 4 cajas perfectamente alineadas en una misma linea horizontal, pero como IE7 agrega un par de pixeles a las imagenes, la ultima caja se muestra en la siguiente linea.
Este es el html:
Código HTML:
<div id="content"><!-- Start Content -->
<div id="indexBottom">
<div id="indexBottomBox1"></div>
<div id="indexBottomBox2"></div>
<div id="indexBottomBox3"></div>
<div id="indexBottomBox4"></div>
</div>
<div style="clear: both;"></div>
</div><!-- End Content -->
Y este es el css:
Código HTML:
#content {
border: 1px black solid;
width: 985px;
margin-left: 20px;
}
#indexBottomBox1, #indexBottomBox2, #indexBottomBox3, #indexBottomBox4 {
background: url(/Fixafesten/images/indexsida/greenBg.gif) no-repeat;
width: 244px;
height: 239px;
float: left;
display: block;
}
#indexBottomBox2, #indexBottomBox3, #indexBottomBox4 {
margin-left: 3px;
}
Como ven tengo puesto un margin-left en las cajas 2,3 y 4 para crear un espacio entre las cajas. Con el valor 3px todo funciona a la perfeccion en FF pero en IE7 la cuarta caja salta de linea.
Es como si FF leyera la imagen con un ancho de 244px pero IE7 245px; o mas.
Saben como puedo solucionar esto?
Gracias