Preventing Content Clipping if Browser Window Shrinks Vertically?

[savedumbo]

URL: savedumbo.org

I have the footer positioned absolutely to the bottom of the page, so
when the user expands their browser window vertically, the footer
always attaches to the bottom. However, if the user shrinks their
browser window vertically, the footer content overlays on top of the
page elements above it. I would like to set a minimum fixed height of
around 800px so if the user shrinks their browser past this threshold,
no content clipping occurs but instead scrollbars appear. How do I
achieve this with minimal changes to my CSS?

Thank you!

 

[Neredbojias]

URL: savedumbo.org

I have the footer positioned absolutely to the bottom of the page, so
when the user expands their browser window vertically, the footer
always attaches to the bottom. However, if the user shrinks their
browser window vertically, the footer content overlays on top of the
page elements above it. I would like to set a minimum fixed height of
around 800px so if the user shrinks their browser past this threshold,
no content clipping occurs but instead scrollbars appear. How do I
achieve this with minimal changes to my CSS?

I don't know, but here's a link to a page that does what you want.

http://www.neredbojias.com/gamma/moon.html

Thank you!

Oui bien.

 

[dorayme]

I don't know, but here's a link to a page that does what you want.

http://www.neredbojias.com/gamma/moon.html

Does this work on WinIE ok?

 

[rf]

Does this work on WinIE ok?

Now this is just simply hilarious.

Works on Windows firefox.

Works quite fine on IE 5.5 and 6.

Even works on Windows Safari (the beta one).

But...

On IE 7 the footer overlays the content


Totally broken in Opera.

 

[dorayme]

Now this is just simply hilarious.

Works on Windows firefox.

Works quite fine on IE 5.5 and 6.

Even works on Windows Safari (the beta one).

But...

On IE 7 the footer overlays the content


Totally broken in Opera.

So I keep my policy of making my footers follow all my content
plain and simple and no fancy doodle html, body heights or
absolute positioning till one of you folk comes up with a decent
and simple solution that works cross browser, especially ones
that bite big into the pie.

 

[Neredbojias]

Does this work on WinIE ok?

Yep.

 

[Neredbojias]

Now this is just simply hilarious.

Works on Windows firefox.

Works quite fine on IE 5.5 and 6.

Even works on Windows Safari (the beta one).

But...

On IE 7 the footer overlays the content

IE 7 wasn't even a rumor when I made that page. Just changed the
conditional comment from "IE" to "lte IE 6".

Totally broken in Opera.

No, Opera is broken trying to render correct and valid styling and markup.
There was a javascript kludge you must have missed by having j/s turned
off. Anyway, I removed that and installed a css kludge which, of course,
can be missed by turning styles off.

http://www.neredbojias.com/gamma/moon.html

 

[dorayme]

Yep.

Not according to rf who says:

But...
On IE 7 the footer overlays the content
Totally broken in Opera.

Boji, don't make me fire up my winbox and confirm that you have
been telling little porkies now... I was pleased how it worked on
my browsers (I forget if I tried Mac IE).

(rf has some slowdowns with his newserver and you may not get his
post for several hours. I have special means to receive his posts
(carrier pidgeons are involved, he is here in Oz...)

 

[rf]

IE 7 wasn't even a rumor when I made that page. Just changed the
conditional comment from "IE" to "lte IE 6".

Heh. I suspected you must have "changed" something when I saw your other
reply. I rechecked and yes, it now works with IE7. You now however have a
javascript error.

No, Opera is broken trying to render correct and valid styling and markup.
There was a javascript kludge you must have missed by having j/s turned
off. Anyway, I removed that and installed a css kludge which, of course,
can be missed by turning styles off.

A page can be perfectly valid and still be "broken" as far as real world
browsers are concerned. Serve XHTML to IE. True, it is actually the browser
that is broken but the viewer does not perceive this. The bit they are
looking at (the page) is the bit that is broken, just like your TV. If your
TV remains black then you usually have a broken on/off switch.

 

[rf]

(rf has some slowdowns with his newserver and you may not get his
post for several hours.

Bypassed. Found another server. Bigpond are "working on the problem"

I have special means to receive his posts
(carrier pidgeons are involved, he is here in Oz...)

The carrier pidgeons drowned in the latest storm.

Speaking of storms:

http://barefile.com.au/damage.html

 

[dorayme]

Speaking of storms:

http://barefile.com.au/damage.html

It is tough over here!

 

[Neredbojias]

Heh. I suspected you must have "changed" something when I saw your
other reply. I rechecked and yes, it now works with IE7. You now
however have a javascript error.


A page can be perfectly valid and still be "broken" as far as real
world browsers are concerned. Serve XHTML to IE. True, it is actually
the browser that is broken but the viewer does not perceive this. The
bit they are looking at (the page) is the bit that is broken, just
like your TV. If your TV remains black then you usually have a broken
on/off switch.

Got it, pops.

 

[Neredbojias]

Not according to rf who says:


Boji, don't make me fire up my winbox and confirm that you have
been telling little porkies now... I was pleased how it worked on
my browsers (I forget if I tried Mac IE).

The page was old. Updated the IE comment, cssed the Opera bug, and voila!
And don't forget that rf is a fussbudget...

To another point, none of my stuff is checked in anything but the "big
three-and-a-half" (ie6,ie7) on win 'cause I don't have the means. You're
on your own with a mac.

(rf has some slowdowns with his newserver and you may not get his
post for several hours. I have special means to receive his posts
(carrier pidgeons are involved, he is here in Oz...)

He also might've been outside during the storm damage and <look
style="frown:immediate_concern;">bumped his head.</look>

 

[rf]

And don't forget that rf is a fussbudget...

And proud, now that I know what one is

A mate of mine works with one of the Very Very Large multinational
intermediary consultancies. You know, the guys who marry entire Governmental
IT departments to potential outsourcers in the scale of IBM, EDS etc.

The other day he sat down at my computer and, over a nice merlot, proudly
showed me their new corporate web site. Probably only cost them a $million
or so.

I immediately fussbudgeted my font size up two notches and we admired how
the entire site fell totally apart. White text escaped out of its blue boxes
and disappeard. The menu bar wrapped under the fixed size box and became
unusable. Stuff went everywhere. You know the deal.

Mate said: You could make some money showing people like us how their web
sites break so easily.

Nope, I said and pointed him to alt.html

If each of us continuously fussbudget at the stupidity we see every day then
eventually the web as a whole might just become a little bit easier to use.

 

[Bergamot]

http://barefile.com.au/damage.html

LOL

Actually, it makes me want to cry. While most of the US was waiting for
hurricane Rita to nail Texas a couple years ago, my deck was being
destroyed in the last storm of summer here.

Surprisingly, all the bird feeders hanging from the deck railing
survived completely intact, seed included.

 

[Bergamot]

The other day he sat down at my computer and, over a nice merlot, proudly
showed me their new corporate web site. Probably only cost them a $million
or so.

I immediately fussbudgeted my font size up two notches and we admired how
the entire site fell totally apart.

I have to wonder - now that someone in the company knows about this,
will there be any action taken to correct it?

 

[savedumbo]

So, I'm not quite sure what I started with my original post, but I am
still searching for some help. I took some suggestions and changed the
CSS so the content is no longer being clipped (overlayed) when the
browser window shrinks vertically. However, my footer div no longer
attaches to the absolute bottom of the page if the window is stretched
so the content div is more than the 700px I have specified. How do I
keep things as they are, but force the footer div to always stick to
the bottom of the page, even when the window is stretched vertically?

Thanks in advance.

 

[rf]

I have to wonder - now that someone in the company knows about this,
will there be any action taken to correct it?

<checks/>

Yes, Action has been taken. They have fixed it.

The menu is now images of text [1]. These do not resize so they never wrap.

The offending escaping text is now part of a flash movie so does not resize
and so can never escape from its box. <checks further/> Well, some of the
text anyway, they only fixed the "home" page. The rest resizes into white
space as before.

[1] took me a couple of minutes to figure out how they had done this. The
XHTML is quite ordinary:

<ul id="mainnav">
<li id="navhome"><a href="/">Home</a></li>
....

It's the CSS that does the trick:

#mainnav li a
{
....
text-indent: -9999px;
}

#navhome a
{
background-image: url(/images/nav_home.gif);
width: 64px;
}

Gotta love those web dreziners.

 

[dorayme]

URL: savedumbo.org

I have the footer positioned absolutely to the bottom of the page, so
when the user expands their browser window vertically, the footer
always attaches to the bottom. However, if the user shrinks their
browser window vertically, the footer content overlays on top of the
page elements above it.

Not on my Mac browsers. Perhaps you are talking IE. Did you read
the thread. Along with the chit chat is a demo of something that
might help you. One of the things I remember about the demo
offered you is html height was set to 100%. This was important in
the demo. Another thing that needs to be noted is some special
stuff, for IE's eyes only via a conditional. Perhaps you could
look again at this and ask specific questions.

A couple of remarks though: why bother for this site to worry
about it, you have lots of stuff in the height anyway and it
would not matter if the "footer" (which is not exactly a normal
footer but looks more like solid content) simply is at the end of
the rest of the things. How big do you think average screens are?

While talking height, you use divs to space stuff heightwise. Why
not dispense with this and set margins and paddings on the real
working divs instead.

 

[Neredbojias]

And proud, now that I know what one is

A mate of mine works with one of the Very Very Large multinational
intermediary consultancies. You know, the guys who marry entire
Governmental IT departments to potential outsourcers in the scale of
IBM, EDS etc.

The other day he sat down at my computer and, over a nice merlot,
proudly showed me their new corporate web site. Probably only cost
them a $million or so.

I immediately fussbudgeted my font size up two notches and we admired
how the entire site fell totally apart. White text escaped out of its
blue boxes and disappeard. The menu bar wrapped under the fixed size
box and became unusable. Stuff went everywhere. You know the deal.

Mate said: You could make some money showing people like us how their
web sites break so easily.

Nope, I said and pointed him to alt.html

If each of us continuously fussbudget at the stupidity we see every
day then eventually the web as a whole might just become a little bit
easier to use.

Well, I understand your point but would also say that persnickety can
repress creativity. Newbies (-and I use the term liberally here) need
some latitude to err during the process of learning how to accomplish
their aims. The important thing is that once they produce something they
like, they maintain a desire to improve their skills and work by
acquiring knowledge of standards and methods warranted for use in the
craft of pagemaking. It may not be rocket science but it isn't that
simple, either. One has to start somewhere, and nobody makes a "good"
page which is at all comprehensive from the get-go. Somebody who wants
to will eventually learn the techniques. Alternately, someone with an
attitude will learn nothing, and attitudes are enflamed by nitpicking.