A little learning experience this morning, complements of an hour of my life I’ll never get back: if you look at Internet Explorer 6 even slightly askance, you’ll turn on its “Quirks Mode” rendering engine, and screw up your carefully-designed website in ways you can’t even begin to imagine.

The full story: about two weeks ago, I found myself debugging a pretty complex set of new procedures I added to a database-driven app I’ve written in my lab. At some point, I wanted to see the database query that was being generated by a subroutine, so I added some code that wrote the query, inside HTML comment tags, to the top of the generated page (so that it would be viewable in the page’s source but not on the rendered page). With that, I was able to figure out the problems I was seeing, fixed ‘em all, and cleaned up after myself. Nearly all my programming takes place on my Powerbook, with Firefox and Safari as my browsers; testing out the pages that were affected by the subroutine, everything looked great, so I was happy.

Now flash-forward to today: as I’m sitting in clinic using the Windows 2000 and Internet Explorer 6 machines that adorn our workroom, I go to my app and notice how badly everything renders. Literally, things that should be centered are flush to the left, text sizes seem to be randomly distributed throughout the range of huge to itty-bitty, and blocks of content are overlapping each other willy-nilly. I grab my laptop, start debugging the layout of the page, and can’t for the life of me figure out why some things work perfectly and others don’t, and naturally start searching Google Groups for answers. I didn’t find much that applied to what I was seeing other than a few posts that mentioned IE’s Quirks Mode, so I viewed the source of the page and realized that the one thing I had neglected to clean up was the debugging code I put in, and it was still being output at the top of the page’s source. Apparently, that’s all it takes to activate IE’s quirks-based rendering engine, because once I removed that debugging string, everything returned to normal in IE 6.

I’m posting this as much as a reminder to myself as for other people; never assume that your debugging code is totally silent, and never ever expect IE to exhibit predictable behavior.