ALA"s Holy Grail is bad?

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

Re: ALA"s Holy Grail is bad?

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!

Re: ALA"s Holy Grail is bad?

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ø
- kimandre@NOSPAMbetadome.com
(remove NOSPAM to contact me directly)

Re: ALA"s Holy Grail is bad?

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

Re: ALA"s Holy Grail is bad?

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...

Re: ALA"s Holy Grail is bad?

dave@seobm.com 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


add:

Re: ALA"s Holy Grail is bad?

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!

Re: ALA"s Holy Grail is bad?

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!

Re: ALA"s Holy Grail is bad?

On Apr 29, 7:09 am, "Beauregard T. Shagnasty"
wrote:
> d...@seobm.com 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
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
>
>
> add:
>

Re: ALA"s Holy Grail is bad?

On Apr 29, 5:22 am, Kim Andr=E9 Aker=F8
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=E9 Aker=F8
> - kiman...@NOSPAMbetadome.com
> (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.

Re: ALA"s Holy Grail is bad?

dave@seobm.com wrote:

> "Beauregard T. Shagnasty" wrote:
>> dave@seobm.com wrote:
>>> I'd really like a footer too. :(
>>
>> Just before the final
>>
>>
>> add:
>>

Re: ALA"s Holy Grail is bad?

On Apr 29, 10:02 am, "Beauregard T. Shagnasty"
wrote:
> d...@seobm.com wrote:
> > "Beauregard T. Shagnasty" wrote:
> >> d...@seobm.com wrote:
> >>> I'd really like a footer too. :(
>
> >> Just before the final
> >>
> >>
> >> add:
> >>

Re: ALA"s Holy Grail is bad?

dave@seobm.com 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/

Re: ALA"s Holy Grail is bad?

In article ,
"Greg N." wrote:

> dave@seobm.com 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 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

Re: ALA"s Holy Grail is bad?

dorayme wrote:

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

> validator.W3.org is no perfectly happy though, says you are
> missing a 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 dave@seobm.com 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/

Re: ALA"s Holy Grail is bad?

> Greg N. wrote:
> news: f12u7m$ml$1@online.de
> dave@seobm.com 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*

Re: ALA"s Holy Grail is bad?

> dave@seobm.com wrote:
> news: 1177808356.474059.254360@h2g2000hsg.googlegroups.com
> 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:



>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*

Re: ALA"s Holy Grail is bad?

On Apr 29, 1:12 pm, "Greg N." wrote:
> d...@seobm.com 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!

Re: ALA"s Holy Grail is bad?

On Apr 29, 1:12 pm, "Greg N." wrote:
> d...@seobm.com 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!

Re: ALA"s Holy Grail is bad?

dave@seobm.com wrote:

> The main column appears to be about an
> em below the header...
>
> http://www.seobm.com/test/layout05.shtml

That's easily fixed by giving the main div an appropriate negative top
margin.

--
Gregor mit dem Motorrad auf Reisen
http://hothaus.de/greg-tour/

Re: ALA"s Holy Grail is bad?

On Apr 30, 1:24 am, "Greg N." wrote:
> d...@seobm.com wrote:
> > The main column appears to be about an
> > em below the header...
>
> >http://www.seobm.com/test/layout05.shtml
>
> That's easily fixed by giving the main div an appropriate negative top
> margin.
>
> --
> Gregor mit dem Motorrad auf Reisenhttp://hothaus.de/greg-tour/

Well since the body has a font size of 1.3em I chose -1.3 em for the
margin on the body and this seems to be about right. Playing with it a
little more and I chose 1.33 which seems perfect for FF and Opera. On
IE this causes the main to overlay the header. Am I not getting
something or is this a bug with the browsers? I'm thinking at this
point it's a bug with the browsers and I shouldn't mess with a
hardcoded negative margin that will be changing from year to year as
the browsers evolve...

Am I totally missing something?

Re: ALA"s Holy Grail is bad?

dave wrote:

> Well since the body has a font size of 1.3em I chose -1.3 em for the
> margin on the body and this seems to be about right. Playing with it a
> little more and I chose 1.33 which seems perfect for FF and Opera. On
> IE this causes the main to overlay the header. Am I not getting
> something or is this a bug with the browsers?

It may be that the weird margin isn't font-size-dependent, so setting it
in ems causes inconsistent results. Try using px or mm to set this negative
margin and see what happens.

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

* = I'm getting there!

Re: ALA"s Holy Grail is bad?

Greg N. wrote:
> dave@seobm.com wrote:
>
>> The main column appears to be about an
>> em below the header...
>>
>> http://www.seobm.com/test/layout05.shtml
>
> That's easily fixed by giving the main div an appropriate negative top
> margin.

That's the wrong "fix" for this particular issue. The space above the
center column is caused by something called "collapsing margins", the
default top margin on the h2 element in this case.

Get rid of it by giving the center column a top padding of 1px. The
space above the footer is due to the same thing, except it's the default
bottom margin of the last paragraph.

--
Berg

Re: ALA"s Holy Grail is bad?

On Apr 30, 11:50 am, Bergamot wrote:
> Greg N. wrote:
> > d...@seobm.com wrote:
>
> >> The main column appears to be about an
> >> em below the header...
>
> >>http://www.seobm.com/test/layout05.shtml
>
> > That's easily fixed by giving the main div an appropriate negative top
> > margin.
>
> That's the wrong "fix" for this particular issue. The space above the
> center column is caused by something called "collapsing margins", the
> default top margin on the h2 element in this case.
>
> Get rid of it by giving the center column a top padding of 1px. The
> space above the footer is due to the same thing, except it's the default
> bottom margin of the last paragraph.
>
> --
> Berg

Thanks, that did indeed take care of the problem. I tested it with
Opera, IE, and FF on Linux and XP. All platforms and browsers work!

Thanks Berg and Gregor.