Cross Browser CSS Vertical Align

I have frequently been asked, when converting people from Dreamweaver + Tables to pure CSS layouts, how to emulate the vertical alignment behaviour seen in table-cells. Due to Firefox’s lack of support for inline-block, and IE’s lack of support for table-cell, this has been a pretty intractable problem. I had a cause to have a bash at it today – given the task of creating neatly laid out image thumbnail galleries from unknown-sized images, without resorting to server side image-sniffing, and have cobbled together the following solution:
Pure CSS Thumbnails From Random Sized Images

I should point out here for the purists that it is not _pure_ css. It uses a single ‘expression’ for IE6 to get around the lack of Max-Height – a truly insoluble item I believe. It also relies on a couple of lesser known -moz selectors for FF2 which for some reason lacked inline-block. These are: display: -moz-inline-box and -moz-inline-stack.

For the rest, I think you are better looking at the example, which has heavily commented CSS included.

No related posts.

Tags: browsers, CSS, design, images