JMiur [E]

¿Problemas porque de tanto en tanto desaparecen algunos textos o imágenes cuando miramos el blog en IE?

Hay dos soluciones posible. La drástica es desinstalara Internet Explorer diablo2

La otra es entender que hay un bug en IE que provoca que ciertos textos que se colocan al lado de elementos flotantes o imágenes de fondo que se colocan con la propiedad background, desaparezcan como por arte de magia aunque si refrescamos la página, suelen "regresar".

Para solucionarlo, hay que agregar la propiedad position: relative en el elemento remolón y/o la propiedad width con un valor adecuado. Milagrosamente, el problema se resuelve ... generalmente, claro ... los milagros no están garantizados.

19 comentarios:

Sector Visual  

Hola JMiur, vengo con una duda que es mas o menos sobre este tema, bueno, es sobre las imágenes, y lo que pasa es que hoy vi mi Blog (Sector Visual) en una computadora diferente a la mía, y para mi sorpresa, resulta que cuando coloco un blockquote en un post y una imagen alineada a la izquierda o a la derecha del mismo, este cubre la imagen. Yo no me habia dado cuenta porque en mi computadora la imagen aparece sobre el blockquote, ojala puedas visitar el blog y percatarte de esto, y decirme que es lo que puedo hacer para que no suceda esto, sin tener que modificar el estilo del blockquote.

Gracias.
Mauricio de Sector Visual

Responder
La Blogueria  

La primera solución que propones, probablemente no sea ni tan drástica ni tan maliciosa; de hecho, leyendo los "problemas conocidos de Blogger", veo que es la primera recomendación que te dan ante problemas de este tipo ("usa Firefox"). En verdad es lo más lógico: si algo no funciona según lo previsto o como debiera, si nos da más trabajo que alegrías, si es indomesticable e inmasticable, ¿no cae de cajón deshecharlo y usar algo que responda a las expectativas?

No digo más, que luego IE empieza hacer cosas raras con mi blog...

Responder
JMiur  

Sector Visual, lo que ocurre es que colocas :más o menos este esquema:

<img ... flotante ... /> ... el texto ...
......
......
<blockquote> ... la cita ... </blockquote>


La imagen flotante se ubica a la izquierda, por ejemplo, y el texto la va rodeando pero, tiene cierto tamaño, cierta altura. Como el texto es "corto", no la rodea por completo.

Entonces aparece el blockquote. La imagen sigue flotando así que queda por encima. Puedes hacer la prueba de esto haciendo más largo el texto y verás que el blockquote parece "bajar".

Hay una forma de indicarle a la página que "termine" con las flotaciones, de esa manera, el blockquote aparecerá después de la imagen.

La propiedad CSS es clear:both; y me parece que lo razonable en tu caso, sería agregarla a la parte del estilo de la plantilla:

post-body blockquote {
background:#F1F9FF none repeat scroll 0%;
border:2px solid #6666FF;
padding:8px;
clear:both;
}

La Bloguería: Sí, la solución ideal es la primera, la segunda es que arreglen el bug, la tercera es probar y probar y probar hasta que quede bien :D

Responder
Sector Visual  

Gracias, lo acabo de probar, pero no me resultó, ya que se cambian y se "botan" varias cosas del diseño, no encuentro otra respuesta mas que darle otro estilo al blockquote, o hay otra opción?

Responder
JMiur  

Es que el problema no es el blockquote sino la imagen flotante, sea cual sea el estilo de este último, si hay una imagen más alta que el texto, siempre quedará arriba.

Otra solución es terminar la flotación antes del blockquote con <div style="clear:both;"> </div>. Para eso, lo razonable es formatear los párrafos:

<div stle="text-align:justify;"><img ... flotante ... /> ... el texto ...
......
......</div> <div style="clear:both;"> </div>
<blockquote> ... la cita ... </blockquote>

Responder
Sector Visual  

Muchas gracias JMiur, yo creo que eso hare a partir de ahora, pero el formatear los textos sería muy complicado porque tengo ya casi 500 posts y la mayoria tienen el estilo del blockquote y la imágen alineados.

En fin...pero una duda, perdon si te molesto, pero porque pasa que en mi computadora yo puedo ver el blockquote debajo de la imagen y se ve perfecto. Y cuando entre con la otra computadora (como te comente) sale sobre la imágen :S ?

Responder
JMiur  

Entiendo que eso de editar los posts es una tarea imposible, por eso apuntaba de entrada a colocar ese clear dentro del blockquote.

Esto es lo que veo ahora en un post: CAPTURA

Y así lo veo si agrego CLEAR dentro de BLOCKQUOTE CAPTURA

¿Por qué lo ves diferente en tu PC? Esa es una buena pregunta ¿Será la resolución de la pantalla? ¿Hay alguna forma de poder ver una captura de pantalla?

Responder
Sector Visual  

Claro! yo lo veo igual que tu, y ese es el modo en que para mí se ve perfecto, el problema fue que cuando vi el blog en otra computadora el recuadro azul salia encima de la imagen, y bueno tal vez haya sido ese ordenador no?

Responder
JMiur  

Eso ya es difícil de contestar, pero todo apunta a que el problema es ese.

Responder
Sector Visual  

Je, gracias, eres realmente genial!

Responder
Sector Visual  

Por cierto había querido preguntarte algo, ahorita ando haciendole un nuevo diseño al blog y quisiera saber como le puedo haer para que se muestre la fecha en todos los posts y no solo en el ultimo que publicaste en tal dia.

Gracias :)

Responder
JMiur  

Eso no es sencillo de realizar, hay que usar alguna rutina de JavaScript para eludir a Blogger.

AQUÍ hay una solución pero estaba pensaba para colocar la fecha en un calendario.

No es un tema sencillo de resolver.

Responder
Sector Visual  

Bueno gracias de todos modos, pense que era cosa de modificar algun codigo... en fin, me has sido de mucha ayuda. Gracias, supongo nos veremos por aquí mas pronto de lo que me imagino, je.

Buenas noches!

Responder
Thor  

Hola JMiur. Me sucede algo distinto, las imágenes (alojadas en picassa) sufren un problema de visualización en el bendito IE. La dimensión que les doy a mis imagenes en las entradas es mediano (250x320) pero IE las redimensiona a 20x320, este problema se soluciona con el botón "vista de compatibilidad".
Te agradeceré enormemente la ayuda que me puedas brindar :)
Este es un ejemplo de como se ven las imagenes en IE "http://libreria-universitaria.blogspot.com/2011/01/elementos-de-electromagnetismo-3ra.html"

Responder
JMiur  

En tu plantilla dice esto:

img {margin:1.5em 1.5em 1.5em 0; max-width: 100%; /* not working in IE6*/}
a img {border:none; max-width: 100%; /* not working in IE6*/}

max-width: 100% no tiene ningún sentido y es lo que provocará el error en IE; cámbialo así:

img {margin:1.5em 1.5em 1.5em 0;}
a img {border:none;}

Responder
Salud y Energía  

yo quisiera solucionar mi problema en IE con respecto a las entradas resumidas y el thumbnail o imagen de estas mismas ya que en IE la imagen se reduce demasiado en width y no logro solucionarlo alguna idea?

este es mi blog Salud Bienestar

Responder
Salud y Energía  

ok ya lo solucione, al escribir mi comentario y ver el consejo en esta entrada, pues era obvio que tenia que trabajar con el width, logre encontrar donde colocarlo, y listo!! mi blog ya se ve bien en IE, Gracias por el consejo :)

Responder
David Carrizo  

hola, perdon por la ignorancia, pero soy mas q nuevo y a pesar de todo sus consejo, (q me ayudaron a solucionar muchisimos problema) tengo uno mas grande, hice una pagina web a partir de una plantilla, y de ahi fui aprendiendo, ahora veo q al minimizar de tamaño mi web, las columnas se me superponen, aparte creo q la hice muy ancha, tendra alguna solucion? o estoy frito y tengo q editarla de nuevo, si por ahi se da una vueltita y me puede dar un cosejo... me salvaria la vida jaja (www.pasionalbitos.com) gracias!!!

JMiur  

Supongo que no te refieres a minimizarla sino a cambiar el tamaño de la ventana del navegador. Si es así, claro, al achicar el navegador, cierto contenido desaparecerá o se superpondrá ya que los anchos están definido con valores fijos; por ejemplo width:1200px

Si quieres que el contenido se adapte a la resolución debes re-diseñar el sitio, teniendo en cuenta eso y usando @media para establecer reglas de estilo diferenciadas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR