Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 27-dic-2007, 04:50   #1 (permalink)
gazpachoymochil ha deshabilitado el karma
 
Fecha de Ingreso: febrero-2005
Mensajes: 80
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!
gazpachoymochil está desconectado   Responder Citando
Antiguo 28-dic-2007, 14:44   #2 (permalink)
emiliodeg tiene algunos puntos positivos de karma
 
Avatar de emiliodeg
 
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.021
Re: Imagenes en CSS descuadradas

no son problemas de cache? proba con actualizar la pagina con ctrol+F5
__________________
Degiovanni Emilio
developtus.com
mi neurona
emiliodeg está desconectado   Responder Citando
Antiguo 30-dic-2007, 15:00   #3 (permalink)
ricardohs ha deshabilitado el karma
 
Fecha de Ingreso: diciembre-2007
Mensajes: 11
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
ricardohs está desconectado   Responder Citando
Antiguo 02-ene-2008, 04:03   #4 (permalink)
gazpachoymochil ha deshabilitado el karma
 
Fecha de Ingreso: febrero-2005
Mensajes: 80
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.
gazpachoymochil está desconectado   Responder Citando
Antiguo 02-ene-2008, 08:11   #5 (permalink)
josdelaranda ha deshabilitado el karma
 
Avatar de josdelaranda
 
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 37
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,
josdelaranda esta en línea ahora   Responder Citando
Antiguo 04-ene-2008, 04:17   #6 (permalink)
gazpachoymochil ha deshabilitado el karma
 
Fecha de Ingreso: febrero-2005
Mensajes: 80
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)
gazpachoymochil está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 13:15.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93