I would like to have a border on both sides of my page, all the way down to the bottom of the window. So I add some css. Simple example:

#page-wrapper {
	border-left: 1px solid;
	border-right: 1px solid;
}

The border shows, almost all the way down. But there always is still some whitespace left below. Without borders...
I've been searching for hours with firebug and so on, but cannot find the reason for this behaviour, let alone a solution.

Who know what is causing this? Is there a solution?

Comments

akalata’s picture

akalata commented

Don't forget that browsers will add their own default CSS; unfortunately this won't show up in Firebug. Try setting body {margin: 0;} and let me know how you make out. :)

PS - I'm pretty sure it's margin, not padding, but I could be mis-remembering.

Tino’s picture

Tino commented

Related CSS in this case is:

html, body {
	height: 100%;
	margin: 0 auto;
	padding: 0;
}
#shadow {
	margin: 0 auto;
	padding: 0;
	min-height: 100%;
	height: auto;
	width: 818px;
	background: #fff url(../images/shadow.jpg) repeat-y;
}	
#page {
	width: 788px;
	margin: 0 auto;
}

My example in #1 was simplified, but has the same unwanted result: some whitespace (about 15px) below.
#shadow contains #page (centered).

As you can see, the margin of the body is already set to 0. As is padding...

akalata’s picture

akalata commented

If you've got a fixed-width layout, you could set a background image to mimic your repeating shadow border. If not, I'd need to see a link in order to provide further CSS support.

Tino’s picture

Tino commented
Status: Closed (fixed) » Active

I tried that method in the same template before... But it I honestly don't like it, 'cause it can result in just 1px off center display of the content due to different/changing window widths in some browsers. If it does gets 1px of... well, it looks... off... ;-)

I've been using exactly the same method (and css) in a customized Acquia Prosper theme yesterday for another website. No whitespace in that one...

akalata’s picture

akalata commented

Success (according to firebug).

Add overflow: hidden to #shadow.

See the bottom of layout-[fixed/liquid].css for the explanation. This wouldn't have worked since you renamed #page-wrapper to #shadow.

Tino’s picture

Tino commented
Status: Active » Closed (fixed)

That works!
Thanks for your time and help Anna.

Status: Active » Closed (fixed)

Correcting issue status, see #2125263: Issue status not taken from last comment during D7 migration.