Tema: problema con Galeria de fotos Css.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/02/2012, 15:05
rjulio21
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 13 años, 8 meses
Puntos: 16
Pregunta problema con Galeria de fotos Css.
Buenas tardes hermano, tiempo que no consultaba por aca.

Tengo un problema, para mi un tanto confuso, espero puedan ayudarme. Estoy haciendo una galeria de fotos con puro html y css3. (de hecho ya esta lista). Pero tengo un problema con ella. La galeria se compone de dos div.
Un div "expandido" en el cual muestro las fotos ampliadas. y uno "fotos" en el que pongo la galeria de fotos minimizada al pie de la foto que se encuentre expandida.

el problema que tengo es que en chroome la galeria funciona perfectamente. pero en mozilla tiene un detalle que solo se presenta al entrar a la galeria, y es que el div "fotos" que debe estar alineado con el div "expandido" de forma que creen un recuadro. se encuentra al entrar descuadrado a la derecha, pero este problema se corrige al cambiar la foto. y solo se nota al entrar por primera vez a la galeria. y UNICAMENTE en firefox.


Aqui dejo el codigo de las clases en css a ver si me consiguen el error, la verdad m parece sencillo lo que hice.

Código CSS: 
Ver original
  1. #galeriak {
  2.     text-align: left;
  3.     width: 700px;
  4.     margin: 30px auto 20px auto;
  5.     background: #dcdcdc;
  6.     overflow: hidden;
  7.     border: 10px solid #dcdcdc;
  8.     -webkit-box-shadow: #131313 0px 2px 10px;
  9.     -moz-box-shadow: #131313 0px 3px 10px;
  10.     box-shadow: #131313 0px 3px 10px;   
  11.     -webkit-animation-name: fadeIn; 
  12.     -webkit-animation-duration: 3s; 
  13.     -webkit-animation-iteration-count: 1;
  14.     -webkit-animation-delay: 0s;
  15.     -moz-animation-name: fadeIn; 
  16.     -moz-animation-duration: 3s; 
  17.     -moz-animation-iteration-count: 1;
  18.     -moz-animation-delay: 0s;
  19.     
  20. }
  21. #galeriak #fotos{
  22.     
  23.     margin: 0px 0px 0px 5px;
  24.     padding: 0px;
  25.     list-style: none;
  26.     position: relative;
  27.     background: #000;
  28.     overflow: auto;
  29.     
  30.     
  31. }
  32.  
  33. #galeriak ul#expandido{
  34.     margin: 0px;
  35.     padding: 0px;
  36.     list-style: none;
  37.     position: relative;
  38.     width: 700px;   
  39.     height:450px;
  40.     overflow: hidden;   
  41. }
  42. #galeriak ul#expandido li { 
  43.     width: 700px;
  44.     height: 450px;
  45.     #position: absolute;
  46.     }   
  47. #galeriak ul#expandido li p {
  48.     margin-top:-35px;
  49.     #position: absolute;
  50.     bottom: 0;
  51.     left: 0;
  52.     z-index: inherit;
  53.     color: #fff;
  54.     background:#000;
  55.     opacity:.5;
  56.     width: 100%;
  57.     line-height: 1.2em;
  58.     padding: 10px;
  59.     display: block;
  60. }
  61.  
  62. #galeriak #fotos li{
  63.     -webkit-transition: opacity .2s ease-in-out;
  64.     border: 1px solid #979797;
  65.     display: block;
  66.     overflow: hidden;
  67.     float: right;
  68.     #margin: 10px 0px 0px 10px;
  69.     opacity: 0.75;
  70. }
  71. #galeriak #fotos li:hover {
  72.     opacity: 1;
  73.     -moz-transition:all .2s linear;
  74.     -webkit-transition:all .2s linear;
  75.     -webkit-transform:scale(1.1);
  76.     -moz-transform:scale(1.1);
  77. }

De antemano gracias.