Foros del Web » Creando para Internet » CSS »

Imagenes en CSS descuadradas

Estas en el tema de Imagenes en CSS descuadradas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/12/2007, 05:50
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Imagenes en CSS descuadradas

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!
  #2 (permalink)  
Antiguo 28/12/2007, 15:44
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Re: Imagenes en CSS descuadradas

no son problemas de cache? proba con actualizar la pagina con ctrol+F5
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 30/12/2007, 16:00
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 10 años
Puntos: 0
Re: Imagenes en CSS descuadradas

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
  #4 (permalink)  
Antiguo 02/01/2008, 05:03
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Re: Imagenes en CSS descuadradas

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.
  #5 (permalink)  
Antiguo 02/01/2008, 09:11
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: Imagenes en CSS descuadradas

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,
  #6 (permalink)  
Antiguo 04/01/2008, 05:17
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Re: Imagenes en CSS descuadradas

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)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:21.