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:
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 later:
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?
Simpler example of background not working in IE 6
Here is a simpler example of the background not showing up for an absolutely positioned div in IE 6 (as in my problem above)
That's interesting, I have