White space at bottom of page: .clear-block versus .clearfix
Todd Nienkerk - May 8, 2009 - 20:37
| Project: | NineSixty (960 Grid System) |
| Version: | 6.x-1.x-dev |
| Component: | Documentation |
| Category: | task |
| Priority: | normal |
| Assigned: | Todd Nienkerk |
| Status: | active |
Jump to:
Description
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.
| Attachment | Size |
|---|---|
| .clear-block method (note white space) | 34.72 KB |
| .clearfix (white space gone) | 34.95 KB |
#1
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 ?
#2
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 */
#3
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).
#4
Thank you very much! I never would have figured this out. Used fix in #2. Works in all browsers.