N
Nik Coughlin
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
later:
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?
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
later:
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?