Is the Holy Grail legend true ?

Hi

Spent the past week looking at CSS renderings of "liquid" 3-column
pages (with both Header and Footer that can also grow).

On testing, none of them seem fully cross-browser campatible.

In almost all of them, the left column seems fixed.
Page doesn't grow when content added to header. When it does, the
header overlaps the top of the columns.

Does anyone have the secret ?


cheers

BobTheBowler wrote:

Hi
Does anyone have the secret ?

The legend is true if you don't learn and apply the rules to the quest.

cheers

With which brand of beer?

--
Gus

Gus Richter <gusrichter (AT) netscape (DOT) net> writes:

BobTheBowler wrote:

cheers

With which brand of beer?

Guinness of course! What else is there???

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

On 2007-05-07, BobTheBowler <bobsharp (AT) ntlworld (DOT) com> wrote:

Hi

Spent the past week looking at CSS renderings of "liquid" 3-column
pages (with both Header and Footer that can also grow).

On testing, none of them seem fully cross-browser campatible.

In almost all of them, the left column seems fixed.
Page doesn't grow when content added to header. When it does, the
header overlaps the top of the columns.

Does anyone have the secret ?

I hate to be the one to piss on the bonfire, but use a table.

On Mon, 07 May 2007 03:22:52 -0500, Ben C <spamspam (AT) spam (DOT) eggs> wrote:

I hate to be the one to piss on the bonfire, but use a table.

That's "piss on the grail-shaped beacon", surely?

Yes, use a <table>. This is how you cause HTML / CSS to render in a
grid-like manner, where the size of one element is related dynamically
to its sibing elements, not merely its content.

BobTheBowler wrote:

Spent the past week looking at CSS renderings of "liquid" 3-column
pages (with both Header and Footer that can also grow).

In almost all of them, the left column seems fixed.

Just because a template comes that way doesn't mean you can't change it
to be flexible. Switch those px units to em and see what happens.

Page doesn't grow when content added to header. When it does, the
header overlaps the top of the columns.

That can be a result of absolute positioning, not clearing floats or
other less than ideal design decisions.

Does anyone have the secret ?

Why don't you show us what you've got first? Post a URL.

--
Berg

On Mon, 07 May 2007 06:50:47 -0500, Bergamot <bergamot (AT) visi (DOT) com>
wrote:

Why don't you show us what you've got first? Post a URL.
Ok

original ...
http://www.probowluk.co.uk/3-Column,...S%20Layout.htm
my mod (using external .css file) ...
http://www.probowluk.co.uk/3-Column_Liquid_Layout.htm



Can anyone check out my website with browsers other than IE ?
http://www.ProBowlUK.co.uk
with FireFox, the homepage appears WITHOUT the top (CoolMenus)
layout. Subsequent pages show the Menu.
This is why I was trying out .css, rather than tables, to get
cross-browser compatibility.

First, switch your doctype to Strict. You are not "transitioning" from
anything.
Second, remove all the extraneous JavaScript and IE conditional
statements. Start with a bare page. With no errors in either the HTML or
the CSS.

Then we can discuss the Grail.

ok
here's another attempt I made ...
http://www.ProBowlUK.co.uk/HolyGrail.htm
looks ok at first, but Header does not move the columns down when
content added ...
http://www.ProBowlUK.co.uk/HolyGrail-2.htm
and this displays differently in IE and FireFox

Beauregard T. Shagnasty wrote:

you have explicitly set the height of the header to 75px. Use
px only for things like borders.

.... and images and any other element that actually is pixel-based.

Use em units for everything else.

Even better - don't set an explicit height at all unless it's really
necessary.

--
Berg

BobTheBowler wrote:

http://www.ProBowlUK.co.uk/HolyGrail.htm
looks ok at first, but Header does not move the columns down when
content added ...

Mr Shagnasty already mentioned why this is so I won't repeat it.

I just want to comment on calling this "Holy Grail". Anything that uses
so many conditional comments and inline styles does not deserve that
title. I'm not sure where you got the original template, but you should
probably throw it back.

http://www.ProBowlUK.co.uk/HolyGrail-2.htm
and this displays differently in IE and FireFox

I haven't look in IE7, but IE6 is broken where overflow is concerned, so
it's not surprising that it displays differently.

You really should learn how CSS positioning methods work if you expect
to use them effectively. Hacking away at something without understanding
it will only lead to frustration and broken layouts. Have a read at:
http://brainjar.com/css/positioning/
http://www.htmldog.com/

BTW, if you're looking for 3 columns where the column background colors
all stretch the length of the document regardless of which column is
longest, an alternative method is demonstrated at
http://www.bergamotus.ws/samples/3co...ull-width.html

--
Berg