Problema con Internet Explorer

sergi_multimedia · #1 (**permalink**) 05/04/2011, 03:09

Hola a todo el mundo, os escribo para ver si me podéis echar un cable (otro más).

Tengo una lista de productos en la web, en todos los navegadores me sale correctamente, ordenadas, en cambio con Internet Explorer me sale todo desordenado, sin sentido y no encuentro la solución.

Alguien sabe que puedo hacer?

Esta es la web

http://s310876771.mialojamiento.es/p...ta_design.html

Un saludo y gracias de antemano.

saul123 · #2 (**permalink**) 05/04/2011, 03:53

Hola

Puede ser que en tu hoja de estilos tengas una propiedad mal ejecutada pero si ya lo has revisado puedes hacer una hoja de estilos solo pa IE Y poner en tu cabecera

Cita:

para que en caso de que lo vean con IE se ejecute la hoja de estilo para el navegador

sergi_multimedia · #3 (**permalink**) 05/04/2011, 04:28

Hola saul123, gracias por pasar.

El css me valida en la w3c así hasta aquí está correcto.

Lo que me has puesto la verdad no lo acabo de entender mucho, te comento:

He copiado TODO lo que me has puesto dentro del <head> y me sale como un comentario, hay que poner todo o solo lo que está dentro de <link>?

Una vez copiado esto, ¿tengo que poner dentro un css diferente al de la página web, es decir uno para IE?

Entonces dentro de este CSS de IE que css que es lo mejor para que se me vea correctamente? Utilizo tablas?

La verdad que ahora estoy más confuso ejejje

No hay alguna instrucción que pueda añadir dentro de mi css original? o mejor aún, quizás no lo haya diseñado correctamente, me aconsejas otra forma de hacer lo que quiero en HTML y que sea compatible con todos los navegadores?

Perdón por el rollo!

zerokilled · #4 (**permalink**) 05/04/2011, 16:30

buenas...

Cita:

El css me valida en la w3c así hasta aquí está correcto.

una cosa es que valide y otra es que este correctamente aplicado. y como es de costumbre, en ocaciones distintos navegadores interpretan la misma propiedad de diferentes formas. te sugiero que solicites mover el tema a css porque el tema es mas de esa area.

GAST0N · #5 (**permalink**) 05/04/2011, 16:49

Valida el html en la w3c , estoy seguramente te olvidaste de cerrar alguna etiqueta

GatoGordo · #6 (**permalink**) 05/04/2011, 17:37

Cita:

Iniciado por saul123

Hola

Puede ser que en tu hoja de estilos tengas una propiedad mal ejecutada pero si ya lo has revisado puedes hacer una hoja de estilos solo pa IE Y poner en tu cabecera

para que en caso de que lo vean con IE se ejecute la hoja de estilo para el navegador

Ahhh muy buen tip, no sabía que se podía hacer eso de manera tan sencilla. Habré de probarlo en la próxima oportunidad. Gracias.

Saludos!

Carlangueitor · #7 (**permalink**) 05/04/2011, 19:30

También añadir, que aunque valides tu código no es una garantía de que se vea bien en IE, ya que este navegador tiene dificultades para seguir los estándares, puedes ver estos links que te pueden ayudar:

http://www.cssblog.es/listado-de-bug...lorer-6-7-y-8/
http://net.tutsplus.com/tutorials/ht...w-to-fix-them/ (en inglés)

Pudes ver lo de los comentarios condicionales (lo que te pusieron en la primera respuesta) para crear una hoja de estilo aparte para internet explorer si se te complica mucho.

También podrías poner tu sitio para ver como andas en el código.

Saludos:adiós:

sergi_multimedia · #8 (**permalink**) 11/04/2011, 01:23

Hola Carlangueitor, muchas gracias por los enlaces, la verdad es que me han servido, he podido solucionar los problemas de visualización con Internet Explorer 8....pero ahora es la versión 9 que no se visualiza bien (manda cojones!), la verdad es que da un poco de asco este navegador, porqué no pueden seguir los estándares como el resto de navegadores? Pero que hacen estos de Microsoft?

En fin, el problema es con las listas donde hay imágenes, y estas tienen un enlace.

Por ejemplo, en este enlace http://s310876771.mialojamiento.es/p...s/puecesa.html las puertas aún no he insertado ningún enlace, y se visualizan bien con Internet Explorer 9.

En cambio, las listas con imágenes y estas con enlaces se ve mal, como estas (tirar más abajo, justamente el primer trozo se ve bien) http://s310876771.mialojamiento.es/p...ta_design.html

Hay algo del css en los enlaces de las imágenes que no lo soporta IE.

Código HTML:

Ver original<ul class="imatges">
        <li><a href="../imatges/vita%20design/square/MM-MR-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-BL-NG_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-M1-BM-NE_RGB_600_lienzo.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-BM-NE_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-M1-RO-GR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-RO-GR_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-M1-WM-MR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-WM-MR_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
        <li><img src="../imatges/fafafa.png" alt="" width="120" height="255" /></li>
        <li><div class="material2">SQUARE M1</div></li>
        <li><div class="material2">SQUARE M1</div></li>
        <li><div class="material2">SQUARE M1</div></li>
        <li><div class="material2">SQUARE M1</div></li>
        <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-M2-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-BL-NG_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-M2-GR-CC_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-GR-CC_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-M2-NCR-CN_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-NCR-CN_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
        <li><img src="../imatges/fafafa.png" alt="" width="120" height="255"/></li>
        <li><img src="../imatges/fafafa.png" alt="" width="120" height="255"/></li>
        <li><div class="material2">SQUARE M2</div></li>
        <li><div class="material2">SQUARE M2</div></li>
        <li><div class="material2">SQUARE M2</div></li>
        <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
        <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-M3-BL-BC-BO-GR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M3-BL-BC-BO-GR_RGB_120.jpg" alt="porta vita design square M3" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M1-BL-NG_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M2-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M2-BL-NG_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M2-GR-CC_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M2-GR-CC_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
        <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-PAD-M1-BL_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
        <li><div class="material2">SQUARE M3</div></li>
        <li><div class="material2">SQUARE M1 VIDRE</div></li>
        <li><div class="material2">SQUARE M2 VIDRE</div></li>
        <li><div class="material2">SQUARE M2 VIDRE</div></li>
        <li><div class="material2">SQUARE M10</div></li>
    
    </ul>

Código CSS:

Ver originalul.imatges  {
    width: 750px;
    list-style: none;
}
 
.imatges li {
    margin-right: 19px;
    display: inline;
    width: 120px;
    float: left;
}
 
.material2 {
    font-variant: normal;
    font-size: 11.5px;
    text-align: left;
    width: 119px;
    margin-right: 21px;
    float: left;
    font-family: Tahoma, Verdana, "Sans Serif";
    margin-bottom: 25px;
    display: block;
}

¿Puede que me falte añadir un "img a:link {?????}" en el css?

Gracias de antemano por todas las respuestas.

Un saludo!