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