I've been tweaking the sidebar some more, and have brought it to a state where different sections can be collapsed/expanded. Furthermore, with the use of a cookie, the state of each section is remembered across page views. What has been pleasant about this experience is that it worked almost exactly as advertised. That is, there is a very clear separation of the JavaScript code and the XHTML/CSS that is used to actually create the sidebar. With the exception of a minor tweak (a <div> wrapping each sidebar box), I didn't have to change anything in the markup. Instead, all dynamic functionality was layered on top of it in a script file.

The script tries to be reasonably intelligent by hiding unneeded borders, though IE6 doesn't seem to cope with that as well as I'd like (for now I'm tolerating the off-by-one errors). Another issue that I ran into was deciding when to do the initial loading of the sidebar state. Ideally it should be done after the page is initially laid out (this was more important in an earlier revision, where each box had a grid background and thus the heights needed to be multiples of eight - this required me to grab the offsetHeight of the item and use it to generate a dynamic style.height attribute, much in the same way that I handle the centering of the banner). Setting an onload handler for the document wasn't really an option, since the sidebar has to be self-contained. Setting the window.onload property in the script sort of worked, except some browsers (Gecko-based ones) still hadn't fully laid out the page when the handler was called. In the end, by placing the call to the handler after the the relevant <div>'s in the code was the best compromise.

On a somewhat related note (i.e. I did this since I was tweaking other images), I've switched all site images (not entry ones) to GIF. I had been using PNG for the (slight) size advantage as well in terms of doing my duty in spreading the PNG mindshare. However, it appeared to be impossible to get the gray in the PNG to match the #333 gray that I use in my markup. Specifically, it seemed to be impossible to do something that would please all browsers. The best one can do is everything but Safari, but seeing as that it is my browser of choice, I couldn't make the sacrifice. Of course I'm not the only one to notice the sad state of PNG support in browsers, but it's still rather disappointing after all the hype to be forced to back to a format from the 80s.