Cuando dividimos un rectángulo en columnas usando procentajes pueden surgir problemas, sobre todo, en versiones de Internet Explorer inferiores a la 8 así que para responder a ese dilema trataremos de encontrar explicaciones y alguna forma de resolverlos.
Veamos otra vez el esquema mostrado en la entrada anterior:
.fdizquierda1 {float: left; width: 25%;}
.fdizquierda2 {float: left; width: 25%;}
.fdderecha1 {float:right; width: 25%;}
.fdderecha2 {float: left; width: 25%;}

<div class="footerdemo">
<div class="fdizquierda1">
<div class="footerdivs">
....... aquí irá el contenido de la izquierda .......
</div>
</div>
<div class="fdizquierda2">
<div class="footerdivs">
....... aquí irá el contenido de la izquierda .......
</div>
</div>
<div class="fdderecha1">
<div class="footerdivs">
....... aquí irá el contenido de la derecha .......
</div>
</div>
<div class="fdderecha2">
<div class="footerdivs">
....... aquí irá el contenido de la derecha .......
</div>
</div>
</div>
<div style="clear:both;"></div>
Esto, que deberíamos ver así:


en IE7 lo veremos así:


Todo es un tema de aritmética. La pantalla se mide en pixeles y los pixeles son indivisibles así que si el ancho del rectángulo no es un número divisible con exatitud, habrá un resto con el que deberemos lidiar.

Si dividimos por 3 y usamos 33% para cada uno, hay un 1% que sobra así que es difícil que haya problemas pero, si dividimos por dos, por cuatro o por algún otro número ... las matemáticas nos podrían jugar una mala pasada.

Por ejmplo, en este caso, el ancho total (el 100%) es de 635 pixeles así que si lo divido en cuatro, cada recángulo interior (el 25%) tendría que tener 158.75 pixeles cosa que es imposible ya que no existen fracciones de pixeles y el navegador redondea ese valor; me dirá que cada rectágulo interno tiene 159 pixeles y eso, hará que en IE7 no veamos uno al lado del otro sino que uno de ellos, se irá para abajo ya que:

159 + 159 + 159 + 159 = 636

¡Ese maldito pixel que sobra nos arruinará el diseño y nos volverá locos!!!

Soluciones hay varias y todas son molestas. Podemos calcular el ancho real y cambiar los porcentajes por valores absolutos teniendo en cuenta que la suma de ellos no supere el total:

159 + 159 + 159 + 158 = 635

Podemos elegir uno cualquiera de esos rectángulos internos y poner 24% en lugar de 25% o incluso poner width:24.9%; dependerá de cual sea el resto
.fdderecha2 {float: left; width: 24.5%;}
Por último, también podríamos usar un comentario condicional que agregaremos antes de </head>:
<!--[if lt IE 8]>
<style> .fdderecha2 {width:24.5%;} </style>
<![endif]-->
Así que esto, debería verse bien, incluso en IE7:
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

8 comentarios:

Jaime Trujillo Escobedo  

Hola JMiur! ¿Descubriste la nueva configuración de blogger para la moderación de comentarios? Entrada en Blogger Buzz.

¡Saludos!

Responder
JMiur  

Aquí aún no ha aparecido hasta ahora.

Responder
Graciela  

Como dicen los que dicen saben 'off topic': no te veía bien el domingo, tampoco ayer, nunca podré saber si es la compu, el navegador, blogger...cosas de misterios y magia...ahora ya recuperado te dejo, en compañía de El Doctor

Responder
JMiur  

Espero que se haya mejorado, Graciela. La PC y la salud :D

Responder
Felipe  

Me ha parecido bastante interesante el enlace que ha compartido contigo @Jaime, es mas, sería interesante (cuando este definitivamente habilitado y solo por probar) que habilitaras un par de días los comentaristas anónimos y ver que sale, porque no se, se me ocurre que si el sistema anda bien, muchos que moderamos comentarios para prevenir precisamente el Spam podríamos eventualmente volver a dejar sin moderar.

Por lo menos, yo todos los dias recibo spam en 2 entradas (siempre las mismas), y como son entradas viejitas, estoy moderando por 'entradas publicadas hace tantos días'... y aunque hoy no recuerdo haber visto aquellas nuevas pestañas, esperemos que el tradicional mensajito de "We're excited to announce" esta vez nos emocione (solo un poco) a todos. Jeje :D

Responder
JMiur  

Por ahora no hay señales de eso. Cuando lo vea te cuento aunque, sea lo que sea, no pienso cambiar el sistema.

Responder
LJK  

Hey Gracias xD por la informacion

Responder
RafaMon  

Que pena que vi esto hoy, tardé 1 semana en solucionar mi pie de página, eres el mejor.

saludos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR