Today was an interesting day for debugging.
We’ve developed a flash application for a client that didn’t quite work right in IE6. Today the client called and said this is really going to be a problem as most of the people who will be using the application haven’t upgraded to IE7 and don’t use Firefox (hence they use IE6). So I spent some time trying to track down the problem.
I’d looked at it this before and couldn’t figure it out, so this time I put on my Stubborn Hat and dug in. I knew I had a “screen shot” that worked fine in IE6 while the actual application did not. So the first thing I did was make a static document of the HTML generated by the app. Now what? Should I gradually make the “screen shot” look like the application until the Flash bit stopped working? Or should I gradually change the application’s HTML until the Flash bit suddenly started working? Either way it was going to be a long tedious process. For no conscious reason other than “my gut told me to”, I chose the latter.
Actually, at first I thought it must be some quirk of how IE6 deals with javascript since that’s how we interface with Flash. But after a few minutes exploring that idea, I realized that the “screen shot” and the actual application would have the same quirks as the javascript parts were virtually identical. So, I started in on munging the non-javascript parts of the HTML. After quite a while of carefully removing bits of HTML and not getting the Flash portion of the application to do much of anything I was beginning to despair that I’d picked the wrong strategy. It didn’t seem that I was making any headway against the problem. I’d remove a small div and reload the page, remove a table tag and reload the page, etc. Nothing seemed to make a difference (but on the plus side, I had a much smalled document to deal with :-) Then … finally the Flash app worked in IE6!
And what, pray tell, was the problem? The application had a div tag with an id of ‘left’. Change the id to anything else and the Flash parts work as expected.