View Full Version : ALA container-less holy grail layout fix for IE7 plz

Jan 2nd, 2007, 09:38 PM
Could you write me something that could get IE7 to render this (http://www.alistapart.com/d/holygrail/example_4.html) as it's rendered in every other browser? The only difference I see is a horizontal scrollbar appearing- and it leads to: nothing. white space.
So could you write some kind of expression I'd stick in ie7-only conditional comments that would remove the need for the horizontal bar showing, without messing something up? Since only IE7 would view it anyway, there would be no need to worry about other browsers.
Thank you very much if someone would be so kind as to write this!

edit: this isn't homework. I'm just not able to get alistapart's 3 column fluid layout working in IE7 using ANY method (this (http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7) doesn't even work for me)

Jan 3rd, 2007, 08:48 AM
And you think this requires javascript why? What exactly have you coded? We aren't here to just give you code. Show some initiative.

Jan 3rd, 2007, 11:05 AM
The second link gives a javascript fix.
Instead of considering the width of the surrounding div container, IE7 inserts the width of the body, which leads to the left column being moved out of sight to the far left. Here's how to fix it.
#left {
width: 200px; /* LC width */
margin-left: -100%;
left: 150px; /* RC width for IE6 */

#container > #left {
left: -200px; /* -LC width for others */
margin-left: expression(document.all.center.offsetWidth * -1); /* Fix for IE7 */
But I'm using the version with padding so
In the case of the padded version, the left and right padding of the left and the left padding of the center column must be added to the margin like this:
#container > #left {
left: -200px; /* -LC width for others */
margin-left: expression(
document.all.center.offsetWidth * -1 +
parseFloat(document.all.center.currentStyle.paddingLeft) +
parseFloat(document.all.left.currentStyle.paddingLeft) +
); /* Fix for IE7 */
} But instead of giving me what it shows in other browsers here (http://alistapart.com/d/holygrail/example_4.html), I get this. (http://www.croatiankid.com/fixdontwork.html)
Important: I no longer need your help. I got a reply on that blog post, and it seems I misinterperetted the post. I didn't know I had to apply this (http://www.infocraft.com/articles/the_case_of_the_disappearing_column/) first. Sorry for troubling you.bling you.