This works at least in IE of version 7.0.5730.11.

Having said that, however, as outlined on http://www.mathesonbayley.com/holy_grail.php , the majority of the 'hacks' in my code that you refer to are ONLY necessary IF you want to do some specific things (which many people will not want/need to do):

To clarify, the 'firefox container divs' and IE conditional comments in my code are only necessary IF you have floated elements in the center column AS WELL AS more than one image in the center column OVER WHICH you wish text to appear (i.e. 'pseudo-background images', resolving the CSS limit of most browsers of having more than one background-image per element).
You can see those multiple background images on http://www.mathesonbayley.com in the center column (one in the top right, one in the top left, and the musical stave farther down the page).

If such multiple background images are not needed, then (again, as explained on http://www.mathesonbayley.com/holy_grail.php ), all those 'hacks' can be ignored.

By the way, I keep putting 'hacks' in inverted commas coz I consider these particular examples to be 'fixes'/'patches' of an unavoidable nature, rather than 'hacks' in the sense of non-future-proofed shenanigans such as the 'Holy hack'.

Every other 'hack' in my code has been shown to be necessary for full cross-browser compatibility by many minds far greater and more experienced than mine, and unless or until an even larger giant than those on whose shoulders we all stand comes forth with a cunning alternative, it seems to be the general consensus that this 'Holy Grail' ain't gonna work without 'em.

Well, I've always been a pragmatist, so I'm perfectly happy with the results, despite my umpteen extra divs, but of course I understand that this won't be for everybody.

Ooh, my pizza just arrived...
:-)

If someone got a working version for ie7, please post !

I've just put together a little page with all the various 'fixes' lying around the internet for Matthew Levine's "The Holy Grail", along with a few tips of my own for succesfully implemeting it in a real-life scenario.

See http://myoozikmuse.blogspot.com/ for the complete updated template, which includes, naturally, Gerd's IE7 input!

Hope it's of use to somebody. :-)

(See www.mathesonbayley.com or www.indigoivories.com to see the template in action)

There was an image in the right column which, when removed, made IE7 display the whole site perfectly. All the latest versions of FF, Safari, Konqueror, Opera & Netscape (on all platforms) PLUS IE6 were already displaying everything with no problems, but the presence of the right-column image resulted in ONLY the header and footer displaying (the footer overlapping the header) with blank space beneath them when viewed in IE7.

Why? - Anyone's guess! The image in the right column was absolutely positioned, but no fiddling with the exact pixel values of the postioning or the z-index made any difference - it's presence still resulted in IE7 screwing up the entire layout.

Other factors: there were no floats in the right column; the image was much smaller than the width of the column; the right column, in accordance with the layout of "A List Apart's Holy Grail" had a negative margin. I mention this things as I can imagine them being first ports of call for debugging, but I repeat that every browser was displaying it perfectly. (No known IE7 bugs seem to fit the bill as potential culprit)

Solution: a container div for the image in the right column. Simply:

<div> <img....> </div>

...with no other specifications, and as if by magic, IE7 was brought back into line!

If someone has a theory, I beg of you to post it here, as I'm dying of curiosity. Why on earth would wrapping the img in a div make such a difference in IE7?

Anyway, I'm happy - my site is now cross-browser compatible (as long as we don't venture into the ungodly realms of IE5.5!) :-)

Take a look: http://www.mathesonbayley.com/

I had another problem with IE7, however, which I've been trying to understand... the footer jumps up to the top of the screen covering the header, and nothing else is displayed beneath it.

I've been experimenting endlessly and have no ideas left. Why would IE7 do this despite its working in every other modern browser?

Theories?

You can check in http://www.adeptos.org

If I use this expression:
#container > #left { left: -210px; margin-left: expression(...); }
It looks good in Mozilla but wrong in IE7. All the opposite if I do this:
#container > #left { left: -220px; margin-left: expression(...); }
Any good ideas out there?

I've got it working at http://www.yarks.com - woo hoo! Was a little worried when my client called and said, "um, the entire navigational column is missing." This was easy and works perfectly!

Andi
Big Sea Design

Visit http://alistapart.com/comments/holygrail/?page=22 - lot's of good stuff there