¿Firefox te mete márgenes adicionales en las imágenes?

En IE aparecen las imágenes me aparecen como deben, pero en Firefox parece como que mete márgenes adicionales por arriba y por abajo, y todo lo que pongas encima o debajo de una imagen aparece un poco separado de ella (concretamente te mete 2 px de separación por arriba y 3 px por abajo). He intentado poner esto en el fichero css para corregir el fallo pero no hace nada:

Código :

img
{
   border: 0;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
}

Gracias.

Siempre antes de empezar un diseño debes aplicar un reset como primera regla en tu css, asi eliminas todos los valores por defecto que pueda tener un browser (margen, padding, border, etc)

El mas simple es este:

Código :

* {margin:0; padding:0}

Ese solo quita margenes y paddings de todos los elementos, y uno mas completo es este

reset.css

Código :

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,strong,dfn,em,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}

Los tags que no necesites los puedes borrar del reset.

Drarock, ya había probado lo que comentas, concretamente con el reset de Meyer, que según dicen es el más completo. Aún así los pixeles de relleno en las imágenes me seguían apareciendo. Probaré con tu reset de todas formas, pero me temo que no funcionará. Ya te contaré si hago progresos. Gracias por responder!

En todo caso podrias mandar un screenshot de tu problema para poder analizarlo, o un link a la pagina seria mejor.

Lo que probablemente te pase es que no le hayas puesto display:block; a la imagen, de esa forma la interpreta como inline (que es como debe hacerlo por defecto), le aplica el line-height que hayas definido en tu css o el que tenga el navegador por defecto y además ignora el margin y padding en top y bottom. Prueba a ponerle display:block; a ver si se soluciona así...

He probado a ponerle display:block, como dice Johnny, y ya no mete pixeles de separamiento, pero claro, me coloca las imágenes una debajo de otra, y yo las quiero una detrás de la otra. Para arreglar esto he flotado las imágenes a la izquierda, y ahora es en internet explorer donde me mete los pixeles de separamiento y no en firefox! Bueno creo q voy a dejar el tema por imposible porque son 2 o 3 pixeles, tampoco es nada grave. Os dejo la url por si acaso os pica la curiosidad o se os ocurre algo. Probarlo con ie y con firefox y vereis la pequeña diferencia. Las imágenes son los cuadraditos rojo y gris que aparecen en la columna central. Gracias a los dos.

http://jbn1981.07x.net/show_cds.php

Perfecto, pues ahora lo que tienes que hacer es flotarlas a la izquierda y limpiar la flotación en el elemento que sitúes debajo de las mismas, con eso se te quedan todas una debajo de otra. Para los pixeles que deja en IE, se debe a un bug del mismo, no he podido ver el código porque supongo que habrás hecho cambios y ya no está en ese enlace que nos diste, pero intuyo que puede ser por uno de los dos siguientes:

1. IE interpreta los saltos de linea en el código fuente cuando hay una imagen dentro de cualquier elemento en disposición de bloque, por ejemplo:
   

   Código :

      <div>
         <img/>
      </div>

   
   para solucionarlo lo debes colocar así:
   

   Código :

   <div><img/></div>

   
   
2. A veces IE duplica los márgenes en elementos flotados, como solución puedes volver a ponerle display:inline; como última sentencia a ese elemento en el código, aunque no tenga mucha lógica resulta efectivo.
   

Un saludo, ya nos contarás...

Lo de poner la imagen sin retornos de carro en el código fuente no era porque ya lo tenía sin ellos. Y también probé lo de display: inline al final y tampoco. Total, que ya cuando lo dejo por imposible, decido cambiar las imágenes y meter unas más grandes, y voilá, todo correcto. Con esto llego a la conclusión (no se si errónea o acertada) de que si la imagen es más pequeña que un elemento que tenga al lado (en mi caso tenía un simple texto), la imagen no se adapta del todo bien al contenedor donde se encuentra, por lo menos en firefox.

Pues nada, muchas gracias a los dos. Hasta otra!