problema con Galeria de fotos Css.

[rjulio21]

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:

#galeriak {
    text-align: left;
    width: 700px;
    margin: 30px auto 20px auto;
    background: #dcdcdc;
    overflow: hidden;
    border: 10px solid #dcdcdc;
    -webkit-box-shadow: #131313 0px 2px 10px;
    -moz-box-shadow: #131313 0px 3px 10px;
    box-shadow: #131313 0px 3px 10px;   
    -webkit-animation-name: fadeIn; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    -moz-animation-name: fadeIn; 
    -moz-animation-duration: 3s; 
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    
}
#galeriak #fotos{
    
    margin: 0px 0px 0px 5px;
    padding: 0px;
    list-style: none;
    position: relative;
    background: #000;
    overflow: auto;
    
    
}
 
#galeriak ul#expandido{
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: relative;
    width: 700px;   
    height:450px;
    overflow: hidden;   
}
#galeriak ul#expandido li { 
    width: 700px;
    height: 450px;
    #position: absolute;
    }   
#galeriak ul#expandido li p {
    margin-top:-35px;
    #position: absolute;
    bottom: 0;
    left: 0;
    z-index: inherit;
    color: #fff;
    background:#000;
    opacity:.5;
    width: 100%;
    line-height: 1.2em;
    padding: 10px;
    display: block;
}
 
#galeriak #fotos li{
    -webkit-transition: opacity .2s ease-in-out;
    border: 1px solid #979797;
    display: block;
    overflow: hidden;
    float: right;
    #margin: 10px 0px 0px 10px;
    opacity: 0.75;
}
#galeriak #fotos li:hover {
    opacity: 1;
    -moz-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
}
 

De antemano gracias.

[xFantaSx]

Deberías dejar el link de tu página o almenos el código html.

[rjulio21]

ok. la página no la tengo montada aun. el codigo HTML que se genera es el siguiente. Se genera automaticamente pues son varios albumes y es la misma galeria, y lo hago con php, pero el HTML es el siguiente:

Código HTML:

<div id="contenido">
 
 <h3 class="titulo">Proyectos</h3>
 
<div id="galeriak">
    <ul id="expandido">
                <li>
                    <a href="#9"><img src="imagenes/Proyectos/imagen1.jpg" height="450px" width="700px"></a>
                </li>
            
                <li>
                    <a href="#8"><img src="imagenes/Proyectos/imagen2.jpg"  height="450px" width="700px"></a>
 
                </li>
            
                <li>
                    <a href="#7"><img src="imagenes/Proyectos/imagen3.jpg"  height="450px" width="700px"></a>
                </li>
            
                <li>
                    <a href="#6"><img src="imagenes/Proyectos/imagen4.jpg"  height="450px" width="700px"></a>
                </li>   
    </ul>
    <ul id="fotos">
            <li>
                <a href="#9"><img src="imagenes/Proyectos/imagen1.jpg"  height="50px" width="50px"></a>
            </li>
        
            <li>
                <a href="#8"><img src="imagenes/Proyectos/imagen2.jpg"  height="50px" width="50px"></a>
 
            </li>
        
            <li>
                <a href="#7"><img src="imagenes/Proyectos/imagen3.jpg"  height="50px" width="50px"></a>
            </li>
        
            <li>
                <a href="#6"><img src="imagenes/Proyectos/imagen4.jpg"  height="50px" width="50px"></a>
            </li>
        </ul>
</div>
    <a href="proyectos.php?p=1">Volver</a>
</div>