3 column, equal height, round corners, alpha png

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Something that I've been trying to do for a long time is a 3 column layout
where all three columns have equal height, and have rounded corners
implemented using PNGs with alpha.

One of my early attempts is here:
http://www.nrkn.com/3ColRoundAlpha /

It shows a bunch of different methods that I tried.  You'll see that not
only is there a hell of a lot of nesting of divs, but the page is very slow
to load because there are a lot of image elements making up the various
pieces of the rounded corner box.  Also, because I rely on display:
table-cell for the equal height, it doesn't work in IE.  The only
cross-browser solution I've found so far is just to use a table.  Of course,
I'd rather do it with html/css if possible.

Here is my new attempt, using absolute positioning and z-index to achieve
equal height columns.  It has some problems which I'll go into a little

http://www.nrkn.com/3ColEqual /

In my new attempt, there is a lot less nesting of divs (still not ideal but
I think I am getting close to the minimum number required for the desired
effect), also I have combined the images so that there are 5 images that
make up the boxes rather than 9, this makes quite a difference in page load
times (the images themselves are fairly tiny, it's the multiple http
requests that slow things down).

I've only tested in IE 6 & 7, Opera 9 and FF 2.

It works in all of them except IE 6.  However, in IE 7 there is a horizontal
scrollbar.  Anyone know what's causing this?

In IE 6... egads.  First, I haven't implemnented the alpha hack, but forget
that for now.  The backgrounds don't show up at all for the absolutely
positioned divs, any idea why?

Also, in IE 6 the tops of the columns have gaps in them, whereas in the
other browsers they fit together snugly, any ideas?

Site Timeline