Foros del Web » Creando para Internet » CSS »

Problema con galeria de fotos en IE

Estas en el tema de Problema con galeria de fotos en IE en el foro de CSS en Foros del Web. Hola a [email protected], he creado una web con un apartado que contiene un galeria de fotos. Esta esta compuesta de dos partes: 1. Parte superior ...
  #1 (permalink)  
Antiguo 27/01/2011, 21:36
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
Problema con galeria de fotos en IE

Hola a [email protected],

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
  #2 (permalink)  
Antiguo 28/01/2011, 02:48
 
Fecha de Ingreso: enero-2011
Ubicación: Castellon
Mensajes: 39
Antigüedad: 6 años, 10 meses
Puntos: 5
Respuesta: Problema con galeria de fotos en IE

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
  #3 (permalink)  
Antiguo 29/01/2011, 21:37
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema con galeria de fotos en IE

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
  #4 (permalink)  
Antiguo 30/01/2011, 13:23
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con galeria de fotos en IE

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.
  #5 (permalink)  
Antiguo 30/01/2011, 19:24
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema con galeria de fotos en IE

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.
  #6 (permalink)  
Antiguo 30/01/2011, 19:56
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con galeria de fotos en IE

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.
  #7 (permalink)  
Antiguo 31/01/2011, 18:45
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema con galeria de fotos en IE

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
  #8 (permalink)  
Antiguo 31/01/2011, 19:42
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con galeria de fotos en IE

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>.

Última edición por sanxuan; 31/01/2011 a las 19:50

Etiquetas: fotos, galeria
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:31.