¿Por qué si tengo una distribución es tres columnas mediante float, indicando en cada una un width determinado; Internet Explorer a diferencia de Firefox u Opera me muestra una de las columnas con un ancho diferente al indicado? ¿Qué solución tiene esto?
Ejemplo concreto:
Código:
Body
{
background: #F0F0F0 url(../img/tramado.png) repeat;
margin: 17px 0px 17px 0px; /*Superior Derecho Inferior Izquierdo*/
text-align: center; /* Para que en IE se alinee el bloque principal en el centro*/
font: 12px Verdana, "Trebuchet MS", Arial, sans-serif;
}
#tsup
{
background: url(../img/bsup.gif) no-repeat;
height: 7px;
width: 754px;
margin: auto;
}
#tinf
{
background: url(../img/binf.gif) no-repeat;
height: 7px;
width: 754px;
margin: auto;
}
#bordeEXT
{
width: 752px;
border-top: 0px;
border-right: 1px solid #B7B7B7;
border-bottom: 0px;
border-left: 1px solid #B7B7B7;
margin: auto;
}
#bordeINT
{
width: 750px;
border-right: 1px solid #3D3D3D;
border-left: 1px solid #3D3D3D;
}
#tablaprincipal
{
width: 750px;
background-color : #ffffff;
}
#tablasecundaria
{
width: 720px;
margin-left: 15px;
margin-right: 15px;
}
#seccion_index
{
background: url(../img/muestraFLASH.jpg) no-repeat;
height: 254px;
margin-top: 25px;
}
#columna_izq
{
float: left;
width: 342px;
margin-top: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
border: 0px;
padding: 0px;
spadding: 0px;
text-align:justify;
}
#columna_cen
{
float: left;
width: 342px;
background:#FF0000;
margin-top: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
border: 0px;
padding: 0px;
spadding: 0px;
text-align:justify;
}
#columna_der
{
float: left;
width: 36px;
height: 180px;
margin-top: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
border: 0px;
padding: 0px;
spadding: 0px;
}
#piepag
{
clear: both;
padding: 18px;
spadding: 50px;
}
Código:
<div id="tsup"><!-- Terminación superior --></div>
<div id="bordeEXT">
<div id="bordeINT">
<div id="tablaprincipal">
<div id="tablasecundaria">
<div id="seccion_index"></div>
<div id="columna_izq"></div>
<div id="columna_cen"></div>
<div id="columna_der"><?php include('sellos.php'); ?></div>
</div>
<div id="piepag">PIE DE PAG</div>
</div>
</div>
</div>
<div id="tinf"><!-- Terminación inferior --></div>
Si sumamos (columna_izq)342px+(columna_cen)342px+(columna_der )36px = 720px = Al ancho de #tablasecundaria, esto hace que en Firerfox y Opera las cosas cuadren perfectamente,
sin embargo en IE las dimensiones de la #columna_cen pasan de 342px a 345px por arte de magia (lo comprobé capturando pantalla y midiendo con photoshop), aunque si veo el código fuente esta en 342px O_O horrorizado me ando..... HELP!