The Path to Zen

Sitemesh+YUI+IE=2 lessons learned

I’ve been using the Panel component in YUI(Yahoo UI Library) to build an AJAX page, which as part of the whole web application is wrapped by the standard boilerplate via sitemesh. It worked out all well and fairly straightforward - well, at least in Firefox and Opera, but in the dreaded, we-render-pages-with-lots-of-imagination IE 6, the panel showed up with a totally messed up layout, and worse, under the modal mode the entire page, including the panel itself, was masked with a 0.5 opaque layer and refused to take any input.

The messed up layout was easy to fix - I accidentally set omit-xml-declaration to true for that jspx page, so the page rendered starts with the xml declaration line before the xhtml doctype, which, of course, kicked IE into the quirks mode. (It kind of makes some hell of sense, though. After all, a page starting with xml declaration cannot possibly be an XML document, can it?)

Now, the tricky part. The YUI example page worked fine in IE, so that made me feel better because for a moment there I was panicking thinking how I wasted all the time building the page with some wrong tool. After some reducing, diffing, and turning every stone over, well, it turned out that, according to the YUI Panel document, for panels that are not dynamically created by javascript, we only need to call panel.render() without passing a parent node, but that actually only works when the panel is a direct child of document.body, which happens not to be the case in my page - once sitemesh has applied the page template, what used to be the body becomes wrapped in a div. The fix itself is quite simple though. Instead of calling render(), always call render(document.body).