Some of the wrinkles (as "notes to self"):
Firefox 2 does not understand inline-block. IE7 does, but only for inline elements (not 'div's and 'li's). One solution to this is to make almost everything a span, and then:
display: table-cell;Firefox 2 will default to table-cell (skipping the following inline-block). Most other browsers will use inline-block.
IE8, even though it has better support, gets things wrong with resized images in inline-blocks. Specifically, if you resize the image by setting just the height, although it readjusts the width of the image as it displays, it still uses the old image width when calculating the size of the block (meaning lots of excess whitespace).
Chrome (so perhaps also Safari) has an odd effect when you try to work around browser differences by lining inline-blocks up as
diplay: table-cellA paragraph placed in the code above nested table content within the table-cell will often appear underneath the table-cell instead of above it. This can be fixed by setting the paragraph as