Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/01/2011, 21:36
robandrox
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 19 años, 7 meses
Puntos: 0
Problema con galeria de fotos en IE

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