Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/06/2006, 14:21
Avatar de caneva
caneva
 
Fecha de Ingreso: junio-2006
Ubicación: Sevilla (España)
Mensajes: 81
Antigüedad: 17 años, 10 meses
Puntos: 1
Capas y pixeles

¿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!