Webmaster Libre

Las propiedades min-width y min-height nos permiten establecer un tamaño mínimo para el ancho y el alto de una capa u objeto, respectivamente. Esto tiene sentido en los navegadores más estrictos donde width y height son valores exactos para la anchura y altura pero cuando mostramos la página en Internet Explorer suceden cosas “raras”:

1. Las propiedades height y width son interpretadas como min-height y min-width, es decir, si el contenido es más grande que el contenedor este se adaptara para albergarlo.
2. Min-height y min-width no se entienden y por tanto se ignoran

En aNieto2k se ha publicado hoy un enlace a un hack que nos ayudará a solucionar este problema, nada que no pudiésemos hacer ya con otros trucos de los que ya hemos hablado, no obstante es interesante y bastante limpio para ser un hack: Min-Height Fast Hack por Dustin Diaz

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

Como el Explorer no entiende la marca !important, la ignora y continua tomando valores. Por tanto funcionará hasta que se arregle el fallo en versiones nuevas pero esperemos que llegados a ese momento también funcione min-height.

Supongo que no hace falta decirlo pero: también funciona con min-width

Supongo que todos sabemos lo difícil que puede resultar conseguir que nuestras páginas se vean bien en todos los navegadores, en múltiples ocasiones nos vemos forzados a usar fragmentos de código propietario, que rompen con la validación, para conseguir efectos sencillos en determinados navegadores (no miro para ninguno…).

Por suerte, tenemos a nuestra disposición diversos mecanismos para facilitarnos, en la medida de lo posible, la labor de obtener páginas compatibles con todos los navegadores y que validen contra los estándares web.
(más…)

Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior.

No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto.

En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página.

Creamos un contenedor al que daremos la propiedad display: table

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }

Creamos un segundo contenedor al que daremos la propiedad display: table-cell y sobre el que aplicaremos el centrado vertical-align: middle;

.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }

Y finalmente, creamos el que será nuestro contenedor centrado verticalmente, al que también daremos margin: 0 auto para centrarlo horizontalmente.

.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}

Centrado Vertical con CSS, ejemplo 1

Pero, claro, el Explorer no entiende estas simples instrucciones y, por tanto, se hace necesario emplear algunos trucos para conseguir un resultado compatible con la mayor parte de los navegadores.

Para ello, vamos a evitar utilizar el hack del guión bajo y, en su lugar, vamos a aprovechar un fallo del explorer para producir un CSS válido.

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}

.contenedor[class] {
position: fixed;
display: table;}

.centrado {
position: absolute;
top: 50%;}

.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}

.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}

El selector .contenido[class] es exactamente lo mismo que .contenido pero IExplorer ignora todos los selectores de atributo, lo cual nos permite introducir las instrucciones pertinentes para los navegadores más avanzados (como Firefox o Safari) sin que interfieran con el surrealista navegador de Microsoft.

Centrado Vertical con CSS, ejemplo 2