Fallo del IE. Alguna solución?

Tigervlc · #1 (**permalink**) 04/07/2007, 04:33

Hola a todos.

Quiero realizar un diseño de tres columnas flexibles (con porcentajes), pero tal y como lo hago, funciona en Firefox, pero en IE7 no sale bien.

El problema es que la columna derecha no se ajusta a su lugar. Aparece justo debajo como si no tuviera suficiente espacio en su hueco correspondiente. Y cuando voy haciendo grande o pequeña la ventana, se coloca y descoloca intermitentemente en su lugar.

Lo que hago es símplemente un reparto de porcentajes entre las tres columnas, p. ej: 25% 50% 25%. Los floats los hago así: left left right, o bien left left left, da igual. Además, aunque añada o no rellenos al contenido de esas columnas, un nivel más abajo, para separarlo de los bordes de las columnas, en ambos casos ocurre el mismo problema.

También ocurre lo mismo en el caso que haga el reparto de anchuras entre anchos de columna y rellenos al mismo nivel (el de las propias columnas). El fallo en IE7 se sigue produciendo al cambiar el tamaño, aunque en menor medida que antes. P.ej:

Código:

            col1                     col2                         col3
rell      ancho     rell      rell     ancho    rell      rell    ancho     rell
2.5%      20%      2.5%     2.5%      45%        2.5%      2.5%      45%        2.5%  -----> TOTAL: 100%

El único modo que he averiguado para solucionar este problema es restar un 1% a alguno de los anchos asignados, y de esta manera la columna derecha ya se ajusta bien en cualquier caso. Se nota poco la diferencia en el resultado en Firefox. Pero alguien sabe a qué se debe este fallo de IE y cómo solucionarlo de forma más ortodoxa? En Firefox todos los métodos anteriores salen perfectamente bien.

pablinff · #2 (**permalink**) 04/07/2007, 16:35

Ese es el grab problema con los navegadores que se rehusan a respetar los estandares de la W3C.
La solucion posible que veo yo es utilizar comentarios condicionales de IE, los cuales no estoy seguro de si siguen funcionado en IE7, si alguien lo sabe ruego que me corrija.
Bueno sería algo así:
En tu archivo.css tendrías algo así:
#Izquierda{width:25%;}
#Centro{width:50%;}
#Derecha{width:25%;}
Teniendo en cuenta de que si le sacás 1% a alguna de las columnas en IE se ve bien tendrías que poner un comentario condicional así:
En los tags <head> y </head> debés poner lo siguiente

Código:

<!--[if IE]>
<style type="text/css">
Es acá donde le tenés que sacar el 1% a alguna columna
#Izquierda{width:25%;}
#Centro{width:49%;}
#Derecha{width:25%;}
</style>
<![endif]-->

La explicación sería la siguiente:
Cuando alguien entre a la web desde algun navegador que no sea IE esos comentarios serán tomados simplemente como comentarios html, en cambio si el navegador es IE entonces ese código no será ignorado, y entonces lo que escribas ahí, pasará a ser los valores que tomen tus divs.
Espero que te sirva de ayuda.
Saludos!

Tigervlc · #3 (**permalink**) 05/07/2007, 06:59

Funciona!! Muchas gracias pablinff!!

pablinff · #4 (**permalink**) 05/07/2007, 09:59

De nada! me alegro que te haya sido de ayuda!
No olvides agregarle al título del Post algo como [Solucionado], para que los que tienen el mismo problema sepan como solucionarlo.
Saludos!

Tigervlc · #5 (**permalink**) 05/07/2007, 12:38

ok. Cómo edito el título del post?

por cierto, hay otra solución muy buena y fácil:

posicionando de forma absoluta la tercera columna, y en base a los porcentajes anteriores, situarla donde le corresponde:

si lo repartíamos antes en anchuras: 25% 50% 25%

ahora sería 25% 50%
y la tercera columna tendría esta regla CSS:

Código:

#colDer {
	position:absolute;
	left: 75%;
	top: 52px; /* altura del encabezado */
	width: 25%;
}

pablinff · #6 (**permalink**) 05/07/2007, 18:28

Ja ja ja no se me pareció que se podía editar el título, pero habrá sido en otro foro :P, con respecto al CSS, tal vez otra solución podría ser que como dijiste poner a la 1° y 2° columnas los valores respectivos, y a la 3° poner width:auto; debería funcionar sin tener que utilizar el position absolute.
Saludos!