ALA's Holy Grail is bad?

Discussion in 'HTML' started by dave@seobm.com, Apr 29, 2007.

  1. Guest

    The article "In Search of the Holy Grail" at http://www.alistapart.com/articles/holygrail/
    appears to only work when using pixels. I'm referring in particular to
    his final example he calls the "wrapper free" at
    http://www.alistapart.com/d/holygrail/example_4.html. Once you use ems
    instead of pixels it fails horribly on IE7, FF2, and Opera9.2. I've
    played with it a little but I'm not any good at CSS. I've also
    searched about for other templates but out of the 30 or so I've seen
    they all use pixels. I want to use ems so I can expand and contract
    the text.

    The problem seems to be due to the header and footer. If you color
    them you can see the header doesn't fit correctly causing the
    horizontal scroll bar to appear.

    There's a php script I made to generate the CSS according to the
    authors comments.
    The first parameter is the size of the left column, the the padding of
    the left column, the padding of the center column, the size of the
    right column, and finally the padding on the right column, in that
    order.

    You can see by using the following params "prog.php 180 10 20 130 10"
    it spits out the same numbers as the author has, but using ems not
    pixels. Change the parameters to something that makes more sense for
    ems, like 10 1 2 10 1 and see what you get. The example and program
    are at www.seobm.com/home.shtml
     
    , Apr 29, 2007
    #1
    1. Advertising

  2. dave wrote:

    > I've also searched about for other templates but out of the 30 or so
    > I've seen they all use pixels. I want to use ems so I can expand and
    > contract the text.


    I put this together back in Feb 2005, so it's not been tested in IE7, but
    it's generally a pretty robust 3 column technique.

    http://examples.tobyinkster.co.uk/3col

    Only problem that it might have is that it lacks a full-width footer. If
    you want a footer, you have to just make it part of the middle column.

    --
    Toby A Inkster BSc (Hons) ARCS
    http://tobyinkster.co.uk/
    Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

    * = I'm getting there!
     
    Toby A Inkster, Apr 29, 2007
    #2
    1. Advertising

  3. Toby A Inkster wrote:

    > dave wrote:
    >
    > > I've also searched about for other templates but out of the 30 or so
    > > I've seen they all use pixels. I want to use ems so I can expand and
    > > contract the text.

    >
    > I put this together back in Feb 2005, so it's not been tested in IE7,
    > but it's generally a pretty robust 3 column technique.
    >
    > http://examples.tobyinkster.co.uk/3col


    The page itself looks good in IE7, Opera 9.20 and FF2.0. I just checked.

    > Only problem that it might have is that it lacks a full-width footer.
    > If you want a footer, you have to just make it part of the middle
    > column.


    clear: both?

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
     
    =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=, Apr 29, 2007
    #3
  4. John Hosking Guest

    Toby A Inkster wrote:
    >
    > http://examples.tobyinkster.co.uk/3col
    >
    > Only problem that it might have is that it lacks a full-width footer. If
    > you want a footer, you have to just make it part of the middle column.


    Hrm. I'm confused. Why the middle column? Why not just add <div
    id="footer">Blah</div> to the end of the outermost div (#wrap)?

    --
    John
     
    John Hosking, Apr 29, 2007
    #4
  5. Guest

    I have now included Toby's example as the only link to the original
    page so I could look more closely at it. You can see the results at
    http://www.seobm.com/test/layout01.shtml

    Couple comments about Toby's CSS.
    1) The header doesn't use the full width of the screen.
    2) The left, center, and right are not close enough to each other. I'd
    rather have no gaps between them and use padding inside.


    I'd really like a footer too. :(

    Anybody have suggestions on how to fix my original 3 column layout
    with header and footer or a link to one that works with ems, not
    pixels...
     
    , Apr 29, 2007
    #5
  6. wrote:

    > I have now included Toby's example as the only link to the original
    > page so I could look more closely at it. You can see the results at
    > http://www.seobm.com/test/layout01.shtml


    Why are you using a table for the menu? This is more appropriately a
    list. Lots easier to maintain as well.

    > Couple comments about Toby's CSS.
    > 1) The header doesn't use the full width of the screen.


    Add margin: 0; to the body { }
    Now, once you decide you don't like that, add some padding to the header
    style.

    > 2) The left, center, and right are not close enough to each other. I'd
    > rather have no gaps between them and use padding inside.


    Different-coloured objects flush to each other look strange, imo.

    > I'd really like a footer too. :(


    Just before the final
    </div>
    </body>
    add:
    <div id="footer">
    <p>This is a footer. Blah blah blah.</p>
    </div>
    then style #footer to taste. Works in IE6, Firefox, Opera...

    > Anybody have suggestions on how to fix my original 3 column layout
    > with header and footer or a link to one that works with ems, not
    > pixels...


    The only pixels I see in Toby's layout are:
    .sidebar li { margin: 0 10px 0 20px; padding: 0; }
    and it seems to work just as well with:
    .sidebar li { margin: 0 1em 0 2em; padding: 0; }

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Apr 29, 2007
    #6
  7. Kim André Akerø wrote:
    > Toby A Inkster wrote:
    >
    >> Only problem that it might have is that it lacks a full-width footer.
    >> If you want a footer, you have to just make it part of the middle
    >> column.

    >
    > clear: both?


    Nuh-uh! The left and right columns are absolutely positioned, so this
    won't work.

    Also, with regard to John Hosking's suggestion -- yes, that will work, but
    only in very limited circumstances: where you can guarantee that the
    middle column will be the longest. Again this is due to absolute
    positioning, which will cause the side columns to overlap the footer
    if they are longer than that middle column.

    --
    Toby A Inkster BSc (Hons) ARCS
    http://tobyinkster.co.uk/
    Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

    * = I'm getting there!
     
    Toby A Inkster, Apr 29, 2007
    #7
  8. dave wrote:

    > 1) The header doesn't use the full width of the screen.
    > 2) The left, center, and right are not close enough to each other. I'd
    > rather have no gaps between them and use padding inside.


    I didn't say you wouldn't need to adjust it a little. I kept the CSS as
    minimal as possible to make it easy to see what's going on. In a real life
    situation, you'll want to play with margins, paddings, widths, borders,
    backgrounds and so on.

    --
    Toby A Inkster BSc (Hons) ARCS
    http://tobyinkster.co.uk/
    Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

    * = I'm getting there!
     
    Toby A Inkster, Apr 29, 2007
    #8
  9. Guest

    On Apr 29, 7:09 am, "Beauregard T. Shagnasty"
    <> wrote:
    > wrote:
    > > I have now included Toby's example as the only link to the original
    > > page so I could look more closely at it. You can see the results at
    > >http://www.seobm.com/test/layout01.shtml

    >
    > Why are you using a table for the menu? This is more appropriately a
    > list. Lots easier to maintain as well.

    That was just quick and dirty. I now removed the table and used
    equally ugly <br/> until I have time to go back and do it right.


    > > Couple comments about Toby's CSS.
    > > 1) The header doesn't use the full width of the screen.

    >
    > Add margin: 0; to the body { }
    > Now, once you decide you don't like that, add some padding to the header
    > style.
    >

    Ok, I did that. I don't know if I'll have any color in the final
    version. The colors help me with alignment issues and such and that's
    why I put them in.


    > > 2) The left, center, and right are not close enough to each other. I'd
    > > rather have no gaps between them and use padding inside.

    >
    > Different-coloured objects flush to each other look strange, imo.
    >

    I changed the margin from 11 to 10 and now I seem to have the
    everything but the vertical difference to the header right.


    > > I'd really like a footer too. :(

    >
    > Just before the final
    > </div>
    > </body>
    > add:
    > <div id="footer">
    > <p>This is a footer. Blah blah blah.</p>
    > </div>
    > then style #footer to taste. Works in IE6, Firefox, Opera...
    >

    The header didn't span the right column following your suggestions.
    Take a look at http://www.seobm.com/test/layout02.shtml to see what I
    mean. Perhaps I didn't follow your instructions correctly?


    > > Anybody have suggestions on how to fix my original 3 column layout
    > > with header and footer or a link to one that works with ems, not
    > > pixels...

    >
    > The only pixels I see in Toby's layout are:
    > .sidebar li { margin: 0 10px 0 20px; padding: 0; }
    > and it seems to work just as well with:
    > .sidebar li { margin: 0 1em 0 2em; padding: 0; }
    >

    I'm confused. I didn't see any mention of pixels in Toby's article.
    Where did you find
    .sidebar li { margin: 0 10px 0 20px; padding: 0; }?
     
    , Apr 29, 2007
    #9
  10. Guest

    On Apr 29, 5:22 am, Kim André Akerø <>
    wrote:
    > Toby A Inkster wrote:
    > > Only problem that it might have is that it lacks a full-width footer.
    > > If you want a footer, you have to just make it part of the middle
    > > column.

    >
    > clear: both?
    >
    > --
    > Kim André Akerø
    > -
    > (remove NOSPAM to contact me directly)


    Care to elaborate a little more Kim? I'm just learning CSS and have no
    idea how to incorporate that line and put a header in to Toby's
    example. Give me enough to go on and I'll put a test page together
    based on your input.
     
    , Apr 29, 2007
    #10
  11. wrote:

    > "Beauregard T. Shagnasty" wrote:
    >> wrote:
    >>> I'd really like a footer too. :(

    >>
    >> Just before the final
    >> </div>
    >> </body>
    >> add:
    >> <div id="footer">
    >> <p>This is a footer. Blah blah blah.</p>
    >> </div>
    >> then style #footer to taste. Works in IE6, Firefox, Opera...
    >>

    > The header didn't span the right column following your suggestions.
    > Take a look at http://www.seobm.com/test/layout02.shtml to see what I
    > mean. Perhaps I didn't follow your instructions correctly?


    Ah yes. Sorry about that. I had added enough content in my local sample
    to give the center column enough height to be longer than either
    sidebar.

    Nope, no easy trick that I see at a glance. There are other samples out
    there with footers, though, that claim to stay below all columns. Google
    around...

    >>> Anybody have suggestions on how to fix my original 3 column layout
    >>> with header and footer or a link to one that works with ems, not
    >>> pixels...

    >>
    >> The only pixels I see in Toby's layout are:
    >> .sidebar li { margin: 0 10px 0 20px; padding: 0; }
    >> and it seems to work just as well with:
    >> .sidebar li { margin: 0 1em 0 2em; padding: 0; }
    >>

    > I'm confused. I didn't see any mention of pixels in Toby's article.
    > Where did you find
    > .sidebar li { margin: 0 10px 0 20px; padding: 0; }?


    In the style sheet. :-/

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Apr 29, 2007
    #11
  12. Guest

    On Apr 29, 10:02 am, "Beauregard T. Shagnasty"
    <> wrote:
    > wrote:
    > > "Beauregard T. Shagnasty" wrote:
    > >> wrote:
    > >>> I'd really like a footer too. :(

    >
    > >> Just before the final
    > >> </div>
    > >> </body>
    > >> add:
    > >> <div id="footer">
    > >> <p>This is a footer. Blah blah blah.</p>
    > >> </div>
    > >> then style #footer to taste. Works in IE6, Firefox, Opera...

    >
    > > The header didn't span the right column following your suggestions.
    > > Take a look athttp://www.seobm.com/test/layout02.shtmlto see what I
    > > mean. Perhaps I didn't follow your instructions correctly?

    >
    > Ah yes. Sorry about that. I had added enough content in my local sample
    > to give the center column enough height to be longer than either
    > sidebar.
    >
    > Nope, no easy trick that I see at a glance. There are other samples out
    > there with footers, though, that claim to stay below all columns. Google
    > around...


    Every time I get to a site that looks like it's what I want I see it's
    actually done with pixels, not ems.

    I spent a great deal of time looking for a three column with header
    and footer liquid template as I said in my first post.

    Guess it's time to go googling again.
     
    , Apr 29, 2007
    #12
  13. Greg N. Guest

    wrote:

    > I spent a great deal of time looking for a three column with header
    > and footer liquid template as I said in my first post.
    >
    > Guess it's time to go googling again.


    Looks simple to me:

    http://coolhaus.de/misc/grail.htm

    No wrapper div, no absolute positioning, no negative margins, no hacks.

    Maybe I'm being naive, maybe this does not work on browsers other than
    FF aind IE6. See for yourself.

    --
    Gregor mit dem Motorrad auf Reisen
    http://hothaus.de/greg-tour/
     
    Greg N., Apr 29, 2007
    #13
  14. dorayme Guest

    In article <f12u7m$ml$>,
    "Greg N." <> wrote:

    > wrote:
    >
    > > I spent a great deal of time looking for a three column with header
    > > and footer liquid template as I said in my first post.
    > >
    > > Guess it's time to go googling again.

    >
    > Looks simple to me:
    >
    > http://coolhaus.de/misc/grail.htm
    >
    > No wrapper div, no absolute positioning, no negative margins, no hacks.
    >
    > Maybe I'm being naive, maybe this does not work on browsers other than
    > FF aind IE6. See for yourself.


    And works nicely on all my Mac browsers including, surprise
    anyone?, Mac IE 5.

    validator.W3.org is no perfectly happy though, says you are
    missing a </head> but it is there! I expect you grabbed for
    convenience this code from some site of your own where you needed
    the doctype (I recall you had a problem with Google maps without
    such a doctype and ensuing conventions). But surely good old 4.01
    Strict would be fine for this example.

    --
    dorayme
     
    dorayme, Apr 29, 2007
    #14
  15. Greg N. Guest

    dorayme wrote:

    >> http://coolhaus.de/misc/grail.htm


    > validator.W3.org is no perfectly happy though, says you are
    > missing a </head> but it is there! I expect you grabbed for
    > convenience this code from some site of your own...


    No, I used one of the samples from as a starting point
    and did not bother to validate or even look at the doctype.

    It's fixed now.

    --
    Gregor mit dem Motorrad auf Reisen
    http://hothaus.de/greg-tour/
     
    Greg N., Apr 30, 2007
    #15
  16. BootNic Guest

    > Greg N. <> wrote:
    > news: f12u7m$ml$
    > wrote:

    [snip]
    > http://coolhaus.de/misc/grail.htm
    >
    > No wrapper div, no absolute positioning, no negative margins, no
    > hacks.


    This example is a 3 column layout, but I do not think it qualifies to be
    classified as a "grail"

    The main page content should appear near the top of the source, after
    the header, followed by the right then left columns or left then right
    columns.

    [snip]
    --
    BootNic Sunday, April 29, 2007 9:35 PM

    When men are pure, laws are useless; when men are corrupt, laws are
    broken.
    *Benjamin Disraeli*
     
    BootNic, Apr 30, 2007
    #16
  17. BootNic Guest

    > <> wrote:
    > news:
    > The article "In Search of the Holy Grail" at
    > http://www.alistapart.com/articles/holygrail/ appears to only work
    > when using pixels.


    The wrapper version can be set in em, or any other unit you would
    care to use. It is lacking a fix for IE7, which would be the same as the
    fix for IE6, but IE7 ignores the * html hack.

    A conditional comment would be useful:

    <!--[if gte IE 6 & lte IE 7]>
    <style type="text/css">
    #left {
    left: 15em; /* RC width */
    }
    </style>
    <![endif]-->

    >I'm referring in particular to
    > his final example he calls the "wrapper free" at
    > http://www.alistapart.com/d/holygrail/example_4.html.

    [snip]

    --
    BootNic Sunday, April 29, 2007 9:56 PM

    "The POP3 server service depends on the SMTP server service, which
    failed to start because of the following error: The operation
    completed successfully."
    *Windows NT Server v3.51*
     
    BootNic, Apr 30, 2007
    #17
  18. Guest

    On Apr 29, 1:12 pm, "Greg N." <> wrote:
    > wrote:
    > > I spent a great deal of time looking for a three column with header
    > > and footer liquid template as I said in my first post.

    >
    > > Guess it's time to go googling again.

    >
    > Looks simple to me:
    >
    > http://coolhaus.de/misc/grail.htm
    >
    > No wrapper div, no absolute positioning, no negative margins, no hacks.
    >
    > Maybe I'm being naive, maybe this does not work on browsers other than
    > FF aind IE6. See for yourself.
    >
    > --
    > Gregor mit dem Motorrad auf Reisenhttp://hothaus.de/greg-tour/


    That's almost perfect Gregor. The main column appears to be about an
    em below the header with FF2, IE7, and Opera9. Do you have any idea
    how to get it directly under the header?

    On IE7 the footer is also about an em below the right column. But not
    on Opera9 or FF2.

    This is by far the closest I've seen to something I like. Even if the
    above can't be fixed I'll run with it. Thanks.

    By the way, I've played with it and put it at http://www.seobm.com/test/layout05.shtml

    Good luck on the motorrad!
     
    , Apr 30, 2007
    #18
  19. Guest

    On Apr 29, 1:12 pm, "Greg N." <> wrote:
    > wrote:
    > > I spent a great deal of time looking for a three column with header
    > > and footer liquid template as I said in my first post.

    >
    > > Guess it's time to go googling again.

    >
    > Looks simple to me:
    >
    > http://coolhaus.de/misc/grail.htm
    >
    > No wrapper div, no absolute positioning, no negative margins, no hacks.
    >
    > Maybe I'm being naive, maybe this does not work on browsers other than
    > FF aind IE6. See for yourself.
    >
    > --
    > Gregor mit dem Motorrad auf Reisenhttp://hothaus.de/greg-tour/


    That's almost perfect Gregor. The main column appears to be about an
    em below the header with FF2, IE7, and Opera9. Do you have any idea
    how to get it directly under the header?

    On IE7 the footer is also about an em below the right column. But not
    on Opera9 or FF2.

    This is by far the closest I've seen to something I like. Even if the
    above can't be fixed I'll run with it. Thanks.

    By the way, I've played with it and put it at http://www.seobm.com/test/layout05.shtml

    Good luck on the motorrad!
     
    , Apr 30, 2007
    #19
  20. Greg N. Guest

    Greg N., Apr 30, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sky

    And for the holy grail...

    Sky, Jan 28, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    600
  2. Salvatore

    Grail

    Salvatore, Sep 19, 2003, in forum: Python
    Replies:
    0
    Views:
    531
    Salvatore
    Sep 19, 2003
  3. Fuzzyman
    Replies:
    0
    Views:
    288
    Fuzzyman
    Feb 5, 2004
  4. Greg Ewing
    Replies:
    1
    Views:
    327
    Horst F. JENS
    Aug 1, 2006
  5. rantingrick
    Replies:
    44
    Views:
    1,304
    Peter Pearson
    Jul 13, 2010
Loading...

Share This Page