Body background colour

[Tim Streater]

I have a page with the body background-color set to non-white. The last
div on the page is used as a footer, and I've set its background to
white.

Now, if the page as a whole has insufficient material in it to fill the
browser window, then that part of the window below the final div takes
the colour of the body's background-color.

How can I control the colour of that portion of the browser window (I'd
like it to be white)?

 

[dorayme]

I have a page with the body background-color set to non-white. The last
div on the page is used as a footer, and I've set its background to
white.

Now, if the page as a whole has insufficient material in it to fill the
browser window, then that part of the window below the final div takes
the colour of the body's background-color.

How can I control the colour of that portion of the browser window (I'd
like it to be white)?

First suggestion is to be happy to set the background of the
footer to the same as the background to the viewport (set by html
or body bg) and to choose a nice contrasting color for the text.

Of course, everything depends on your design as a whole, but
generally, without knowing specifics, this looks better too. A
footer is something that is *apart* from all else and leaving it
on the viewport at the bottom with a nice readable color lends
itself to this separateness.

However, if something about your design makes it better for the
main content area or non-footer area to be white backgrounded I
can imagine that it is because you want something from above (for
example, a main content wrapper, with white background) to extend
further than it does and to *meet* the footer in a vertical sort
of way. And maybe your footer is a sticky one that keeps to the
bottom?

Or the footer to be just under but married in appearance by
background to the content. The latter should not be difficult,
the footer can safely be given a small height or padding. This
might solve your problem with little effort, but the footer
begins where the non-footer ends in this case. This is almost
always fine imo and much less trouble than trying to force
footers to the bottom of viewports.

Normally a div will have as much height as its content dictates
but you can change this behaviour by giving a height. Often a
specific heigh in px or ems is not what is wanted but you can
give it a percentage height. Everything depends, and with no url,
I merely remark that if the wrapper somehow goes from the top and
you want it to go to the or nearly the bottom, regardless of
viewport, you can give 100% height (remembering to tell the
browser what it is a percentage of (you need to set html and body
too).

 

[Tim Streater]

Normally a div will have as much height as its content dictates
but you can change this behaviour by giving a height. Often a
specific heigh in px or ems is not what is wanted but you can
give it a percentage height. Everything depends, and with no url,
I merely remark that if the wrapper somehow goes from the top and
you want it to go to the or nearly the bottom, regardless of
viewport, you can give 100% height (remembering to tell the
browser what it is a percentage of (you need to set html and body
too).

This is where I'm at so far (still a lot to do here):

<http://www.clothears.org.uk>

Looking better but now there are unwanted scroll bars :-(

I'm using the pale blue background just to soften things up a bit.

 

[Beauregard T. Shagnasty]

This is where I'm at so far (still a lot to do here):

<http://www.clothears.org.uk>

Looking better but now there are unwanted scroll bars :-(

Remove the height and width attributes from the CSS for div.footer
Not necessary. In fact, this following seems to work quite well.

div.footer {
margin: 3em auto 0 auto;
background-color: white;
border: black solid 1px;
text-align: center;
}

Change all your use of pixels in the CSS to percentages and em units.
Use pixels only for borders and actual image sizes. See:
http://tekrider.net/html/fontsize.php

I'm using the pale blue background just to soften things up a bit.

Normally a good idea; bright white can be too sharp on the eyes. I
frequently use something like: background-color: #f5f5f5;

 

[Tim Streater]

Remove the height and width attributes from the CSS for div.footer
Not necessary. In fact, this following seems to work quite well.

div.footer {
margin: 3em auto 0 auto;
background-color: white;
border: black solid 1px;
text-align: center;
}

True except that my original issue remains.

Change all your use of pixels in the CSS to percentages and em units.
Use pixels only for borders and actual image sizes. See:
http://tekrider.net/html/fontsize.php

Thanks for the pointer.

 

[Beauregard T. Shagnasty]

True except that my original issue remains.

What? Scrollbars for short content? <looks again>
Remove completely:
html {
height: 100%;
}

Might as well remove it from body {} too. Doesn't seem to be necessary
on your page at all.

Use color codes instead of words. Most of those you've picked are not
valid names (even if some browsers recognize them), such as AliceBlue.
<http://jigsaw.w3.org/css-validator/...21&warning=0&uri=http://www.clothears.org.uk/>

Here is a plethora of color codes:
http://www.somacon.com/p142.php
AliceBlue is: #F0F8FF;

Remove the font-size from p .. it's redundant as p will inherit from
body.

Thanks for the pointer.

Welcome.

 

[Tim Streater]

What? Scrollbars for short content? <looks again>

No, that on my home page (where at the moment there is not much
content), that part of the viewport below the footer has the same colour
as the body, which exercises me (I want it to be white).

Remove completely:
html {
height: 100%;
}

Might as well remove it from body {} too. Doesn't seem to be necessary
on your page at all.

Perhaps I misunderstood dorayme in that case.

Use color codes instead of words. Most of those you've picked are not
valid names (even if some browsers recognize them), such as AliceBlue.
<http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http
%3A%2F%2Fwww.clothears.org.uk%2F>

Here is a plethora of color codes:
http://www.somacon.com/p142.php
AliceBlue is: #F0F8FF;

I'll check that out later.

Remove the font-size from p .. it's redundant as p will inherit from
body.

Thanks again.

 

[Gus Richter]

I have a page with the body background-color set to non-white. The last
div on the page is used as a footer, and I've set its background to white.

Now, if the page as a whole has insufficient material in it to fill the
browser window, then that part of the window below the final div takes
the colour of the body's background-color.

How can I control the colour of that portion of the browser window (I'd
like it to be white)?

Actually there is a point of understanding in order here. The whole page
has the non-white background and the footer portion has a white
background which is layered over the non-white one and now I believe
you're requesting to have the portion below the footer changed to white.

The proper way is to declare body to have a white background, wrap the
content in a wrapper and declare the wrapper to have your non-white
background.

That way the whole page is white and the portion inside the wrapper is
non-white layered on top of the white body.

 

[Beauregard T. Shagnasty]

:
[schnippety]

What? Scrollbars for short content? <looks again>

No, that on my home page (where at the moment there is not much
content), that part of the viewport below the footer has the same
colour as the body, which exercises me (I want it to be white).

Hmm, <looks again> I don't see any AliceBlue below the footer here in my
browser(s). That bottom border is flush against the bottom of my
viewport. My window may be narrower than yours, around 850px. Though
what Gus just said is a good strategy for making sure there is no
AliceBlue down there.

You should add a <br> after the word "therein" in the footer. It would
center that "Website Hosted By" graphic, thus centering and balancing
the look of things.

 

[Tim Streater]

Actually there is a point of understanding in order here. The whole page
has the non-white background and the footer portion has a white
background which is layered over the non-white one and now I believe
you're requesting to have the portion below the footer changed to white.

The proper way is to declare body to have a white background, wrap the
content in a wrapper and declare the wrapper to have your non-white
background.

That way the whole page is white and the portion inside the wrapper is
non-white layered on top of the white body.

Yes, thanks, and of course I should have thought of that myself. Life
has too many notes at the moment.

 

[Tim Streater]

:
[schnippety]

What? Scrollbars for short content? <looks again>

No, that on my home page (where at the moment there is not much
content), that part of the viewport below the footer has the same
colour as the body, which exercises me (I want it to be white).

Hmm, <looks again> I don't see any AliceBlue below the footer here in my
browser(s). That bottom border is flush against the bottom of my
viewport. My window may be narrower than yours, around 850px. Though
what Gus just said is a good strategy for making sure there is no
AliceBlue down there.

Indeed and see my response to him, cheers.

 

[dorayme]

This is where I'm at so far (still a lot to do here):

<http://www.clothears.org.uk> ....
I'm using the pale blue background just to soften things up a bit.

Fair enough, but given it is the content (excluding footer) and
not the whole viewport generally that you want softer bg, body is
not the first element that should be honoured with the nice blue
you have chosen.

Why? Because the body element only seems like a regular element
in all respects, vertically ending, for example, where its
content ends. But, counter-intuitively, the background
instruction, with some exception, delivers colour to the
viewport.

Exception? The body element is a child of the html element. If
the html element (at least in many generally compliant browsers)
is given a background colour, the browser treats this as the
preferred colour for its viewport (yes, where its bg is different
to body's).

This suggests an unorthodox, unstraightforward strategy for you:
give the html element a soft bg.

<http://dorayme.netweaver.com.au/backgroundAsignment.html>

But straightforward and the thing that comes naturally to mind is
simply to give the body a background you are happy the viewport
to get, to give the content wrapper the blue you want and leave
it at that.

<http://dorayme.netweaver.com.au/backgroundAsignment2.html>

 

[JJ]

Change all your use of pixels in the CSS to percentages and em units.
Use pixels only for borders and actual image sizes. See:
http://tekrider.net/html/fontsize.php

Good article but the consensus around here regarding font sizing makes
me wonder how many of you actually work in commercial environments. I'm
a frontend web developer for a large UK corporation, and do you know
what would happen if we sent a website off for review with font sizes
such as:

body { font-size: 100%; }
h1 { font-size: 175%; }
h2 { font-size: 150%; }
h3 { font-size: 135%; }
h4 { font-size: 125%; }
..legalese { font-size: 85%; } ?

Well, we'd have a bunch of higher-ups complaining about the fonts being
too big, and about how the website looks nothing like the PSD's from the
design agency they paid a huge amount of money for. And no amount of
arguments like Poley's will make them happy with the 16px fonts they're
seeing in their browser, especially in light of the fact that once the
sites go live, they never have any significant complaints from the
public about the useability of the websites.

 

[Jukka K. Korpela]

Well, we'd have a bunch of higher-ups complaining about the fonts
being too big, and about how the website looks nothing like the PSD's
from the design agency they paid a huge amount of money for.

Of course. That's because commercial web site appearance is mostly designed
to please the advertizing department and some bosses inclined into listening
to deeziners.

Some sites may deviate from this because they actually asked their customers
or measured the effects.

 

[Beauregard T. Shagnasty]

Some sites may deviate from this because they actually asked their
customers or measured the effects.

My local newspaper (medium sized city) underwent an unneeded "upgrade"
to their site a month ago. One of the senior editors-in-charge invited
comments ("click here to email me"). So I did, noting numerous extreme
shortcomings (but not including font size). No reply from her after two
weeks. Sent a followup. Now two more weeks and still no reply, even
after asking politely for one.

None of my points were addressed so far... :-(

 

[Beauregard T. Shagnasty]

Good article but the consensus around here regarding font sizing
makes me wonder how many of you actually work in commercial
environments.

Probably not many, to be sure. The Company Line not preached here.

I'm a frontend web developer for a large UK corporation, and do you
know what would happen if we sent a website off for review with font
sizes such as:

body { font-size: 100%; }
h1 { font-size: 175%; }
h2 { font-size: 150%; }
h3 { font-size: 135%; }
h4 { font-size: 125%; }
.legalese { font-size: 85%; } ?

Well, we'd have a bunch of higher-ups complaining about the fonts
being too big, and about how the website looks nothing like the PSD's
from the design agency they paid a huge amount of money for. And no
amount of arguments like Poley's will make them happy with the 16px
fonts they're seeing in their browser,

Have you advised them they need a new 'design agency?'

Do they bring in testers? Real people with various degrees of vision
problems? Unlikely, right? I don't know of any commercial company
deeziners who do...

especially in light of the fact that once the sites go live, they
never have any significant complaints from the public about the
useability of the websites.

My first thought would be (if the site doesn't have some unique content
only available there and nowhere else) would be to start checking the
counts of user access for declines after a few weeks.

My advice to you is to continue to accept your paycheck and do what they
tell you to do. Once you move on to designing sites for your *own*
clients, you can begin to preach usability.

 

[Jukka K. Korpela]

My local newspaper (medium sized city) underwent an unneeded "upgrade"
to their site a month ago. One of the senior editors-in-charge invited
comments ("click here to email me"). So I did, noting numerous extreme
shortcomings (but not including font size). No reply from her after
two weeks. Sent a followup. Now two more weeks and still no reply,
even after asking politely for one.

I see. Yes, I have noticed, too, that sites asking for feedback so often
tend to ignore it completely. So I should have written "asked for customer
feedback and cared about it".

 

[Beauregard T. Shagnasty]

I see. Yes, I have noticed, too, that sites asking for feedback so
often tend to ignore it completely. So I should have written "asked
for customer feedback and cared about it".

More anecdotes: the above newspaper reports on "new businesses" a
couple of times a month. "Citizens doing well" and so forth. Last fall,
a new company was detailed - a startup web design company. Two
twenty-something guys. A link to their site was given, so naturally I
looked. It was horrible! Was just one page, with JavaScript swapping
out 'content' so it looked like about five pages. And design-wise, was
ugly.

I wrote to them via the contact-us portion of page, politely listing
shortcomings. No response. I wish I could remember the domain name...

 

[C A Upsdell]

I have a page with the body background-color set to non-white. The last
div on the page is used as a footer, and I've set its background to white.

Now, if the page as a whole has insufficient material in it to fill the
browser window, then that part of the window below the final div takes
the colour of the body's background-color.

How can I control the colour of that portion of the browser window (I'd
like it to be white)?

Try:

html { background-color:#fff; }

 

[Tim Streater]

Of course. That's because commercial web site appearance is mostly designed
to please the advertizing department and some bosses inclined into listening
to deeziners.

FYI: advertising is not spelt with a z.