CSS, still not great

After being in the too-comfortable position of being able to develop and demo the Intelligent Book on a Mac, I finally had to bite the bullet and sort out the layout for various different browsers. Sadly, it seems that cross-browser CSS is still just as much of a pain as it ever was.

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;
display: inline-block;

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

A 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

display: table-caption