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:
Ver original<img src="imagens/produtos/gal_cestainer_04_med.jpg" alt="" class="float_left" />
<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>
Código CSS:
Ver original.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!