Tag Archives: CSS

Atributo min-height en IE6

Hay algunos navegadores antiguos (IE6 por supuesto) que no soportan algunas propiedades interesantes de CSS como el min-height, que dice cual debe ser la altura minima que debe tomar un elemento.

Afortunamente, hay hacks para solventar este problema, el más simple (solo involucra CSS y no hay que hacer ningún cambio en el HTML) de todos es el siguiente:

selector {
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

IE6 no sabe que significa el !important, por lo que la altura no será automática sino de 500px. El resto de navegadores (los buenos como Firefox, Chrome, Opera… y bueno, también IE7) si harán un render correcto.

Pueden encontrar más información al respecto aquí.

CSS: Reemplazar texto con imágenes

El método más simple que he encontrado para reemplazar texto con imágenes, por ejemplo, para hacer más vistosos los títulos en una web y no perder la semántica del HTML, es el de text-indent (creado por Mike Rundle).

Solo se necesita:

h1 {
  text-indent: -9000px;
  background: url(image.jpg) no-repeat 0 0;
  width: 200px; /* Ancho de la imagen */
  height: 80px; /* Alto de la imagen */
}

Lo encontré en esta presentación super intersante sobre tipografía para Web.