Problema con iconos en Firefox

lapot · #1 (**permalink**) 11/06/2013, 05:16

Hola. Primero de todo, quiero meter unos iconos en una web pero no tengo demasiada experiencia con este lenguaje. Aunque no creo que la pregunta sea demasiado complicado, la cuestión es que los iconos que quiero insertar en nuestra web se ven en google chrome pero en firefox hay uno que desaparece.

Yo creo que es por el margin-left, margin-right que dan problemas en firefox. ¿Me podéis echar un cable, por favor? Gracias! Aquí os dejo el código.

Código PHP:

  <style type="text/css"> 
#caja {width: 200px; 
    height: 200px; 
    border: 0px solid #C0C0C0; 
} 
#texto-uno { 
           float: right; 
    line-height: 10px; 
} 
#texto-dos { 
    float: left; 
    line-height: 10px; 
} 
#imagen-uno { 
         display: block; 
        margin-left:40%; 
        margin-right:60%; 
} 
</style> 
</head>

pzin · #2 (**permalink**) 11/06/2013, 13:54

Bienvenido al foro.

Yo no veo nada extraño ahí. Y margin no da ningún problema en Firefox.

Prueba a dejar algo más de código, incluyendo también el HTML correspondiente para reproducir el problema.

lapot · #3 (**permalink**) 12/06/2013, 02:44

Gracias pzin, por la ayuda. Bueno estos iconos aparecen en un footer de nuestra web. Aquí os dejo todo el código incluido en ese footer. Como digo el icono de facebook no aparece ni en firefox, ni en opera, pero sí en google chrome.

Código PHP:

  <style type="text/css"> 
#caja {width: 200px; 
    height: 200px; 
    border: 0px solid #C0C0C0; 
} 
#texto-uno { 
           float: right; 
    line-height: 10px; 
} 
#texto-dos { 
    float: left; 
    line-height: 10px; 
} 
#imagen-uno { 
         display: block; 
        margin-left:40%; 
        margin-right:60%; 
} 
</style> 
</head> 
 
<body> 
<div id="caja"> 
    <div id="texto-uno"><A HREF="http://www.solarteingenieria.wordpress.com" TARGET="_BLANK"><img style="margin-bottom: 30px;" SRC=" http://i.imgur.com/g6jZ83c.png" title="Blog" alt="solarte ingenieria" ></A></div> 
    <div id="texto-dos"><A HREF="http://www.linkedin.com/company/solarte-ingenier-a" TARGET="_BLANK"><IMG SRC="http://i.imgur.com/jjMujdp.jpg" title="Linkedin" alt="solarte ingenieria" width="48px" ></A></div> 
         <div id="imagen-uno"><A HREF="https://www.facebook.com/SolarteIngenieria" TARGET="_BLANK"><IMG SRC="http://i.imgur.com/odjbLC2.jpg" title="Facebook" alt="solarte ingenieria" width="48px" border=0</A> 
</div> 
</div> 
</body>

pzin · #4 (**permalink**) 12/06/2013, 03:27

Con el código que aportas, tanto en Chrome como en Firefox, ambos en Mac, me funciona bien. ¿Puedes confirmarlo en este enlace? Si lo ves bien también es que no es suficiente ese código para reproducir el problema.

De todas formas, tienes algunos errores en el HTML; falta un > para cerrar el último enlace, y dependiendo del doctype que estés usando, tienes que cerrar las imágenes /> además de escribir las etiquetas en minúsculas.

jcry87 · #5 (**permalink**) 29/09/2013, 04:37

Deberías abrir y cerrar el archivo con <html> cerrar tu último enlace />, colocar las etiquetas y atributos de etiquetas en minúsculas.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#caja {width: 200px;
height: 200px;
border: 0px solid #C0C0C0;
}
#texto-uno {
float: right;
line-height: 10px;
}
#texto-dos {
float: left;
line-height: 10px;
}
#imagen-uno {
display: block;
margin-left:40%;
margin-right:60%;
}
</style>
</head>

<body>
<div id="caja">
<div id="texto-uno"><a href="http://www.solarteingenieria.wordpress.com" target="_blank"><img style="margin-bottom: 30px;" src="http://i.imgur.com/g6jZ83c.png" title="Blog" alt="solarte ingenieria"></a></div>
<div id="texto-dos"><a href="http://www.linkedin.com/company/solarte-ingenier-a" target="_blank"><img src="http://i.imgur.com/jjMujdp.jpg" title="Linkedin" alt="solarte ingenieria" width="48px"></a></div>
<div id="imagen-uno"><a href="https://www.facebook.com/SolarteIngenieria" target="_blank"><img src="http://i.imgur.com/odjbLC2.jpg" title="Facebook" alt="solarte ingenieria" width="48px" border="0"></a></div>
</div>
</body>
</html>

Lo probé en firefox y no hay problema. El primer icono se demora en cargar pero es porque esta alojado en imgur y es png. Los png son mas pesados.