Uninstallme

Dejo una técnica para conseguir que un elemento <a> mantenga un ancho mínimo en Internet Explorer 6. Explorer 6 no soporta la propiedad min-width, como otras muchas cosas, por lo que una vez más, hay que buscar una forma más retorcida de hacer lo que en otros navegadores se consigue con una sola declaración CSS.

Supongamos que tenemos unos botones similares a los de la siguiente imagen que, dejando de lado si es lo más correcto, vamos a maquetar como enlaces.

Ejemplo de botones

Dentro del enlace hemos colocado una etiqueta <span> que tiene el lateral izquierdo del botón como imagen de fondo. También hemos dado al <span> el padding necesario por la izquierda y derecha. En el elemento <a> hemos utilizado como imagen de fondo el resto del botón con un ancho considerable, por ejemplo 400 píxeles, para que se adapte a la longitud del texto. El objetivo es crear un estilo reutilizable para todos los botones como los de la imagen.

Ejemplo de imágenes de fondo utilizadas en el botón

Todo perfecto hasta que aparece el botón con ancho mínimo.

Botón con un ancho mínimo

Utilizando nuestra clase para botones el botón se nos quedará corto, ya que no se le ha especificado un ancho para que pueda adaptarse a diferentes longitudes de texto. La solución ideal en este caso es dar a nuestro botón un ancho mínimo para evitar utilizar una clase más con el ancho del diseño.

Añadimos este ancho mínimo al elemento <span>:


a.boton span{display: block; height: 100%; background: url(../img/btn_left.gif) 0 0 no-repeat; cursor: pointer; padding: 0 1.3636em; min-width: 5em;}

Para Explorer 6 damos como ancho el ancho mínimo, y para evitar que cuando el texto crezca se siga manteniendo este ancho, añadimos la declaración white-space: nowrap, de manera que el texto siempre se mantenga en una línea.


* html a.boton span{width: 5em; white-space: nowrap;}

Yo he utilizado el hack para IE 6 * html, que de entre los hacks CSS que se pueden usar, me parece uno de los más inofensivos por no tener compatibilidad hacia adelante, pero por supuesto, se podría haber incluido todo en una misma regla utilizando !important para el valor auto de width, plantearse al revés utilizando html>body o incluso colocar estas declaraciones en una hoja de estilo condicional para Explorer 6.

Deja tu comentario

Los campos marcados con (*) son obligatorios