Prototype Internet Explorer Gotchas

One week into building a technology preview for a new web application, I finally decided to check and “just make sure” that everything was working as well in Windows Internet Explorer as it was working in Safari and Firefox. Imagine my chagrin when the page loaded and was __completely blank__.

Not even a joyous error message or self-destruct error report to pore over for clues. Just a blank screen. Nothing. Nada.

First some background… I’m building the client side of the in Javascript using the amazing [Prototype](http://www.prototypejs.org/) and [Scriptaculous](http://script.aculo.us/) libraries.

It turns out that there are two **very** important things to keep in mind for Internet Explorer. First, `Element.extend` is your friend when adding to the DOM. Example:

`var my_div = document.createElement(‘div’);
Element.extend(my_div); // without this line, the next line causes IE to stop processing the script!
my_div.addClassName(‘thumbnail’);
`

Second, be careful what you use as names for custom attributes! If you inadvertently [cross the streams](http://en.wikipedia.org/wiki/Proton_Pack#Crossing_the_Streams) by using form attributes on non-form elements then Internet Explorer will suffer total protonic reversal (or, in other words, forcibly shut down). Example:

`var my_li = document.createElement(‘li’);
Element.extend(my_li);
my_li.setAttribute(‘value’, s.id); // IE self-destructs
my_li.setAttribute(‘valuetest’, s.id); // IE works fine
`

Although there is little else I can share about the application I am working on, suffice it to say in about, oh, six months I should have both good news to share and a fantastic grasp on Javascript programming. :)