PROBLEMAS DE COMPATIBILIDAD

ENTRE IE y FIREFOX getElementById

Todos los que empezamos con DHTML o JavaScript utilizando Microsoft Internet Explorer (en

adelante IE), nos solemos encomntrar en un problema cuando intentamos ejecutar nuestro script en

otro navegador como puede ser Firefox, Netscape, Opera... y es que probablmente si no hemos

tenido cuidado no nos funcionará nada.

Pues bien, resulta que IE, es capaz de identificar un elemento simplemente por su atributo id, de

manera que si hacemos:

<textarea id="texto">

</textarea>

<script>

alert(texto.value)

</script>

Nos funcionará correctamente, pero solo en IE, porque los otros navegadores nescesitan usar una

coleccion o una referencia al obejto para conseguir lo mismo, de manera que podriamos recurrir a

document.forms[... o utilizar la funcion getElementById.

Esta función nos devuelve la referéncia al objeto que tiene como id el valor pasado, veamos cómo

sería:

<textarea id="texto">

</textarea>

<script>

alert(document.getElementById('texto').value)

</script>

Los atributos alt y title

Los atributos alt y title, són atributos que nos permiten indicar un texto descriptivo para un

elemento HTML, según la especificación del W3C, su función sería:

alt - Indica un texto alternatívo a un elemento no textual

title - Indica un texto a mostrar en un tooltip cuando el mouse está sobre el objeto

Ejemplo de tooltip que debe ser indicado con title

Diferéncias de uso

Pero los que estaréis acostumbrados a programar para Internet Explorer, habréis detectado, que al

indicar un atributo alt este trabaja a su vez cómo title y nos muestra el tooltip.

<!-- Tooltip con Internet Explorer -->

<img alt="Logo de la web"

src="http://www.programacionweb.net/imagen.gif">

Esto no es así con otros navegadores como por ejemplo Firefox, en su caso, el atributo alt se utiliza

sólo como texto alternativo y para mostrar el tooltip hay que utilizar el atributo title ( compatible

con IE y Firefox ).

<!-- Tooltip compatible con W3C -->

<img title="Logo de la web" alt="Texto alternativo"

src="http://www.programacionweb.net/imagen.gif">

Otra pequeña diferéncia en la utilización de tooltips con ambos navegadores es la utilización de

tooltips multilínea que con Microsoft Internet Explorer sería así:

<img title="Linea 1

Linea 2

Linea 3">

Pero que tendría resultados inesperados en Firefox:

Ejemplo de title multilínea en ambos navegadores

Diferencias en valores predefinidos Incluso trabajando en modo estricto, es frecuente que el tamaño de los objetos sea diferente entre

Internet Explorer, Mozilla Firefox...

Esto suele ser debido a que cada navegador utiliza diferentes valores predeterminados para las

propiedades del objeto, por lo tanto, si no hemos indicado el padding o el margen de objeto

podremos encontrarnos que el tamaño de estos sea distinto en cada navegador.

Indicaremos un tamaño de margen y relleno aplicable a todos los objetos del documento de manera

que el navegador no deberá aplicar los valores predeterminados en ningún caso, veamos cómo lo

haremos facilmente con un selector *:

* {

margin: 0px;

padding: 0px;

}

Existen también otros atributos que tienen valores diferentes en diferentes navegadores pero no

suelen afectar a la forma con la que se visualiza una página