Vertical stretching of box(es)

[Wes Groleau]

http://www.northwestallentrails.org/testing.shtml
http://www.northwestallentrails.org/newstyles.css

Is there a simple way to make the nav and content boxes stretch down and
touch the footer? I have seen it done by repeat-y on a gif the same
color, but I wondered if CSS had some feature that was actually intended
for this.

The other thing that would be nice to do would be to stretch the whole
box to the window height minus just a little (except if content is
longer in which case you want to show it all with scrollbars).

--
Wes Groleau

A pessimist says the glass is half empty.

An optimist says the glass is half full.

An engineer says somebody made the glass
twice as big as it needed to be.

[Spartanicus]

Wes Groleau <gr**********@f reeshell.orgwro te:

>http://www.northwestallentrails.org/testing.shtml
http://www.northwestallentrails.org/newstyles.css

Is there a simple way to make the nav and content boxes stretch down and
touch the footer? I have seen it done by repeat-y on a gif the same
color, but I wondered if CSS had some feature that was actually intended
for this.

http://homepage.ntlworld.com/spartanicus/css_layout.htm

>The other thing that would be nice to do would be to stretch the whole
box to the window height minus just a little (except if content is
longer in which case you want to show it all with scrollbars).

No that's not nice at all, footers should be directly below the content,
not stuck to the viewport's bottom.

--
Spartanicus

[Wes Groleau]

Spartanicus wrote:

Wes Groleau <gr**********@f reeshell.orgwro te:

>Is there a simple way to make the nav and content boxes stretch down and
touch the footer? I have seen it done by repeat-y on a gif the same
color, but I wondered if CSS had some feature that was actually intended
for this.

http://homepage.ntlworld.com/spartanicus/css_layout.htm

Thanks, I'm giving it a try.

>The other thing that would be nice to do would be to stretch the whole
box to the window height minus just a little (except if content is
longer in which case you want to show it all with scrollbars).

No that's not nice at all, footers should be directly below the content,
not stuck to the viewport's bottom.

Well, I don't know. This page sure looks funny to me, stuck to the
viewport's top with all that empty space underneath. Of course,
I could just stick more gadgets in the nav bar to make it longer. :-)

--
Wes Groleau
http://freepages.rootsweb.com/~wgroleau/Wes

[Wes Groleau]

Spartanicus wrote:

Wes Groleau <gr**********@f reeshell.orgwro te:

>http://www.northwestallentrails.org/testing.shtml
http://www.northwestallentrails.org/newstyles.css

Is there a simple way to make the nav and content boxes stretch down and
touch the footer? I have seen it done by repeat-y on a gif the same
color, but I wondered if CSS had some feature that was actually intended
for this.

http://homepage.ntlworld.com/spartanicus/css_layout.htm

I copied selected CSS from there, but I must not have copied enough.

Mine didn't change on Opera, Safari, OmniWeb, Firefox,
and Camino.

Too late at night--I'll study it closer in the morning.

(BTW, Opera 9 screws up the header pictures--makes the box bigger
and repeats a little of the image. Are they trying to imitate
the ancient IE 5 ?)
--
Wes Groleau

Ostracism: A practice of sticking your head in the sand.

[Spartanicus]

Wes Groleau <gr**********@f reeshell.orgwro te:

>>Is there a simple way to make the nav and content boxes stretch down and
touch the footer? I have seen it done by repeat-y on a gif the same
color, but I wondered if CSS had some feature that was actually intended
for this.

http://homepage.ntlworld.com/spartanicus/css_layout.htm

Thanks, I'm giving it a try.

The demo means to demonstrate that there is a feature in CSS to do this,
I do not recommend using this for a web site unless you know exactly
what your are doing, you know the drawbacks and how the thing works.

>>The other thing that would be nice to do would be to stretch the whole
box to the window height minus just a little (except if content is
longer in which case you want to show it all with scrollbars).

No that's not nice at all, footers should be directly below the content,
not stuck to the viewport's bottom.

Well, I don't know. This page sure looks funny to me, stuck to the
viewport's top with all that empty space underneath. Of course,
I could just stick more gadgets in the nav bar to make it longer. :-)

If you have that little content, does it warrant being on a page of it's
own?

--
Spartanicus

[Wes Groleau]

Spartanicus wrote:

The demo means to demonstrate that there is a feature in CSS to do this,
I do not recommend using this for a web site unless you know exactly
what your are doing, you know the drawbacks and how the thing works.

I understand how it works (plus I have the CSS2 spec in my bookcase
if needed. My goof was that when I copied your table properties,
I forgot to remove the floats.

With those gone, it looked great in some browsers and terrible in
others. IE 6 on Windows, IE 5 on Mac, Opera 9, and Firefox screw
it up in three different ways. So I'll compromise--trade the four
divs for TD tags and use the CSS as much as portably possible.

I don't have the patience to maintain a whole bunch of browser
hacks in my stylesheet.

If you have that little content, does it warrant being on a page of it's
own?

That is going to be the intro page--kind of like a flash
page only with HTML and a bit of content instead of flash.
Also, for special notices, we temporarily replace it.
(Turns out the actual page does have enough content to
nearly fill the viewport.)

--
Wes Groleau
"To know what you prefer, instead of humbly saying
Amen to what the world tells you you should prefer,
is to have kept your soul alive."
-- Robert Louis Stevenson

[Spartanicus]

Wes Groleau <gr**********@f reeshell.orgwro te:

>The demo means to demonstrate that there is a feature in CSS to do this,
I do not recommend using this for a web site unless you know exactly
what your are doing, you know the drawbacks and how the thing works.

I understand how it works (plus I have the CSS2 spec in my bookcase
if needed. My goof was that when I copied your table properties,
I forgot to remove the floats.

There are no floats used anywhere in the demo.

>With those gone, it looked great in some browsers and terrible in
others. IE 6 on Windows, IE 5 on Mac, Opera 9, and Firefox screw
it up in three different ways.

That suggests that you have not understood how it works, nor even read
the page as it prominently states "This demo shows a layout created with
a CSS-table (not supported by IE)." note the "not supported by IE".

FYI the demo works perfectly in Opera (any 4+ version), any Gecko based
browser, Safari, and Konqueror, so essentially in anything but IE.

>I don't have the patience to maintain a whole bunch of browser
hacks in my stylesheet.

The demo doesn't utilize a single "browser hack".

--
Spartanicus

[Wes Groleau]

Spartanicus wrote:

>if needed. My goof was that when I copied your table properties,
I forgot to remove the floats.

There are no floats used anywhere in the demo.

Exactly. The floats I was trying to use are incompatible with
table mode. Therefore it did not work until I removed them.

>With those gone, it looked great in some browsers and terrible in
others. IE 6 on Windows, IE 5 on Mac, Opera 9, and Firefox screw
it up in three different ways.

That suggests that you have not understood how it works, nor even read
the page as it prominently states "This demo shows a layout created with
a CSS-table (not supported by IE)." note the "not supported by IE".

Yes, I read that. But IE 6 _did_ correctly handle the table part.
What it screwed up was the header. Apparently IE 6 did not fix
the height plus padding error of IE 5

FYI the demo works perfectly in Opera (any 4+ version), any Gecko based
browser, Safari, and Konqueror, so essentially in anything but IE.

And so did my adaptation of it. However, other things
did not work. And the table trick did NOT work in one
browser. Perhaps I screwed it up somehow--but since it
worked in all the others (even IE), it must have been
an unusual screwup.

>I don't have the patience to maintain a whole bunch of browser
hacks in my stylesheet.

The demo doesn't utilize a single "browser hack".

And you're accusing me of not reading? I said "in MY stylesheet"

--
Wes Groleau
"Ideas are more powerful than guns,
We would not let our enemies have guns;
why should we let them have ideas?"
-- Jozef Stalin

[Spartanicus]

Wes Groleau <gr**********@f reeshell.orgwro te:

>>With those gone, it looked great in some browsers and terrible in
others. IE 6 on Windows, IE 5 on Mac, Opera 9, and Firefox screw
it up in three different ways.

That suggests that you have not understood how it works, nor even read
the page as it prominently states "This demo shows a layout created with
a CSS-table (not supported by IE)." note the "not supported by IE".

Yes, I read that. But IE 6 _did_ correctly handle the table part.

Impossible. Perhaps you are instead referring to the "CSS-table layout
with IE fallback" demo that is linked from the url I supplied.

>What it screwed up was the header. Apparently IE 6 did not fix
the height plus padding error of IE 5

Screencap of the "CSS-table layout with IE fallback" demo rendered by
IE6: http://homepage.ntlworld.ie/spartanicus/ie.png I'm assuming that
you are referring to an adaptation of your own.

>FYI the demo works perfectly in Opera (any 4+ version), any Gecko based
browser, Safari, and Konqueror, so essentially in anything but IE.

And so did my adaptation of it. However, other things
did not work.

Blame the adaptation.

>>I don't have the patience to maintain a whole bunch of browser
hacks in my stylesheet.

The demo doesn't utilize a single "browser hack".

And you're accusing me of not reading? I said "in MY stylesheet"

I read your comments as relating to this thread and to the url I
provided (not other demos linked from that url). If your stylesheet uses
browser hacks that are not related to my demo code, why are you
complaining about it in this thread?

--
Spartanicus

[Wes Groleau]

Spartanicus wrote:

>Yes, I read that. But IE 6 _did_ correctly handle the table part.

Impossible. Perhaps you are instead referring to the "CSS-table layout
with IE fallback" demo that is linked from the url I supplied.

No, I did not bother to click on that. Either I dreamed
the whole thing, or it worked!

I read your comments as relating to this thread and to the url I
provided (not other demos linked from that url). If your stylesheet uses

You provided the URI in response to my query on how to do that.
I tried it, and it worked. However, because of other problems
with IE, I chose to compromise and use an HTML table. The
combination is simple and more maintainable than I would have
gotten had I chosen to shoehorn an acceptable layout for ALL
browsers into my stylesheet.

browser hacks that are not related to my demo code, why are you
complaining about it in this thread?

My stylesheet does not use browser hacks. I am taking a different
approach because I am not willing to put them in. I was not
complaining about them--though if I had used them, I would probably
be complaining about them by now. :-)

I am grateful for your offering the link. It reminded me
of a section of the spec I had obviously gone through too
quickly.

I chose a different approach, but NOT because there was
anything wrong with your CSS. You are defending yourself
against a non-existent enemy.

--
Wes Groleau

Those who make peaceful revolution impossible
will make violent revolution inevitable.
-- John F. Kennedy