Is the Holy Grail legend true ?

[BobTheBowler]

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

[Gus Richter]

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

[Sherm Pendley]

Gus Richter <gu********@netscape.netwrites:

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

[Ben C]

On 2007-05-07, BobTheBowler <bo******@ntlworld.comwrote:

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.

[Andy Dingley]

On Mon, 07 May 2007 03:22:52 -0500, Ben C <sp******@spam.eggswrote:

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

[Bergamot]

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

[BobTheBowler]

On Mon, 07 May 2007 06:50:47 -0500, Bergamot <be******@visi.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.

[Beauregard T. Shagnasty]

BobTheBowler wrote:

Bergamot <be******@visi.comwrote:

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

Look here:
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.probowluk.co. uk%2F3-Column%2C%2520Liquid%2C%2520CSS%2520Layout.htm>

With so many errors, it is pointless to try to solve your currect
perceived problems.

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.

--
-bts
-Motorcycles defy gravity; cars just suck

[BobTheBowler]

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

BobTheBowler wrote:

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

You didn't do any of the stuff I suggested above.

looks ok at first, but Header does not move the columns down when
content added ...

...because you have explicitly set the height of the header to 75px. Use
px only for things like borders. Use em units for everything else.

http://www.ProBowlUK.co.uk/HolyGrail-2.htm

These new samples are still Transitional. Not Strict. Use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

You can then get rid of all those extraneous slashes at the end of
certain elements. <img ... />

There are errors in your CSS. For example:

Value Error : margin-left Parse Error -
document.all.centercolumn.offsetWidth * -1 +
parseFloat(document.all.centercolumn.currentStyle. paddingLeft) +
parseFloat(document.all.leftcolumn.currentStyle.pa ddingLeft) +
parseFloat(document.all.leftcolumn.currentStyle.pa ddingRight))

Where did you get that?

and this displays differently in IE and FireFox

If you would remove all of the IE conditional comments (I see no need
for them at all for this simple layout), perhaps they will be more
similar. You are designing for the World Wide Web, not a particular
browser. There is also no need to concern yourself if different browsers
display slightly different. None of your visitors are going to be
checking your site with multiple browsers... 'cept us.

Study this template:
http://www.benmeadowcroft.com/webdev.../3-column.html

Hopefully, that steel plate background is just a test...

--
-bts
-Motorcycles defy gravity; cars just suck

[Bergamot]

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

[Bergamot]

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

[BobTheBowler]

On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi.com>
wrote:

>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

thanks for those pointers.

The last example (your own ?) is what I have been looking for.
couple of questions ...
In the columns, would percentages work for the widths ?

How cross-browser friendly is it ? (Seems ok in Firefox)
cheers


--
Posted via a free Usenet account from http://www.teranews.com

[Bergamot]

BobTheBowler wrote:

On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi.com>
wrote:

>>
http://www.bergamotus.ws/samples/3co...ull-width.html

The last example (your own ?) is what I have been looking for.

I didn't come up with the idea, but that sample is my own.

couple of questions ...
In the columns, would percentages work for the widths ?

It is limited to whatever values are valid for border properties, which
excludes %.

How cross-browser friendly is it ? (Seems ok in Firefox)

You should get yourself some other browsers so you can test
compatibility yourself.

--
Berg

[Bergamot]

BobTheBowler wrote:

On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi.com>
wrote:

>>http://www.bergamotus.ws/samples/3co...ull-width.html

How cross-browser friendly is it ? (Seems ok in Firefox)

Actually, I put those demo pages together some time ago and couldn't
remember how well they had been tested, so did that this morning. IE had
some issues which are now corrected.

--
Berg

[BobTheBowler]

On Tue, 08 May 2007 11:14:52 -0500, Bergamot <be******@visi.com>
wrote:

>BobTheBowler wrote:

>On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi.com>
wrote:

>>>http://www.bergamotus.ws/samples/3co...ull-width.html

How cross-browser friendly is it ? (Seems ok in Firefox)

Actually, I put those demo pages together some time ago and couldn't
remember how well they had been tested, so did that this morning. IE had
some issues which are now corrected.

A friend wanted to show more of his background image on his pages, so
I did an experiment with your layout ...

.wrapper {
position: relative;
float: left;
padding-left: 5%;
width: 90%;
}

This does exactly what he wants.
However, there seems to be a margin/padding on the left edge
of the navigation (left) column that shows up against the left
edges of the Header and Footer. Looks to be 0.5em or 1% ?

Is there a way of all the left edges to line up ?

--
Posted via a free Usenet account from http://www.teranews.com

[Bergamot]

BobTheBowler wrote:

On Tue, 08 May 2007 11:14:52 -0500, Bergamot <be******@visi.com>
wrote:

>>>>http://www.bergamotus.ws/samples/3co...ull-width.html

I did an experiment with your layout ...

.wrapper {
position: relative;
float: left;
padding-left: 5%;
width: 90%;
}

Why are you floating it? What benefit do you get from that? BTW, if you
don't want to use the full browser width, you might want to look at one
of the other samples I put up. That demo page links to them.

there seems to be a margin/padding on the left edge
Is there a way of all the left edges to line up ?

Adjust margins and/or padding as you see fit. Sorry, I'm not going to
spoon feed you answers to all your questions. Experiment with the sample
pages to learn how all that stuff works. Go to the Ruthsarian pages for
more detailed information.

Learn to help yourself. You'll be better for it.

--
Berg

[BobTheBowler]

On Tue, 08 May 2007 18:44:26 -0500, Bergamot <be******@visi.com>
wrote:

>
Adjust margins and/or padding as you see fit. Sorry, I'm not going to
spoon feed you answers to all your questions. Experiment with the sample
pages to learn how all that stuff works. Go to the Ruthsarian pages for
more detailed information.

Learn to help yourself. You'll be better for it.

Sure, if I knew exactly what I was doing

Did a small experiment .... gave each box (div) a contrasting
background-colour (red, green, teal, royalblue, etc.).
This show some gaps between them.
It also shows that the Content-column does not match the height of the
Left and Right areas.

Might be why the layout I was working on before was so complicated.


--
Posted via a free Usenet account from http://www.teranews.com

[Bergamot]

BobTheBowler wrote:

>
Did a small experiment .... gave each box (div) a contrasting
background-colour (red, green, teal, royalblue, etc.).

It also shows that the Content-column does not match the height of the
Left and Right areas.

And there is no reason why the individual columns need to be all the
same height, since it's the *container* element, the one with the wide
borders, that actually sets the background colors.

--
Berg