3 column, equal height, round corners, alpha png

Discussion in 'HTML' started by Nik Coughlin, May 15, 2007.

  1. Nik Coughlin

    Nik Coughlin Guest

    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?
    Nik Coughlin, May 15, 2007
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lee Moore
    Replies:
    0
    Views:
    367
    Lee Moore
    Feb 6, 2004
  2. rf

    Round corners with CSS

    rf, Sep 14, 2003, in forum: HTML
    Replies:
    6
    Views:
    602
    e n | c k m a
    Sep 14, 2003
  3. Jim Higson
    Replies:
    6
    Views:
    453
    Jim Higson
    Sep 12, 2004
  4. Nik Coughin
    Replies:
    9
    Views:
    610
    Nik Coughlin
    Nov 30, 2004
  5. Replies:
    2
    Views:
    1,051
    Nik Coughlin
    Mar 11, 2007
Loading...

Share This Page