Incompatibilidad entre Mozilla Firefox y un efecto Tooltip

Alvar0 · #1 (**permalink**) 22/07/2008, 10:16

Tengo montanda una pagina web que estoy apunto de subir.
Esta optimizada (creo) tanto para IE como para Mozilla. El problemas es con un efecto Tooltip que he incorporado para dar mas dinamismo a la informacion.

Aqui dejo un link de ejemplo:

http://www.spanishteachers.co.uk/web/pricing_services/index.html

Cuando pasas el raton sobre el icono de verificacion verde, aparece un cuatro informativo. Con internet explorer funciona perfectamente. Si lo intentas con Mozilla se ve descuadrado por alguna razon que no puedo comprender.

Alguien me puede ayudar con esto?, por que me estoi desesperando.

Muchas gracias por vuestro tiempo.

ssclamp · #2 (**permalink**) 22/07/2008, 11:31

Aparte del problema que mencionas, que no he tenido tiempo de analizar, te comento que la página tiene problemas con iexplorer 6 (es necesario pensar que más del 40% del tráfico web se hace todavía usando iexplorer 6): este explorador no soporta las transparencias de los png y tu página se ve mal en ese explorador.
Aquí puedes descargar este javascript que soluciona el problema (tiene muy poco peso):

http://labs.unitinteractive.com/down...unitpngfix.zip

Y la incluyes en el header, así:

<script type="text/javascript" src="unitpngfix.js"></script>

Saludos

Mikmoro · #3 (**permalink**) 22/07/2008, 11:40

Y de paso, creo que el problema está en la tabla que dibuja el javascript over.js para pintar el tooltip. Busca cambiar esos valores de height, padding, etc., que tienen las celdas, a ver si lo encuentras.

Mikel.

Alvar0 · #4 (**permalink**) 22/07/2008, 15:08

Cita:

Iniciado por ssclamp

Aparte del problema que mencionas, que no he tenido tiempo de analizar, te comento que la página tiene problemas con iexplorer 6 (es necesario pensar que más del 40% del tráfico web se hace todavía usando iexplorer 6): este explorador no soporta las transparencias de los png y tu página se ve mal en ese explorador.
Aquí puedes descargar este javascript que soluciona el problema (tiene muy poco peso):

http://labs.unitinteractive.com/downloads/unitpngfix.zip

Y la incluyes en el header, así:

<script type="text/javascript" src="unitpngfix.js"></script>

Saludos

Gracias por tu respuesta.

He insertado el la secuencia javascript que me has dixo y lo que ha sucedido es que ahora en el iexplorer 7 no como antes, se a descuadrado. Te pediria por favor que me digas que puedo hacer pues a dia de hoy no tenia conocimiento de esta incompatibilidad.

Seria bueno si cambio las imagenes a no transparentes (puedo hacerlo) ?

He usado el scrip de esta pagina que he encontrado en solo en esta pagina http://www.spanishteachers.co.uk/web/

funciona?

EDITO:

siguiendo tu consejo e encontrado esta web http://homepage.ntlworld.com/bobosola/index.htm que tb ofrece un .js para paliar este defecto en el iexplorer 6. Lo e instalado y parece que funciona, (yo no puedo apreciarlo ya que no uso explorer 6) pero al menos no se me desconfigura el iexplorer 7 como en el otro.

Alvar0 · #5 (**permalink**) 22/07/2008, 15:11

Cita:

Iniciado por Mikmoro

Y de paso, creo que el problema está en la tabla que dibuja el javascript over.js para pintar el tooltip. Busca cambiar esos valores de height, padding, etc., que tienen las celdas, a ver si lo encuentras.

Mikel.

EL problema es que todo lo que toque sobre esos valores desconfigura la vision en el iexplorer en el cual se ve perfecto. Voi a seguir tu consejo a ver si tocando esto puedo arreglarlo y te cuento.

Gracias.

Mikmoro · #6 (**permalink**) 22/07/2008, 16:05

Bueno, fíjate en una cosa importante: en el script de dinamycdrive, de dónde creo que lo has tomado para modificarlo, funciona correctamente, sólo que en sus ejemplo no está la parte saliente del "bocadillo", (la punta hacia arriba). Comparando con el ejemplo y viendo qué has modificado, creo que podrás encontrar el problema.

Mikel.

ssclamp · #7 (**permalink**) 22/07/2008, 17:00

He modificado un poco el script over.js y ahora funciona perfectamente en ie (6 y 7), firefox y opera.

Respecto a la transparencia en los png, te sugiero que los conviertas a gif (la calidad que te va a dar es practicamente la misma y consigues total compatibilidad con todos los browsers).

He preparado un pequeño paquete (.rar) con los cambios (incluyendo el nuevo over.js y el paso del png a gif -en el caso del pequeño gráfico en forma de tick-) y, si lo quieres, me puedes enviar un privado y te lo envío por mail.

También disponible para cualquier forero interesado en este estupendo tooltip.

Saludos

Alvar0 · #8 (**permalink**) 22/07/2008, 17:48

Te lo agradezco muchisimo, de verdad. Muchas muchas gracias por tu tiempo e interes. Te mando ahora mismo ese privado :)

ssclamp · #9 (**permalink**) 22/07/2008, 18:04

Enviado

Saludos

Alvar0 · #10 (**permalink**) 22/07/2008, 19:05

Hola ssclamp

he mirado el nuevo over.js que has modificado. Tu ejemplo se ve perfecto, tal y como dijistes en todos los navegadores. Lo que pasa es que cuando lo he aplicado a la web http://www.spanishteachers.co.uk/web/pricing_services/index.html mira lo que sucede.

Parace que no puede cargar todos los .gif del dibijo del tooltip. Mi ruta es la siguiente:

- index.html

- styles/over/js/

over.js
images

EDITO:

si pongo la ruta de la carpeta images asi: http://www.spanishteachers.co.uk/web/styles/over/js/images/tooltip_arrow.gif ...

Funciona totalmente, pero con el mismo problema de origen, no en firefox.

Lo unico que puedo deducir es que el desacople sucede cuando las imagenes del tooltip se linkan desde internet.

ssclamp · #11 (**permalink**) 23/07/2008, 10:01

Hola Alvar0

Si cambias la ruta de las imágenes gif del tooltip tienes que cambiar el código del over.js ya que es este javascript el que determina dónde están las imágenes.

Funciona tanto con rutas relativas (../imagenes/imagen.gif - o la que sea- ) como con rutas absolutas (http://www.tusitioweb/imagenes/imagen.gif - o la que sea-).

Saludos

Alvar0 · #12 (**permalink**) 23/07/2008, 13:35

ssclamp, ante todo te doy tanto las gracias por ayudarme con esto. Gracias de verdad.

He hecho tal y como me has dicho en el post anterior. Los he exo con rutas absolutas ya que si lo hago con relativas simplemente no funciona parece que no funcina.

El resultado es este:

http://www.spanishteachers.co.uk/web/pricing_services/index.html

el mismo resultado que antes de modificar el script.

Mi observacion (corro el riesgo de que sea una tonteria) es que algo sucede ya que las rutas realtivas de los gif simplemente no funciona, y cuando se hace con rutas absolutas si, pero no en firefox, como al principio.

<img src="http://www.spanishteachers.co.uk/web/styles/over/js/images/tooltip_arrow.gif"

La ruta relativa de el folder "images" es sobre la posicion del .js? Asi es como yo lo entiendo

ssclamp · #13 (**permalink**) 23/07/2008, 15:03

Hola Alvar0

He reconstruido las rutas de tu página y he tocado los siguiente:

- La ubicación de la carpeta images del tooltip

- No soporta la declaración Strict del W3C

- La llamada al over.js hay que hacerla dentro del head (no por encima de él)

- Hay que añadir un divisor contenedor general para conseguir el centrado en iexplorer (para firefox y opera no es necesario, pero ese añadido no les afecta).

- Como consecuencia del nuevo divisor hay que añadirle al div id="wrapper" un align="left"

Ahora funciona la adaptación a tu página perfectamente en ie, firefox y opera.

Te lo envío en rar a tu correo.

Alvar0 · #14 (**permalink**) 23/07/2008, 16:25

http://www.spanishteachers.co.uk/web/testing/www/

Funciona!!!

Eres un autentico artista!
Ahora que es lo que tengo ke hacer para ponerlo en la web? explicame un poco asi por encima por favor que estoi deseando implementarlo! mil gracias

ssclamp · #15 (**permalink**) 23/07/2008, 18:05

Hola Alvar0

He detectado que tenias una incongruencia en el codigo html que sólo se manifestaba en ie version 6 y la he corregido. Te adjunto la versión arreglada.

Para implementarlo en tus páginas sólo tienes que ver la estructura y leer el código fuente del html: te he escrito comentarios en todo lo que he tocado.

Suerte, ahora lo tienes fácil.

Saludos

Alvar0 · #16 (**permalink**) 23/07/2008, 20:52

Hola de nuevo,

A riesgo de paracer verdaderamnete tonto te comento:

si quito esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Esto se desactiva:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-gb" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<meta name="description" content="The best way to learn Spanish in a few months with our intensive courses, on a one-to-one basis with a native speaker. FIRST LESSON FREE! - no catches" />
<meta name="keywords" content="Spanish Lessons, Spanish teachers, lessons in manchester, learn spanish in manchester, intensive courses, spanish tutors, profesional tutoring, lesson free, on a one-to-one basis, one-to-one, private teachers, Manchester, London, liverpool, Birmingham , UK, England, United Kingdom" />
<meta name="verify-v1" content="HbgXi9OMs7SlekkJEfV6UImmSiuNqPaHEQXCiDQs8 IY=" />

El main.ccs y demas. Resultado, la pagina queda desfigurada y supogo que google boot tenga dificultades para leer la descripcion de la web que usa para posicionarme.

EDITO:

bien, sonó la fluta!

He añadido esto en sustitucion de lo otro explicado arriba:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Y funciona!! con el ff y con el ie7 (el tooltip me refiero)

Resultado SIN MODIFICAR EL CODIGO HTML: http://www.spanishteachers.co.uk/web...ces/index.html

Resultado 2 MODIFICADO EL CODIGO HTML: http://www.spanishteachers.co.uk/web/index2.html

El editor web me dice esto sobre:
<div align="center">
<div id="wrapper" align="left">
Sobre esto el editor web me dice que la declaracion "div align" es catalogada por el consorcio WWW como outdated, obsoleta vamos.

Puedes ssclam por favor testealo con el ie6? a ver si era esta la fuente del error?

Mil gracias!

ssclamp · #17 (**permalink**) 24/07/2008, 09:14

Hola Alvar0

Ahora se ve perfecto en ie7, firefox y opera. Todo funciona bien.

En ie6 todo funciona también excepto la transparencia de los gráficos png. Debes estudiar esto (el camino más directo en tu caso sería sustituir los png por gif ya que en tus gráficos no significaría ninguna merma en la calidad gráfica) o estudiar el tema de png fix para internet explorer 6. Es importante considerar a este browser, aún siendo un mal navegador, es el más usado actualmente.

Saludos

Alvar0 · #18 (**permalink**) 24/07/2008, 09:37

Hola ssclamp.

Otra vez gracias por ayudarme con el tooltip, sin ti hubiera sido imposible :), esto me dio muchos dolores de cabeza.

Sobre la incompatibilidad del ie6 e aplicado un fix.jp que encontre en internet

http://www.spanishteachers.co.uk/web...ces/index.html

Puedes decirme si arregla es desajuste en ie6? (o dime si es posible donde puedo testearlo por mi mismo?)

MIl millones de gracias por todo esta inestimable ayuda, de verdad.

ssclamp · #19 (**permalink**) 24/07/2008, 10:23

Hola Alvar0

Testeado en ie6 el fix del png: ahora se ve perfecto.

Creo que ya lo tienes solucionado.

Saludos

Alvar0 · #20 (**permalink**) 25/07/2008, 09:08

Mil gracias!!!! No se como agradecerte. Mucgas gracias.

Para concluir que es lo que pasaba?

Fue poner esto y funciono...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Con esto, no puedo aplicar tus modificaciones en la estructura por que me dice ke es incompatible... pero funciona.

Si me puedes explicar asi un poco que es lo que pasaba te lo agradeceria.