A tip from one of the panelists at SXSW, in the CSS Problem Solving session: “If you’re working with CSS and need a good analysis/debugging tool, it doesn’t get any better than Xyle Scope. Mac only, but if you don’t own a Mac, Xyle Scope is a good reason to get one.”
Many CSS designs hide browser discrepancies by allowing white space to overlap, etc. The thing about the current Birdhouse design is that the divs are packed very tightly together, allowing no room for that kind of masking. Tearing out serious hair recently trying to get this style working in all browsers (don’t get me started on MSIE and CSS), with no div overlaps and no fugly gaps. Xyle Scope didn’t magically solve the problem, but it did give me a window onto the primary culprit last night, which I couldn’t have gotten any other way.
If you care:
The problem this template was having that the old MT version didn’t have was that there was a bit of right margin attached to the h2 .nav declaration, which handles the horizontal separators in the sidebars. In compliant browsers, that margin was clipped by its bounding box, but in MSIE, it was rendered, which in turn made its containing box too wide to fit into the 200px sidebar, which in turn pushed the entire sidebar down to the bottom of the page. I had been fixated on padding and margins in the boxes themselves — Xyle Scope helped reveal that the problem lie elsewhere entirely. The WP template I used as a foundation for this design had used h2 .nav in a context where this didn’t matter, so it was a synergistic reaction.
(Screenshot above does not illustrate this problem — just there to show how it reveals all of the inheritances, dimensions, etc.)