Galeria CSS con problemas de compatibilidad con navegadores

[Garot]

Buenas!

Tengo una galería en CSS que de hecho esta siendo usada en un sitio web, y rebisando por casualidad descubro que tiene varios problemas de compatibilidad con los diferentes navegadores.

El problema es que no me acuerdo de donde saque el código de dicha galeria, asi que estoy tratando de encontrar cual es el error, pero es muy extraño.

En Firefox funciona perfecto, ahora en Chrome e Internet Explorer da dos bugs muy diferentes, por eso me llama la atención.

Les dejo aqui el código y el link donde pueden ver el ejemplo.

Código HTML:

<div id="album">
<img src="imagens/produtos/gal_cestainer_04_med.jpg" alt="" class="float_left" />
 
<ul class="gallery">
 
<li><a href="#nogo"><span><img src="imagens/produtos/gal_cestainer_04_med_p.jpg" alt="" width="85" height="80" /></span><img class="landscape" src="imagens/produtos/gal_cestainer_04_med.jpg" alt="cestainer 04 medidas" title="medidas" /></a></li>
 
<li><a href="#nogo"><span><img src="imagens/produtos/gal_cestainer_04_abe_p.jpg" alt="" width="85" height="80" /></span><img class="landscape" src="imagens/produtos/gal_cestainer_04_abe.jpg" alt="cestainer 04 montado" title="montado" /></a></li>
 
<li><a href="#nogo"><span><img src="imagens/produtos/gal_cestainer_04_emp_p.jpg" alt="" width="85" height="80" /></span><img class="landscape" src="imagens/produtos/gal_cestainer_04_emp.jpg" alt="cestainer 04 desmontável" title="desmontável" /></a></li>
</ul>
 
</div>
 

Código CSS:

.gallery {
padding:0; 
margin:270px 0 0 0; 
list-style-type:none; 
position:relative; 
width:278px;
}
 
/* remove the default image border */
.gallery > img {
border:0;
}
 
/* make the list horizontal */
.gallery li {
    float:left;
    margin-right: 3px;
}
 
/* style the link text to be central in a surrounding box */
/* estilo del texto de la conexión a ocupar un lugar central en un cuadro que rodea */
.gallery li a, .gallery li a:visited {
float:left; 
text-decoration:none; 
text-align:center; 
width:85px; 
height:80px; 
line-height:24px; 
margin:2px;
}
 
/* position the images using an absolute position and hide them from view */
/* posiciona las imágenes con una posición absoluta y las oculta de la vista */
.gallery li a > img {
    position:absolute;
    top:-300px;
    left:0;
    visibility:hidden;
    border:0;
}
 
/* fix the top position for the landscape images */
/* fijar la posición superior para las imagenes de paisaje */
.gallery li a > img.landscape {
top:-270px;
}
 
/* fix the left position for the portrait images */
/* fijar la posición de la izquierda para el retrato de imágenes */
.gallery li a > img.portrait {
    left:0px;
}
 
/* make the images visible on active/focus */
/*hacer las imágenes visibles en activo/foco*/
.gallery li a:active > img, .gallery li a:focus > img {
visibility:visible;
}
 

Este es el link del ejemplo: http://www.weainox.com.br/aramado_cestainer_04.php#nogo

- Como dije anteriormente en Firefox funciona bien osea conforme hago click en cada imagen se va mostrando arriba.

- En Chrome pasa que solo se muestra la imagen arriba mientras mantengo apretado el cursor sobre la imagen de muestra y cuando suelto se desaparece.

- Ahora el bug de Internet Explorer es muy raro, cuando le hago click a la primera imagen de la derecha va bien pero cuando continuo y le hago click a cualquiera de las otras dos, solo se muestra la imagen si desde ahi me desplazo con el cursor y hago rollover en la primera imagen de la derecha.

Asi que ya veran, estoy intentando ver cual es el problema para ver si puedo hacerla funcionar en los 3 navegadores por igual, sino me voy a ver obligado a cambiar la galeria, cosa que no quiero

Yo se que esta muy mal que este error se me haya pasado antes de publicar la web, pero ese es el problema de hacer los test de compatibilidad atraves de esos sitios que te muestran solamente una imagen de los diferentes navegadores.

Bueno, entonces al que quiera ayudarme en la búsqueda de una solución, desde ya agradesco cualquier sugerencia.

Gracias!

[sanxuan]

La solución pasa por utilizar un script en lugar de esa solución con CSS (en mi modesta opinión). Lo que te ocurre es inevitable. Es fruto de la diferente interpretación de los navegadores de la pseudo-clase :active.
Si nos guiamos por la recomendación CSS2.1 el comportamiento de active debería ser sólo en el espacio de tiempo comprendido entre el apretar el botón del ratón y volver a soltarlo. En definitiva, mientras pulses el botón se deben usar las propiedades definidas con :active y desaparecer cuando lo sueltas.

[Garot]

Tenes razón Sanxuan!

El la pseudo-clase :active tiene problemas principalmente con Internet explorer. Pero tambien la pseudo-clase :focus esta dando problemas, porque el :active es como vos decis funciona mientras se tiene apretado el mouse, ahora una vez que haces click sobre la imagen deberia actuar el :focus cosa que no hace en Chrome y en IE ni te cuento

No quise usar una galeria javascript porque nunca encontre una asi como queria, pero voy a seguir buscando un poco mas, parece ser la mejor solución.

Por ahora la solución inmediata que se me ocurre es dejar la galeria funcionando con la pseudo-clase :hover, funciona en todos los navegadores y no queda mal.

Igual voy a seguir investigando un poco ese tema del :active y del :focus.

Gracias Sanxuan por tu aporte!!