I spent a good chunk of my day today diagnosing an odd problem with IE that I figured I’d share in case it might somehow help someone else out there.
I’ve known for a while that there are a few pluses and minuses to using the innerHTML property instead of DOM methods to create/modify page contents in javascript. IE in particular has some oddities to avoid (for example tables have a read-only innerHTML property…attempting to set it will result in a nasty error). All this considered though, there are many advantages as well. I was testing some code I’d written and found that on some blogs this new code would crash (only in IE of course), but on others it’d be fine. I checked the troublesome page for tables, but it didn’t have any. I then went to the source of all knowledge, Google, and started my search for other odd situations with IE and innerHTML that might be causing my troubles.
Unfortunately I didn’t find much of anything useful. There were a lot of interesting articles about modifications to using the innerHTML property to speed up rendering, special instances where using innerHTML produced unexpected results, etc…but nothing that related to the error (and crash) that I was experiencing. So I broke down to doing the trial and error method…what if I put the code here instead of there….ok, now how about there instead. Eventually I ended up narrowing down the problem until I found it.
The problem came from the style attribute “height:auto”. It appears that if an element (in this case it was a <p> element, but it seems to be true of <em>, and probably others as well) has this attribute then setting the innerHTML property of a child of that element causes IE to crash and give a very unhelpful “an unknown runtime error has occurred” error message. I tried it with <div>’s and <a>’s as the child nodes and it seems to break for both.
So not sure if this helps anyone else out there, but it definitely took me a while to hunt down. The joys of web programming….
