El otro día, revisando visitas me encuentro que habia unas cuantas de MSDN …cuando llego a la página en cuestión, encuentro una especie de ZenGarden, llamado ZenTek… Seguí investigando, y llegue a un documento donde Microsoft, muy orgullosos obviamente, presenta este skin para Zen Garden (se acordaron un poco tarde de los standards muchachos).

La cuestión es que es eso nomás: un estilo para Zen Garden. Lo irónico es que Microsoft, al arrasar el mercado de navegadores desde hace unos años, siempre se mostró completamente desinteresado e indiferente a la usabilidad y los standards, total, tienen el porcentaje más grande del mercado.

En el artículo se vanaglorian básicamente de 3 ideas:

1. El uso de las pseudoclases del tag a para hacer rollovers simples (a:hover).
2. La utilización de position:fixed; y position:static; en la hoja de estilos para armar un layout similar a los frames.
3. El soporte a las imágenes del formato PNG (que soportan un canal alpha y permiten hacer trnasparencia con el fondo).

Repasemos esos puntos:

1. Punto 1: Nada nuevo: de hecho, yo he diseñado con rollovers, pero tuve que forzarlos siempre al tag a, ya que el explorer actual no soporta pseudoclases a otros elementos, como si lo hace el Mozilla.
2. Punto 2: sólo la aplicación de las ventajas de diseño en CSS, que Microsoft siempre maneja a su antojo en cuanto a soporte.
3. Punto 3: los PNG son archivos muy versátiles, Mozilla los soporta hace rato, y uno de los últimos en dar ese soporte es justamente Microsoft, en su tan esperado "Explorer 7".

Bueno, acá viene la parte divertida

Si bien ya he probado que todo lo que MS anuncia como una novedad total y revolucionaria, lo vienen haciendo otros browsers mucho más estables como el Mozilla, la frutilla del postre es cuando vemos su pagina ZenTek en Explorer 6.0.2900:

SORPRESA! El explorer 6 no muestra bien el mismo estilo que Microsoft plantea como usable… patético!

Y como era de esperar, nuestro amado Firefox, que muestra perfectamente bien a Zentek. 

Conclusión 

Evidentemente, hay avances de MS hacia el soporte de standards, pero me parece increiblemente irónico e incomprensible, que haya que esperar que salga la versión 7 de Explorer, para ver su 'demo' de usabilidad, ya que ni en su propio browser actual puede verse.

Larga vida a Firefox.

Bueno, finalmente me he decidido a escribir el primer tutorial sobre xhtml.  Esto no pretende ser "la solución", sino un aporte propio y muy simple, para solucionar un problema habitual en el uso de xhtml strict.

Entendiendo el Layout

En el caso problema que voy a desarrollar, contamos con los siguentes <divs>:

•  #HEADER: es el encabezado del documento, y esta a lo ancho del mismo, así que no nos molesta de momento para nuestro problema.

 
En la parte del cuerpo en si:

1.  #MENU1: Es una de las partes del problema: tiene una altura fija, y cuando lo que vamos a mostrar en #CONTENIDO es menos alto que este, el #PIE del documento nos queda inmediatamente donde termina el contenido a mostrar, quedando así el menú de la izquierda más alto que la parte central (figura 1). Esto se debe a xhtml strict usa lo mínimo necesario para mostrar el contenido, y colapsa la altura del <div> al mínimo posible.
2. #CONTENIDO: Es la segunda parte del problema, ya que si el contenido a mostrar no es suficiente para cubrir la altura del menu izquierdo, lo que va a pasar es que el #PIE se muestre muy arriba, y no queremos que eso pase.
3. #MENU2: Tiene ancho fijo y altura variable, pero no nos importa, ya que utiliza el fondo del BODY, entonces no hay problema en que sea mas o menos alto que #CONTENIDO.
4. #PIE: mediante el tag clear:both; hacemos que se ubique inmediatamente debajo de #CONTENIDO, por lo cual no nos dará mayores problemas, salvo en el caso de la Figura1.

Problema

El problema es el siguiente: cuando creamos un <div> con contenidos variables, el xthml strict tenderá a usar la menor cantidad de espacio para mostrarlo. Podríamos usar en nuestro documento css min-height: para especificar un alto minimo en un <div>, pero la realidad es que mozilla no interpreta bien dicho tag, o siempre se presta a problemas en algún navegado, ya que como tantos otros tags, no estan bien implementados en los diferentes navegadores.

Solución

Como solución simple, propongo colocar un <div> adicional, a modo de columna, con un ancho de 1 pixel, y una altura mínima que es la que nosotros deseamos para que se muestre minimamente bien nuestro sitio. Para ello deberemos ver que altura requerimos en función de las navegaciones laterales y el pie del documento.

Entonces creamos un <div> nuevo, que funcionará como una columna "de relleno": buscamos una altura ideal para ésta, en nuestro ejemplo, la altura del menú de la izquierda (ya que si la parte blanca sigue hacia abajo no nos arruina el diseño), lo flotamos hacia la derecha y con un ancho de 1 pixel.
En mi caso, voy a llamar a este <div>  #PARCHE, y el código sería este:

#parche    {
    display: block;
    width: 1px;
    height: 550px;
    float: right;
    }

Esto ha sido testeado en Internet Explorer y Mozilla Firefox, y en ambos funciona sin problema alguno, espero les haya servido el pequeño tutorial, todo feedback será apreciado.