Problema con galeria de fotos en IE

[robandrox]

Hola a tod@s,

he creado una web con un apartado que contiene un galeria de fotos. Esta esta compuesta de dos partes:

1. Parte superior donde las fotos van pasando y se ven a tamaño grande.
2. Una parte inferor (thumbs), donde se ven las fotos disponibles en miniatura.

El problem es que en IE, la parte inferior se desarma y aparecen 3 rectangulos con la X a la izquierda,como si la imagen estuviese alli pero que no se puede ver.

El codigo CSS es

Código HTML:

body {font:12px Verdana, Arial, Helvetica, sans-serif;}

#gallery {float:right; width:450px; margin:40px auto; margin-top:0px; padding:10px; border:6px solid #fff; background:#FF9731}

#images {border:2px solid #9ac1c9; height:225px; width:300px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:440px; height:350px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}
#image img {position:absolute; top:5px; left:5px; width:440px ; height:350px}
#thumbwrapper {margin-top:10px; padding:5px 0; width:450px; height:50px; border:2px solid #666; background:#FFF}
#thumbarea {position:relative; overflow:hidden; height:100px; width:450px; }
#thumbs {position:absolute; list-style:none; margin-left:5px; margin-top:0px; margin-right:0px;  padding:0; height:100px; width:800px; border-right:5px solid #FFF}
#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; margin:0; padding:0; height:350px; width:20%; z-index:100;  width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}

y el codigo html es

Código HTML:

<div id="thumbwrapper">
    <div id="thumbarea">
      <ul id="thumbs">
        <li value="1"><img src="thumbs/1.jpg" width="85" height="50" alt="" /></li>
        <li value="2"><img src="thumbs/2.jpg" width="85" height="50" alt="" /></li>
        <li value="3"><img src="thumbs/3.jpg" width="80" height="50" alt="" /></li>
        <li value="4"><img src="thumbs/4.jpg" width="85" height="50" alt="" /></li>
        <li value="5"><img src="thumbs/5.jpg" width="85" height="50" alt="" /></li>
        <li value="6"><img src="thumbs/6.jpg" width="85" height="50" alt="" /></li>
        <li value="7"><img src="thumbs/7.jpg" width="85" height="50" alt="" /></li>
        <li value="8"><img src="thumbs/8.jpg" width="85" height="50" alt="" /></li>
        <li value="9"><img src="thumbs/9.jpg" width="85" height="50" alt="" /></li>
        <li value="10"><img src="thumbs/10.jpg" width="85" height="50" alt="" /></li>
        <li value="11"><img src="thumbs/11.jpg" width="85" height="50" alt="" /></li>
      </ul>
    </div>
  </div> 

Espero que podais ayudarme

Gracias

[Orantx]

Hola, no se si será pero internet explorer es más tiquismiquis con los nombres de las imagenes fijate bien en si estan en mayusculas o minusculas y que sea .jpg y no .JPG o algo similar (una vez me paso y tuve que cambiar todas las extensiones).

Fijate también en la carpeta.

Prueba a poner la imagen suelta sin el li ni nada y si te va es que no es lo que digo pero sino ves comprobando todo lo anterior.

SUERTE

[robandrox]

Hola Orantx,

gracias por la respuesta. Realmente lo queria es que no se vieran todas las imagenes,solo unas pocas, pero los demas salian como te dije, de todas maneras he solucionado el problema cambiando el tamaño de las imagenes, pero sigo teniendo el problema de que salen descolocadas.

Alguna idea de por que puede pasar esto?

Saludos

[sanxuan]

El problema es que la lista #thumbs tiene un ancho muy escaso para que todas las imágenes quepan dentro.
Tienes 11 imágenes de 85px de ancho pero sólo 800px para mostrarlas. Aumenta el tamaño a 3000px o lo que necesites teniendo en cuenta los espacios entre imágenes. No hay problema, el overflow:hidden de #thumbarea se debe de encargar de mostrar sólo lo que quepa dentro de su ancho.

[robandrox]

Como tu has dicho overflow:hidden muestra solo las imagenes que caben, que es lo que ocurre en Firefox. En IE por alguna razon salen movidas a la derecha y parte del area aparece en blanco, pero lo curioso es que cuando paso el raton sobre ellas se centran. No tengo ni idea de que puede ser.

[sanxuan]

Yo lo he probado con IE, Firefox y Chrome y se ve igual.
Comprueba que estés declarando el tipo de documento HTML con la etiqueta DOCTYPE.

[robandrox]

Hola Sanxuan,

es extraño porque tengo la etiqueta DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Tienes exactamente la misma?

Saludos

[sanxuan]

Yo uso esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

pero en todo caso, después de usar tu DTD sigo viéndola igual en los dos navegadores con la corrección que te indiqué. Eso sí, no pasa la validación de W3C.
La causa es que el validador no admite los cierres de etiqueta con la barra inclinada "/>" para HTML 4.01 ya que son propios de XHTML. En tu código se usan por ejemplo en las imágenes.
En la práctica, los navegadores no suelen ser tan estrictos en esa diferencia y convierten a esos dos estándares prácticamente en el mismo.
Yo estoy usando IE8. No tengo en este momento manera de comprobar otras versiones.

Lo he usado también con esta otra DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
y el resultado es el mismo, a pesar de que con esta cabecera no se puede usar el atributo value que usas en <li>.