Imagenes en CSS descuadradas

[gazpachoymochil]

Hola a todos. Mi problemas es el siguiente: Tengo una serie de imágenes dentro de cada elemento <td></td> de una tabla y lo que ocurre es que cuando cargo la página en Firefox. las imágenes me aparecen descuadradas o sin algunos de los "efectos" CSS que deberían aparecer...Creo que será mejor poner el código y explicarlo luego.

Código xhtml + PHP:

Código:

print '<table class = "imagenes" align = "center"><tr>'.
'<td><img src = "IMGs/quien/quien01.jpg" /></td>'.
'<td><img src = "IMGs/quien/quien02.jpg" /></td></tr></table>';

Código CSS:

Código:

table.imagenes td {
margin: 0;
padding: 3%;
text-align: center;
background: #FFFFFF;
border: 1px solid #ACCFE8;

}

Como podéis ver, lo que quiero es que las imagenes estén envueltas en una "caja" blanca y ésta caja, a su vez, tenga un borde de cierto color. El problema surge cuando conFirefox cargo por primera vez la página. Aparecen las imágenes con el "border: 1px solid #ACCFE8;" pero sin el espacio de 1% blanco o, a veces, aparece el espacio pero las imágenes ligeramente hacia la derecha. Lo curioso es que si recargo la página todo funciona bien: las imágenes se centran, aparecen los bordes en su sitio...

Alguien sabe cómo puedo solucionarlo? Ya sé que en vez de utilizar tablas debería evitarlas, pero tampoco está prohibido, y es una de las formas más cómodas y rápidas que tengo para mostrar las imágenes. De todas formas, usando tablas o no, el resultado debería ser correcto y no lo es.

Muchas gracias!

[emiliodeg]

no son problemas de cache? proba con actualizar la pagina con ctrol+F5

[ricardohs]

Intenta con esto, escribe al inicio de tu css:

Código:

* {
   margin:0;
   padding:0;
}

Así se resetean los margin y padding en cualquier explorador que uses y te será más fácil manipularlo a tu gusto... saludos

[gazpachoymochil]

Gracias a los dos. ricardohs... mi documento CSS comienza con ese estilo aplicado al body, así que no creo que sea un problema de resetear margings y paddings. emiliodeg... es verdad que cuando actualizo la página las imágenes se me centran. El problema es que un usuario normal y corriente esto no lo sabe y, de todas formas, no tiene por qué cargar dos veces la misma página para ver corretamente las imágenes que ésta contenga. La verdad es que este "problemilla" me está fastidiando bastante porque seguramente la solución será una tontería ero no la veo. (Si es que ya les tengo manía a las imágenes al utilizar CSS y sólo me falta esto...).

Muchas gracias a los dos, pero el problema sigue vigente y sin solución.

[josdelaranda]

Hola,
La verdad que tu problema me deja intrigado y no sé cual es el motivo que se comporte así tu página en Firefox, de todos modos al hacer un cambio en tu css logré que se viera bien, este es el código CSS:

Código:

<style type="text/css">
table.imagenes td {
margin: 0;
padding: 10px;
background-color: #FFFFFF;
border: 1px solid #ACCFE8;
}
</style>

Básicamente lo que hice fue cambiar la unidad del padding de porcentaje a pixeles.

Y este es el HTML, que está casi igual a tu código, sólo lo ordené un poco:

Código:

<table class="imagenes" align="center">
<tr>
<td><img src="images/machu_picchu.jpg" alt="Machu Picchu" /></td>
<td><img src="images/machu_picchu.jpg" alt="Machu Picchu" /></td>
</tr>
</table>

Aquí te dejo un link de como se ve la página:

http://codigolimpio.com/foro/prueba.html

Saludos,

[gazpachoymochil]

Muchas gracias josdelaranda. La verdad es que no había pensado en cambiar las unidades de porcentajes a píxeles. Es una buena solución (vaya, la solución correcta) pero no deja de ser curioso que suceda lo que he explicado anteriormente. La verdad es que para un futuro no olvidaré como solucionar este asunto.

Un saludo a todos los que habéis pensado e intentado darme soluciones!! (Y a los que lo han intentado)