[SOLUCIONADO] Problema con Imagenes en IE7

[Amiancht]

Hola a todos.

Resulta que estoy haciendo una web, con Joomla. Y en el pie de pagina he metido unos iconos de facebook, youtube y demás, abajo a la izquierda. La cuestión que se ven correctamente en cualquier navegador, con la excepción de IE7. Simplemente no se ven en ese navegador. IE8 y superiores lo muestran correctamente y sin problemas.

La pagina web en concreto:
http://www.colquimur.com/formacion/

¿Alguien tiene una ligera idea del porque no se ve en IE7? ¿Alguna solución?

Código HTML:

<td style="vertical-align: top;">
<p><img src="/formacion/images/iconos/facebook.png" title="facebook" width="29" height="29" /></p>
<p><img src="/formacion/images/iconos/linkedin.png" title="linkedin" width="29" height="29" /></p>
<p><img src="/formacion/images/iconos/youtube.png" title="youtube" width="29" height="29" /></p>
</td>
 

[pzin]

IE7 tenía problemas con los archivos PNG, con la transparencia y eso. Digo tenía, porque IE7 es un navegador muerto que no se usa realmente.

Por otro lado, para el tema de los iconos, hoy en día se suele usar una fuente para los mismos. Existen servicios como IconMoon donde puedes generar fuentes de iconos a partir de imágenes SVG, luego otros servicios que tienen miles de iconos en formato SVG como iconmonstr. Ambos son gratuitos.
Así puedes tener iconos como si fuesen fuentes, cambiarles el color, añadir sombras, transiciones, tamaños, etc.

[Amiancht]

Iniciado por pzin

IE7 tenía problemas con los archivos PNG, con la transparencia y eso. Digo tenía, porque IE7 es un navegador muerto que no se usa realmente.

Por otro lado, para el tema de los iconos, hoy en día se suele usar una fuente para los mismos. Existen servicios como IconMoon donde puedes generar fuentes de iconos a partir de imágenes SVG, luego otros servicios que tienen miles de iconos en formato SVG como iconmonstr. Ambos son gratuitos.
Así puedes tener iconos como si fuesen fuentes, cambiarles el color, añadir sombras, transiciones, tamaños, etc.

Gracias por la respuesta. Necesito que se vea en IE7, aunque no se use ultimamente mucho, porque mi cliente si lo usa. Lamentablemente muchas empresas, organizaciones y demás siguen usando IE7.

Por otro lado, no creo que sea el archivo en sí. He comprobado haciendo una pagina de pruebas en local. Y el IE7 si me carga las imagenes. Se me ocurre que sea alguna incompatibilidad con la ruta que da. No lo sé.

Voy a seguir haciendo pruebas.

En cuanto a tu información de iconmoon. Conozco el metodo del que hablas de usar iconos de fuentes. Pero no conocía el servicio de iconmoon. Gracias por compartirlo. Pero lo que tiene usar esos iconos, que solo tienen un color base. Ya que son una fuente. Estan bien, pero siempre para un diseño muy minimalista y sobre todo para un estilo metro.

********************************
EDITO PARA NO HACER DOBLE POST

He hecho una nueva prueba. He quitado los <p> de cada imagen y dejarlas sueltas. Lo normal como etiqueta inline que es el <img> se vean una al lado de otras. Pero ahora se ve en IE7 las imagenes enanas. Muy enanas y tambien se ven una encima de otra. Como si hiciera un <br> o estuvieran en diferentes parrafos cosa que no se ve así en otros navegadores.
Codigo actual:

Código HTML:

<td style="vertical-align: top;"><img src="/formacion/images/iconos/facebook.png" title="facebook" width="29" height="29" />
 <img src="/formacion/images/iconos/linkedin.png" title="linkedin" width="29" height="29" /> 
<img src="/formacion/images/iconos/youtube.png" title="youtube" width="29" height="29" /></td>
 

Así es como se ve en IE7:


Y así es como se ve en firefox y otros navegadores. Incluidos IE8 para arriba.


¿¿ALguien me puede dar una idea de que es lo que está ocurriendo?? Me voy a volver loco xD

[Amiancht]

SOlUCIONADO



Explico que era:

Me he metido en herramientas de desarrollo en IE con F12, y desde ahí me he puesto a mirar el estilo.

Y editandolo, xD y ... vaya locura.

Existe una propiedad max-width: 100%. En el CSS de la plantilla que uso.

que al cambiarla, por una unidad fija y no relativa, el error desapareció.

Es un extraño comportamiento de IE7 a esa propiedad que no tienen los demás navegadores. Solo él. Nisiquiera sus hermanos mayores IE8 o superiores les pasa eso.

Simplemente escribi esto en el CSS para no afectar más que a estas imagenes:

Código CSS:

table img{
        max-width: 29px;
    }
 

Casi me vuelvo loco.

[pzin]

Yo la verdad no me preocupa de IE7, ni tan siquiera de IE8... A decir verdad, como no hay IE para Mac no lo tengo ni instalado.

No es cierto que haya mucha gente utilizando IE7. De hecho no hay mucha gente utilizando IE tal y como están las estadísticas.

Pero bueno. Diseñar con tablas tampoco es que sea algo de este siglo.

Aunque no sé si vendrá el error real por ahí, ya que IE7 se supone que soporta max-width: http://caniuse.com/minmaxwh

[Amiancht]

Iniciado por pzin

Yo la verdad no me preocupa de IE7, ni tan siquiera de IE8... A decir verdad, como no hay IE para Mac no lo tengo ni instalado.

No es cierto que haya mucha gente utilizando IE7. De hecho no hay mucha gente utilizando IE tal y como están las estadísticas.

Pero bueno. Diseñar con tablas tampoco es que sea algo de este siglo.

Aunque no sé si vendrá el error real por ahí, ya que IE7 se supone que soporta max-width: http://caniuse.com/minmaxwh

Yo no hablaba a nivel global, sé que IE en general no se usa tanto a nivel global. Pero al menos aquí en España, sobre todo en mi región, son muchas las empresas que veo trabajando con IE7, obvio que son empresas que no trabajan en desarrollo web. De hecho ya mi profesor lo decía por experiencia, que la mayoria de clientes aquí en mi país siguen usando IE7.

En cuanto al uso de tablas:

Use una tabla simplemente por comodidad es un pedido que tengo que hacer de forma rapida. Además que el Joomla las usa más de una vez. Y no es que diseñe con tablas, si ves el codigo fuente de la pagina, solo es en el pie de pagina donde las uso. Vuelvo a decir es un Joomla, un CMS.

La plantilla es protostart, modificada por mí. Y lo que es el pie de pagina, es un modulo de HTML personalizado y yo lo modifico desde el panel de administración de JOOMLA. Por eso uso tablas, porque no vería yo o mi cliente en el editor de Joomla la división tal cual se ve en el pie de pagina. Eso, y sumas que no puedo exceder mucho tiempo en cosas así, me lleva a usar tablas.

Tampoco creo que haya hecho un uso tan indebido de las tablas. Si necesitara hacerlo con divs, necesitaria cambiar el "display" a table-cells y semejantes, para dejarlo de la forma que lo he dejado. Y luego xD dicha propiedad table-cells no funciona en IE7. Y tendría que escribir más codigo. Y si usara floats, tambien da ciertos problemas las medidas en IE7.

Sobre el problema:

El problema es una mala interpretación del max-width por parte del IE7. Al poner una unidad relativa a la imagen en el max-width, y no tener por lo que parece la columna ningún min-width o width. Parece que hacía de su tamaño lo dejaba en 0 o una unidad muy pequeña.

Realmente no comprendo bien, porque pasa eso. Pero solo ocurre en IE7.

[pzin]

Según unas estadísticas, IE7 a nivel mundial se usa un 0.62% y en España un 0.59%. Obviamente nunca van a ser estadísticas exactas, pero que sea medio por cierto es bastante significativo.
No es nada personal, o si, pero porque es una cruzada que tengo contra IE y versiones anteriores a la 9 en especial.

Es un programa que tiene 7 años de antigüedad, y ya era malo cuando salió, y en software eso son dos eternidades. Por eso no entiendo como hay gente que le sigue dando soporte. Ni tan siquiera a IE8.

[Amiancht]

Iniciado por pzin

Según unas estadísticas, IE7 a nivel mundial se usa un 0.62% y en España un 0.59%. Obviamente nunca van a ser estadísticas exactas, pero que sea medio por cierto es bastante significativo.
No es nada personal, o si, pero porque es una cruzada que tengo contra IE y versiones anteriores a la 9 en especial.

Es un programa que tiene 7 años de antigüedad, y ya era malo cuando salió, y en software eso son dos eternidades. Por eso no entiendo como hay gente que le sigue dando soporte. Ni tan siquiera a IE8.

Si yo, no le daría soporte para IE7, ni seguiria desarrollando para versiones menores a la IE10. Pero vamos, me ha pasado una gran cantidad de veces, que hago una web en HTML5 y CSS3, y me dice el cliente, oye que basura de web es esa que me estas haciendo. Y yo con cara de WTF . Y luego es que usan en su empresa Windows XP, con IE7. Y aunque le diga al cliente que actualice su sistema operativo y su navegador, y no use la anticualla de IE7. El mismo cliente se da cuenta que no es solo él, sino más empresas estaban como él, y me pide al final que se vea tambien en IE7 .

Es posible que se de más en mi región, ya que es la región donde la informatica es bastante desprestigiada. Fijate que en mi región más de la mitad de empresas no tienen pagina web. ¿Y por qué? Por falta de competencia y de desarrolladores web no es. Simplemente porque los empresarios se creen que una pagina web son cosa facil y poco trabajo, y quieren las webs por menos de 100€.

Una locura.