I spent WAY too long today fighting an issue that turned out to be fairly obvious in the end.
I’m working on a web-based application that gives our internal users a front-end to our billing system for quick access to support information. I’ve recently re-worked the whole thing to take advantage of modal windows, which has greatly cut down on a lot of the navigation time needed by our techs to find the information they need.
Anyway, one of the items I’ve had on my list to work on is to make it possible to print the contents of the modal windows. With the old version of the app, the info would have populated the entire browser window and was easy to print. With this new system, a window print would obviously print way to much. In addition, it wouldn’t print everything in the modal window, just what was currently visible due to scrolling.
Rather than re-invent the wheel, I decided to try a jQuery plugin. After reviewing what was available, I picked jQuery Print Element. It was a fairly recently released plugin, which hopefully meant it would be compatible with current browsers. It also had some flexibility in use, which I thought would be helpful.
I downloaded it, added the relevant <link> and Javascript code to implement it, and voila! When I clicked on my “Print” link, the contents of the modal window appeared in a popup window, and a Print dialog opened. When I selected to Print or Cancel the dialog, the popup window closed automatically. Perfect! Well, almost….
Within the layout of the modal window were a few tables – YES, for tabular data. The problem was, their font size was much larger than expected. I used Chrome Inspect Element to look at the CSS and inheritance, and it just didn’t make sense. My modal window tables were inheriting a font-size of 70% from the main <body> tag and looked normal. My popup window, in contrast, claimed to be getting a font-size of medium from a user agent stylesheet. Wierd, especially since when I double-checked my stylesheets there definitely wasn’t any other references to font-size.
I went off on a tangent for awhile looking at the <link> media option, mainly because I’ve never had to worry about it before and it was set differently in my modal window code than in the popup code. No luck there, but it was worth it to learn more about that feature.
So, right before time to call it a day, I figured out what was wrong. The HTML generated by the plugin didn’t pay any attention to my DOCTYPE that I used on my main application code. In fact, it didn’t set DOCTYPE at all, so apparently the browsers were running in “quirks” mode. In quirks mode tables don’t inherit font-size attributes from their parent tags.
A quick hack to insert the DOCTYPE code into the plugin and things were happy. Now I just need to go back and build that into the plugin to be automatic and duplicate the DOCTYPE from the main browser window and submit it back to the author.
All in all, a frustrating problem, but when it worked right at the end, it was a sweet victory!
