I’ve recently been spending a lot of time working on lots of new code (lots of JavaScript, PHP, HTML and CSS) for the Lab Rescue. I do all my testing in Firefox on my Macbook, using the fantastic Firebug debugger. Once everything was working, I booted up Windows XP and Internet Explorer 7 to confirm that it worked there as well. As soon as I opened the page in IE7 though, the browser window vanished, and IE7 exited without any warning or crash report.
I did my usual debugging technique of removing bits of code and trying again, so that when the crash stopped happening, I’d know which bit of code to focus my efforts on. Imagine my surprise when I had eliminated all my Javascript, and had gotten down to one line of actual HTML, and the crash was still happening! The one line was this:
1 | <button title="Example" value='foo'>Example 1</button> |
Since this innocent line couldn’t possibly be the problem (or Microsoft would be in big trouble!), the only other place to check was the style sheet. Whittling it down, I ended up with the above HTML line, and this single style statement in the style sheet:
1 2 3 | button[value='foo'] { border: 2px solid red; } |
With this simple attempt to style a button based on its value, IE7 would instantly crash. Go ahead, try it… open IE7 and click here. I haven’t been able to find any info on this problem online, but I’m pretty sure I’m not trying to do anything invalid (and even if I was, I would expect a browser to ignore the invalid code rather than silently crash). Anyway, it was a frustrating couple of hours trying to track down this problem, and then having to find a workaround which wasn’t nearly as elegant as the original solution.
One more reason (as if there weren’t enough already) to use Firefox!