Sometimes bugs really astound me. The current tom.net.nz theme has been active for at least 6 months. When I first developed the theme, it was in Firefox, and looked great. But then I started using Chrome and noticed the following:
That is, sidebar text that looked fine in Firefox was now weirdly spaced out in Chrome, and some elements (e.g. Archive date links) that were meant to be plain text now had Cufon styling.
For the longest time (well ok, maybe ~2 hours — still, a long time for such a minor annoyance), I searched my code, and tried out many different things in order to find a fix. I tried changing the Cufon selector (bypassing jQuery, for example), getting deep into the WordPress API to modify the output of the archive date list, messing with CSS, upgrading Cufon/jQuery, etc etc etc. Nothing I tried gave satisfactory results. Eventually I just gave up, and chalked it up as a behaviour oddity of jQuery selectors or Cufon, or something (I just knew it was nothing to do with me — how could it be, after putting so much time into it, right?!).
So today I was preparing to describe this oddity to someone as being a concrete example of weird JS in Chrome, and I happened to find this in part of the source:
See the problem? I had fudged the closing h1 tag. So basically, the behaviour I was seeing was not a bug in any of the libraries I was using, but rather Chrome and Firefox choosing to treat my broken code differently. It was also a frustratingly simple fix to what I had assumed was a complex problem (and had spent considerable time trying to fix). Going back for a second look, I found the 6-month-old bug almost by accident, in the space of about 30 seconds.
So at long last, my sidebar works correctly in all major browsers. Hurray! I just wish I’d had the aptitude to run my HTML through a validator or check it fully by hand back when the problem first manifested… Hindsight, as always, is 20⁄20.