Foros del Web » Creando para Internet » CSS »

Fallo del IE. Alguna solución?

Estas en el tema de Fallo del IE. Alguna solución? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/07/2007, 05:33
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Fallo del IE. Alguna solución?

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.
  #2 (permalink)  
Antiguo 04/07/2007, 17:35
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Fallo del IE. Alguna solución?

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!
__________________
I'm gonna start a revolution from my bed...
  #3 (permalink)  
Antiguo 05/07/2007, 07:59
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Re: Fallo del IE. Alguna solución?

Funciona!! Muchas gracias pablinff!!
  #4 (permalink)  
Antiguo 05/07/2007, 10:59
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Fallo del IE. Alguna solución?

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!
__________________
I'm gonna start a revolution from my bed...
  #5 (permalink)  
Antiguo 05/07/2007, 13:38
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Re: Fallo del IE. Alguna solución?

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%;
}

Última edición por Tigervlc; 05/07/2007 a las 13:52
  #6 (permalink)  
Antiguo 05/07/2007, 19:28
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Fallo del IE. Alguna solución?

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!
__________________
I'm gonna start a revolution from my bed...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:15.