View Full Version : ALA's holy grail and IE7 fix

01-02-2007, 11:45 AM
It's known to have problems in IE7.
the "fix" for the wrapper versions. The wrapper free layout (http://alistapart.com/d/holygrail/example_4.html) supposedly works in IE7, but I see a horizontal scrollbar leading to a white section to the right of the actual design/content. I can see everything in IE7, it's just that useless horizontal scrollbar that's annoying me. Also, I can't seem to get the padded wrapper layout working in IE7 using the "fix" (it's in one of the comments). To the contrary: it messes it up in Firefox. Please see http://www.croatiankid.com/fixdontwork.html, http://www.croatiankid.com/ref.jpg for a screenshot.
I'm probably applying it incorrectly (I'm just sticking it to the end of the CSS from ALA. I'm hoping somebody knows how to do this correctly to get it to actually work! ty

I prefer to use the container-less version, since I don't need equal height columns

01-02-2007, 01:37 PM
Something I noticed: that horizontal scrollbar thing happens only in the padded versions. so it has to have something to do with it, since on http://www.alistapart.com/d/holygrail/example_1.html, there is no horizontal scrollbar.
The thing is, I need paddings. I don't need the container div (although I'll use it if I must to get it working in all browsers).

01-02-2007, 03:48 PM
Maybe you should add borders between the tr's also make the text smaller...

01-02-2007, 05:02 PM
Where do you see TRs?
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.