4 replies [Last post]
nrkn
nrkn's picture
Offline
newbie
Last seen: 14 years 36 weeks ago
Timezone: GMT+12
Joined: 2007-05-16
Posts: 4
Points: 0

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?

nrkn
nrkn's picture
Offline
newbie
Last seen: 14 years 36 weeks ago
Timezone: GMT+12
Joined: 2007-05-16
Posts: 4
Points: 0

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)

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

nrkn
nrkn's picture
Offline
newbie
Last seen: 14 years 36 weeks ago
Timezone: GMT+12
Joined: 2007-05-16
Posts: 4
Points: 0

Anyone?

Anyone?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

make your life

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

nrkn
nrkn's picture
Offline
newbie
Last seen: 14 years 36 weeks ago
Timezone: GMT+12
Joined: 2007-05-16
Posts: 4
Points: 0

That's interesting, I have

That's interesting, I have some classes in server side code that do the same thing (even using similar syntax). I'm always wary of relying on JavaScript, even though most people have it turned on, but in this case where it just won't work in IE 6 otherwise I have to say you're probably right.