This is by far, the most frustrating error I’ve had the unfortunate luck to run into…and it all seems so simple in retrospect. If you’ve ever set a color using the style.color method in javascript, you may have encountered a compatibility problem where it works in Firefox and Safari, but not in Internet Explorer (this is not a bash IE blog post, by the way).
The Error
If you’re using Scriptaculous, like I am in Ruby on Rails:
1 | $('item_id').style.color = '#09SF0C'; |
or if you’re using the document object:
1 | document.getElementById('item_id').style.color = '#09SF0C'; |
The action will result in an error in an ‘Invalid Object’ error in Internet Explorer. Safari and Firefox will do their best, but not consistently.
The Solution
I thought, at first, that it was a coding issue where IE would treat style.color differently then the other browsers (although I could find no evidence to support that assumption), so I edited the code and tried every different combination setting the color style, but to no avail.
It turns out that no browser really likes this color #09SF0C (which is a green by the way). So, after two hours of ridiculous code editing, I started playing with the color and found a new green (#336633) that all browsers liked just fine. Code works, color changes. In retrospect, it’s all so simple…and I feel pretty bad that I didn’t think of it in the first 15 minutes. The least I could do is save someone a couple of hours. Use one of the hex colors here.
- Chris
Tags: Javascript, Programming
