The .clear-block method creates a strange white space at the bottom of each page. Switching #page's clearing class to .clearfix solves this problem.

Here's the implementation of .clearfix I used:

/**
 * How To Clear Floats Without Structural Markup
 * http://www.positioniseverything.net/easyclearing.html
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0; /* NEW! See http://drupal.org/node/281106#comment-1345134 */
  }
/* IE Mac/Win fixes below */
.clearfix {
  display: inline-block; /* For IE/Mac */
  }
/* Hides from IE/Mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE/Mac */

This needs to be documented somewhere. I have attached screenshots.

CommentFileSizeAuthor
.clearfix (white space gone)34.95 KBtodd nienkerk
.clear-block method (note white space)34.72 KBtodd nienkerk

Comments

crea’s picture

crea commented

Hmm, I tried this and it works for IE and Gecko (Firefox) but not Webkit (Google Chrome, Epiphany-Webkit, and probably Safari too).
I'm using zen_ninesixty theme which is basically same as ninesixty in terms of layout.
Any ideas ?

rok@luckypressure.com’s picture

rok@luckypressure.com commented

I ran into this problem too and it has been solved with these little modifications of the "clear-block / clearfix"...
The explanations and code can be found here :

http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-t...

/* 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 */

crea’s picture

crea commented

Thanks you very much RoK !
I tried your updated clearfix css and have following results.
Using solution posted by Todd Nienkerk: whitespace bug was still present in Webkit-based browsers (Chrome, Safari, Epiphany-webkit) and also Opera
After applying your solution: no whitespace bug in all browsers tested (Chrome, Safari, Epiphany-webkit, IE7, Opera, Firefox).

servantleader’s picture

servantleader commented

Thank you very much! I never would have figured this out. Used fix in #2. Works in all browsers.

rootdownmedia’s picture

rootdownmedia commented

Thanks Todd. The original solution works great for me on Firefox and Safari.

Why is this not listed as a critical bug? Took me hours to debug / find this thread !!!

Carl Johan’s picture

Carl Johan commented

Yes..

dvessel’s picture

dvessel commented
Status: Active » Fixed

I added the .clearfix rule as it was set from 960.gs. Using .clear-block will still leave that gap as it hasn't been changed. It's in the latest dev release "6.x-1.x-dev".

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.