<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.