Navegando ayer por CSS Vault he visto una galería fotográfica implementada con CSS y JavaScript, que es lo que estaba buscando para alguna sección de esta web, como ocio/montaña.

Esta mañana me he puesto a ello y la he incorporado a uno de los posts de días anteriores, con la intención de comenzar a utilizarla en los posts en los que vaya a mostrar imágenes de excursiones o viajes.

He conseguido que funcione fácilmente en Mozilla y Firefox, salvando varios problemas que me ha causado el autop de WordPress. Sin embargo a la hora de probarlo en Explorer he visto como las imágenes ampliadas se me abrían siempre en la parte superior del contenido de la página, sin hacer caso a la posición de la barra de scroll.

Tras bastantes pruebas he encontrado, gracias a Google, que el problema se debía a que cuando el Explorer detecta una declaración de Doctype en la página, pasa a Strict Mode y determinados métodos de document.body pasan a document.documentElement.

Así por ejemplo, para calcular la cantidad de pixels de distancia con la parte superior de la página, en vez de utilizar document.body.scrollTop, habría que utilizar:

if (self.pageYOffset){
  // all except Explorer
  scrolTop = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop){
  // Explorer 6 Strict
  scrolTop = document.documentElement.scrollTop;
}
else if (document.body){
  // all other Explorers
  scrolTop = document.body.scrollTop;
}

Más información en:

• Explicación en MSDN
• Detallada explicación en Quirksmode
• Artículo en Evolt.org