Update: This entire entry is obsolete because I am now on Flickr.
New slide layout in the photos. I had originally wanted a right-floated caption to come first before the photo, similar to the structure of Matt Haughey’s 10Years photoblog. (Look at it without CSS in Lynx or Opera and note how the title and caption appear above the photo. Preferred semantics.) Turns out that blocks of text are fairly hard to consistently float around variable-width elements like photos; wider images get bumped down below the text, and using absolute positions — as Doug Bowman does in his excellent work on the 10Years CSS — involves more hacks than I’m willing to live with. (View the 10Years HTML source and you’ll see a couple of style attributes and inline CSS declarations needed for individual photos. Ack.)
After about a week of on-off CSS struggling, I settled for a compromise: the caption text comes after the image in the HTML, and CSS floats the image left, but a hidden (via “display: none”) navigator sits above the image for the benefit of non-CSS or Netscape 4.x users, so they don’t have to keep scrolling down for the PREV/NEXT links.
Oh, and since big white borders around photos seem to be the latest fashion (see these: 1, 2, 3), I have joined the trend. It’s a simple matter of img.photo { display: block; padding: 1em; background: white; } It doesn’t work in IE5.x, though; small loss.
The layout looks best in Safari, of course, but will display fine in all browsers, with just minor glitches across platforms.
Steal CSS code here. Enjoy.