Weird padding at the bottom of the body [#705900]

I have this weird 24px gap appearing at the bottom of the < body >, in ALL browsers (except IE). This prevents having a page that flows all the way to the bottom of the browser screen. The only workaround I have found is to set a border-bottom: 24px to the div#page, that matches the background color of the page.

Both Omega (main theme) and my subtheme have the same problem. I set padding and margins to 0 in all the divs & stylesheets you can possibly think of, including html and body tags -- and still no results. Even removed the default line-height, to no avail.

I don't have this problem with Zen or other base themes.

I think this is not a css problem. There's something somewhere that w3c-compliant browsers do not read correctly.

Comments

Comment #1

himerus commented 24 February 2010 at 16:08

Assigned:	Unassigned	» himerus
Issue tags:		+6.x-1.0-beta1

You are correct. I had located the CSS error before when doing a subtheme of Omega, and hadn't commited the change.
I will track down the issue, and get it fixed.

Sorry for the delay, this will be corrected in beta1.

Comment #2

himerus commented 27 March 2010 at 23:04

fixing the issue... it can be located in regions.css... it's the 20px bottom margin on the footer-first that causes this in most situations if you aren't using the multiple region settings.
Will be fixed in beta-1.

Comment #3

himerus commented 27 March 2010 at 23:33

Status:

Active

» Fixed

This has been fixed and committed in the 6.x-1.0-beta1 release. You can download this version here.

Comment #4

illepic commented 5 April 2010 at 00:14

I'm was still seeing the whitespace at the bottom of my pages with Beta2 of the Omega theme.

However, I modified my page.tpl.php files and added a class "clearfix" to the page element and used this in my custom css file (from http://drupal.org/node/457778#comment-200198):

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Comment #5

himerus commented 11 April 2010 at 19:12

Status:

Fixed

» Active

Okay, I'm marking this as active again, and will further investigate.

Comment #6

himerus commented 11 June 2010 at 14:57

I'm still seeing this issue in the Drupal 6 and Drupal 7 versions of Omega...

I can't seem to locate the culprit through multiple methods of testing... the CSS specifically in the D7 version has been greatly cleaned up, and there are NO relative positions being assigned to the page, no margins or paddings, etc.

Hoping to solve this issue soon on the D7 version, and then apply the fix to the D6 version as well...
If there is any further information on this CSS issue, I'd gladly take some pointers here as to what may be causing it, or be the solution...

Comment #7

himerus commented 11 June 2010 at 15:17

Status:

Active

» Fixed

Okay... when using simply:

/* fixing clearfix issues with padding at bottom of page */

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0;
}

This DOES fix the issue in both D6 and D7.

The fix has been committed and added to the following releases: