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