Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts

    ALA's holy grail and IE7 fix

    http://www.alistapart.com/articles/holygrail/.
    It's known to have problems in IE7.
    http://www.gerd-riesselmann.net/deve...ut-fix-for-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
    Last edited by croatiankid; 01-02-2007 at 01:35 PM.

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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).

  • #3
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe you should add borders between the tr's also make the text smaller...
    ALWAYS remember to validate your code

  • #4
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Where do you see TRs?
    update:
    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.
    Code:
    #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:
    Code:
    #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) +
    parseFloat(document.all.left.currentStyle.paddingRight)
    ); /* Fix for IE7 */
    }
    But instead of giving me what it shows in other browsers here, I get this.
    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 first. Sorry for troubling you.
    Last edited by croatiankid; 01-03-2007 at 11:06 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •