Preventing Content Clipping if Browser Window Shrinks Vertically?

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!

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Sun, 24 Jun 2007 20:48:45 GMT scribed:

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

--
Neredbojias
He who laughs last sounds like an idiot.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

In article
,
Neredbojias wrote:

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

--
dorayme

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

"dorayme" wrote in message
news:doraymeRidThis-F378FB.14255925062007@news-vip.optusnet. com.au...
> In article
> ,
> Neredbojias wrote:
>
>> 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?

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.

--
Richard.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

In article <467f509b$0$36986$c30e37c6@pit-reader.telstra.net>,
"rf" wrote:

> "dorayme" wrote in message
> news:doraymeRidThis-F378FB.14255925062007@news-vip.optusnet. com.au...
> > In article
> > ,
> > Neredbojias wrote:
> >
> >> 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?
>
> 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.

--
dorayme

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Mon, 25 Jun 2007 04:25:59 GMT dorayme scribed:

> In article
> ,
> Neredbojias wrote:
>
>> 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?

Yep.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Mon, 25 Jun 2007 05:15:29 GMT rf scribed:

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

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



--
Neredbojias
He who laughs last sounds like an idiot.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

In article
,
Neredbojias wrote:

> On Mon, 25 Jun 2007 04:25:59 GMT dorayme scribed:
>
> > In article
> > ,
> > Neredbojias wrote:
> >
> >> 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?
>
> 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...)

--
dorayme

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

"Neredbojias" wrote in message
news:Xns995A2F1C65A1nanopandaneredbojias@198.186.190.161...
> On Mon, 25 Jun 2007 05:15:29 GMT rf scribed:
>
>>> 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 :-)
>
> 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.

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

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.

--
Richard, now happily using Telstra's server as bigpond is now fifteen hours
behind. Help desk are "working on the matter" :-)

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

"dorayme" wrote in message
news:doraymeRidThis-29BB1D.17251725062007@news-vip.optusnet. com.au...

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

--
Richard.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

In article <467f7453$0$40136$c30e37c6@pit-reader.telstra.net>,
"rf" wrote:

> Speaking of storms:
>
> http://barefile.com.au/damage.html

It is tough over here!

--
dorayme

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Mon, 25 Jun 2007 07:27:04 GMT rf scribed:

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

Yes, in my haste to remove the Opera j/s hack, I accidently deleted
a dim line as well. -Now fixed.

>>> 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.
>
> 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
He who laughs last sounds like an idiot.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Mon, 25 Jun 2007 07:25:17 GMT dorayme scribed:

>> > Does this work on WinIE ok?
>>
>> 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).

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 style="frown:immediate_concern;">bumped his head.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

"Neredbojias" wrote in message
news:Xns995A1039E8ADBnanopandaneredbojias@198.186.190.161...
> On Mon, 25 Jun 2007 07:25:17 GMT dorayme scribed:

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

--
Richard.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

rf wrote:
>
> 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. :)

--
Berg

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

rf wrote:
>
> 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?

--
Berg

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

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.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

"Bergamot" wrote in message
news:5eahd0F37d7ifU2@mid.individual.net...
> rf wrote:
>>
>> 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?



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

....

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.

--
Richard.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

In article
<1182718125.164190.325450@o61g2000hsh.googlegroups.com>,
savedumbo@gmail.com wrote:

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

--
dorayme

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Mon, 25 Jun 2007 09:59:55 GMT rf scribed:

> "Neredbojias" wrote in message
> news:Xns995A1039E8ADBnanopandaneredbojias@198.186.190.161...
>> On Mon, 25 Jun 2007 07:25:17 GMT dorayme scribed:
>
>> 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.

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.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

rf wrote:
>
> #mainnav li a
> {
> ...
> text-indent: -9999px;
> }
>
> #navhome a
> {
> background-image: url(/images/nav_home.gif);
> width: 64px;
> }
>
> Gotta love those web dreziners.

FYI, that's an early Image Replacement method, one that is frowned upon
as being inaccessible because it fails when images aren't loaded.

--
Berg

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Jun 26, 7:13 am, "rf" wrote:
> "Bergamot" wrote in message
>
> news:5eahd0F37d7ifU2@mid.individual.net...
>
> > rf wrote:
>
> >> 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?
>
>
>
> 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. 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:
So what your saying is: they broke it even more. You should now offer
them a nice amount of money for fixing the site.

>
>

>

> ...
>
> 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.
>
Yeah, point your mate to the following site. http://www.webpagesthatsuck.com
--
Regards Chad. http://freewebdesign.awardspace.biz

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Jun 26, 5:51 am, savedu...@gmail.com wrote:
> 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.
The simple answer is NOT to use fixxed widths for things, unless you
have a really good reason and it does not break anything major, such
as text readability. Use em or % unit (otherwise known as relative"
units, mind some of my spelling. I have had one or two drinks.
--
Regards Chad. http://freewebdesign.awardspace.biz

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Jun 26, 9:34 am, Chaddy2222 sicur...@yahoo.com.au> wrote:
> On Jun 26, 5:51 am, savedu...@gmail.com wrote:> 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.
>
> The simple answer is NOT to use fixxed widths for things, unless you
> have a really good reason and it does not break anything major, such
> as text readability. Use em or % unit (otherwise known as relative"
> units, mind some of my spelling. I have had one or two drinks.
> --
> Regards Chad.http://freewebdesign.awardspace.biz

How does changing fixed-width divs to relative-width divs help me?
This is a height issue, not width. I am just looking to have the
footer div attached to the bottom of the page when the page height
grows vertically. Why is this so difficult?

I have tried lots of changes, nothing has worked. Can anyone give me a
specific CSS change to try?

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Jun 27, 8:51 am, savedu...@gmail.com wrote:
> On Jun 26, 9:34 am, Chaddy2222 >
>
>
>
>
> sicur...@yahoo.com.au> wrote:
> > On Jun 26, 5:51 am, savedu...@gmail.com wrote:> 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.
>
> > The simple answer is NOT to use fixxed widths for things, unless you
> > have a really good reason and it does not break anything major, such
> > as text readability. Use em or % unit (otherwise known as relative"
> > units, mind some of my spelling. I have had one or two drinks.
> > --
> > Regards Chad.http://freewebdesign.awardspace.biz
>
> How does changing fixed-width divs to relative-width divs help me?
> This is a height issue, not width. I am just looking to have the
> footer div attached to the bottom of the page when the page height
> grows vertically. Why is this so difficult?
>
> I have tried lots of changes, nothing has worked. Can anyone give me a
> specific CSS change to try?
Take a look at my main site, it should do what you want regarding the
footer with no CSS hacks.
--
Regards Chad. http://freewebdesign.awardspace.biz

Re: Preventing Content Clipping if Browser Window Shrinks Vertically?

On Jun 26, 11:43 pm, Chaddy2222 sicur...@yahoo.com.au> wrote:
> On Jun 27, 8:51 am, savedu...@gmail.com wrote:
>
> > On Jun 26, 9:34 am, Chaddy2222 >
> > sicur...@yahoo.com.au> wrote:
> > > On Jun 26, 5:51 am, savedu...@gmail.com wrote:> 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.
>
> > > The simple answer is NOT to use fixxed widths for things, unless you
> > > have a really good reason and it does not break anything major, such
> > > as text readability. Use em or % unit (otherwise known as relative"
> > > units, mind some of my spelling. I have had one or two drinks.
> > > --
> > > Regards Chad.http://freewebdesign.awardspace.biz
>
> > How does changing fixed-width divs to relative-width divs help me?
> > This is a height issue, not width. I am just looking to have the
> > footer div attached to the bottom of the page when the page height
> > grows vertically. Why is this so difficult?
>
> > I have tried lots of changes, nothing has worked. Can anyone give me a
> > specific CSS change to try?
>
> Take a look at my main site, it should do what you want regarding the
> footer with no CSS hacks.
> --
> Regards Chad.http://freewebdesign.awardspace.biz

I looked at your site and used some of your CSS (I use a very similar
page template format with divs) but I still can't get it working. The
footer div does not stick to the absolute bottom of the page. Can you
take a look at my CSS and let me know what I need to change to get
this working? Thanks!