Recently at my day job, we have been working on a massive overhaul of our main client’s website. This overhaul touches every public-facing page on the site, which is no small number.
We’ve come across quite a few strange little things while working through this project, and I want to document as many of them as I can so that searching for it in the future is easier for someone out there.
If Internet Explorer seems to be breaking your layout while every other browser on the planet is rendering just fine, look before the Doctype declaration for the answer to your problems.
Comments, Comments
Our client’s site is running on a very well established Java application, and has been suffering from the effects of years of shared JSP includes, quick hacks and last minute bug fixes. Attempting to determine where a piece of code is coming from while viewing it in the browser can be quite cumbersome when you are faced with so many directories full of candidate files.
That’s where the scheme to show HTML comments with the filenames of the included JSPs was born. Of course, we don’t always show the comments, just when we’re in a special session “test mode.” This has made finding the source file where a bug may be living drastically easier, and helps to eliminate the amount of time spent digging through long-lived code.
But that’s where the latest problem was introduced.
Test Mode Explained
Our test mode functionality has a lot of benefit. Not only does it allow us to see the filename comments, but it also allows us to tie other similar debugging features into our JSP code where necessary.
One use-case for this functionality is in the form of external stylesheets. Rather than forcing the browser to pick up a dozen CSS files to serve to the user, each with its own HTTP request, we use a CSS loader JSP which populates a single CSS file to be served to the browser from multiple base stylesheets. This way, we don’t end up with a gigantic mess of a single stylesheet to be used everywhere on the site in order to cut down on the number of HTTP requests.
While in test mode, though, we serve the individual stylesheets rather than the single one produced by the JSP. This way we can use add-ons like Firebug to easily find the source of a certain CSS attribute, rather than digging through a one-line compressed CSS file.
Yet another reason to use test mode is the ability to quickly fill in long forms with valid data with the press of a button. This alone makes test mode a valuable tool to test functionality and design without having to re-enter data into hundreds of form fields, just to see the second step in the form process.
Ahoy, Quirks Mode!
When working in test mode with the automatic display of comments containing the filename of the included JSP files that make up a single-served HTML page, there are some occasions where the comments are coming from template files, and may print out before the Doctype declaration.
Most browsers are OK with this, or at least handle it gracefully. Internet Explorer, on the other hand, changes automatically from “Standards Mode” to “Quirks Mode”, which tends to severely break even the most standard layouts.
So what do we do?
The first thought is to use Microsoft’s built-in document compatibility definitions. That works great for IE8+, but IE7 still defaults to Quirks Mode no matter what definition is used.
After spending quite a bit of time attempting to research this online, finally we came to the conclusion that we needed to simply turn off the include comments functionality by default. It was simply easier to give up than to find a way around this strange behavior.
Taking the 10 extra seconds to manually turn on the include comments is well worth it when avoiding the hassle of debugging layouts when using IE7.
