Uninstallme

Desarrollo frontend, estándares web, accesibilidad y más

Max-width para Internet Explorer 6 sólo con CSS

Por kcmr, el 21 de Octubre de 2009 en Buenas ideas, CSS

En CSSPlay han publicado un método basado sólo en CSS válido, para emular el funcionamiento de la propiedad max-width de CSS en Internet Explorer 6.

Esta propiedad es útil para fijar un ancho máximo de página (bloque contenedor) en diseños fluidos, evitando que los bloques de texto sean demasiado largos y dificulten su lectura.

La solución quizá llega un poco tarde ahora que, ¡por fin!, el porcentaje de uso de IE 6 es menor que el de sus hermanos mayores, IE 7 y 8, y poco a poco vamos dejando de dar soporte (teniendo siempre en cuenta aquello de la degradación elegante) a este navegador.

La técnica varía según la alineación de página que se use. Para un contenedor centrado de 960 pixeles de ancho máximo, el código HTML y CSS a usar sería similar a este:

HTML

<div class="leftpad"></div>
<div class="rightpad"></div>
<div id="contenedor">
... bla bla bla ...
</div>

CSS

.leftpad{
width: 50%; float: left;
margin-right: -480px; height: 1px;
}
.rightpad{
width: 50%; float: right;
margin-left: -480px; height: 1px;
}
#contenedor{overflow: hidden;}
* html #contenedor{float: left;}
  • El alto de los bloques con el margen negativo debe ser una unidad. No funciona un porcentaje o el valor auto.
  • El margen negativo es igual a la mitad del ancho máximo del bloque contenedor, que no se declara en ningún otro sitio.

Existen otras soluciones para conseguir un ancho máximo en IE 6, basadas en Javascript o en el uso de expresiones propietarias de Microsoft.

5 comentarios

  1. Por doblefantasia, el 22 de Octubre de 2009

    Pena que no llegara hace mucho, y no sólo el max-width, también el max-height, el min-height… que, si no me equivoco, tampoco los interpreta.

    Ojalá Windows 7 termine con el “reinado de terror” de IE6, en su tiempo, un navegador revolucionario, en los últimos años, el mayor culpable de convertir en un suplicio, muchas veces, el desarrollo de páginas web.

    Me ha encantado lo de la “degradación elegante”. :-)

  2. Por kcmr, el 22 de Octubre de 2009

    Incluso yo, que me he pasado al lado oscuro de Mac, deseo que Windows 7 sea todo un éxito y acabe con IE 6!

    Aunque todos sabemos que es un Windows Vista parcheado…

  3. Por doblefantasia, el 23 de Octubre de 2009

    Es verdad, Windows 7 es, básicamente, un Windows Vista parcheado al que le han quitado todo lo chungo que le añadieron al reparchear Windows Xp para hacerlo. Pero, ojalá cale entre la gente y sea el “producto estrella” de las próximas navidades, :-) . Lo que sea por perder de vista a IE6, ese infame navegador :-) :-)

    ¿Te has pasado a MAC?¿Qué tal? Yo estoy a punto de terminar de pasarme a Ubuntu, trabajaré con Aptana, GIMP e Inkscape. Aunque tengo claro que por muchos años tendré que tener alguna partición o algún ordenador viejo con Windows, o emularlo directamente desde Ubuntu.

  4. Por kcmr, el 23 de Octubre de 2009

    Pues muy bien con el Mac. Me costó un par de semanas cogerle el aire, primero con eso de que Ctrl y Cmd estén al revés y después, acabar de asimilar lo de “todo se arrastra”. Vaya, cambiar el chip de Windows.

    Yo también estuve un tiempo usando Ubuntu y aunque me gustó bastante, le veo dos fallos bien gordos: la instalación / actualización de programas (lo de gastar el tiempo probando las distintas formas de actualizar un programa sugeridas en foros no mola) y que no tenga Photoshop. Al final, el mundo usa el formato PSD.

    Por cierto, como editor has probado Komodo Edit? A mí Aptana se me colgaba bastante.

  5. Por doblefantasia, el 24 de Octubre de 2009

    El Komodo Edit lo conocía, pero no lo había probado. Le he echado un vistacillo rápido aprovechando tu sugerencia y no está nada mal, la interfaz es más limpia que la de Aptana, pero también tiene menos opciones. A mi Aptana no se me cuelga, aunque desde luego su uso de recursos es bastante elevado. Lo que me encanta de Aptana es que tiene versiones para todos los Sistemas Operativos, o bien se puede instalar como plugin de Eclipse para quien ya lo use. Además tiene versiones para S.O. de 64 bits.

    Sobre Ubuntu aún recientemente me estoy enterando de como funciona y he visto el “rollo de las instalaciones”. Mi idea es usar Kubuntu (Ubuntu con el escritorio KDE), que se actualiza cada 6 meses, y trae todos los programas que necesito en el gestor de aplicaciones. Así que en vez de actualizar manualmente cada programa esperaré a las actualizaciones del S.O. que, a su vez, vendrá con las nuevas versiones de los programas también. El amigo que me está ayudando a pasarme a Linux me ha comentado que aparte de eso tampoco es difícil instalar manualmente un programa, si está compilado como .deb es tan fácil como un .exe de Windows. Y si no, con el terminal, al parece no es difícil compilarlo e instalarlo. En fin, espero no estar metiendo la pata con la terminología, aún estoy empezando con Linux.

    Sobre lo de Photoshop tienes razón. El mundo usa .psd,.cdr y otros. Por eso no descarto seguir utilizando Windows, bien emulado, bien en otra partición, bien en otro equipo. Pero mi sistema de trabajo quedaría enmarcado en el uso de aplicaciones de código abierto y gratuitas, lo cual es una idea que me apetece. Soy consciente de que aplicaciones como GIMP e Inkscape están por detrás de las mismas aplicaciones de Adobe, y en algunos aspectos muy por detrás, por ejemplo en GIMP aún no se pueden seleccionar varias capas al mismo tiempo y eliminarlas, tienes que ir una por una, al menos era así hace meses, no he tenido tiempo de actualizarlo últimamente. Pero por lo demás son aplicaciones perfectamente válidas. GIMP es capaz de abrir los .psd, aunque no reconoce cosas como los efectos de capa o los objetos inteligente de Photoshop. Inkscape es capaz de abrir los .ai.

    Creo que conforme están ahora las cosas es posible desarrollar para la web en un entorno de trabajo Linux. En otros campos, quizás, aún no es fácil u óptimo hacerlo.

Deja tu comentario

Campos obligatorios marcados con asterisco *