When an element that has the class 'clearfix' touches the bottom of the browser some extra white space appears in between the body and the edge of the browser. 

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

The only discussion I can find on this issue is here: http://drupal.org/node/281106

After trying a few different things like setting the font size and line height to 0 (as suggested in the previous issue) I found that the only thing that would reliably make the white space go away was to replace the content "." with " " (ie a space instead of a full stop)

To be honest I'm surprised I haven't run into this before, so much so that I assumed there is a valid reason why the clearfix rule is using a full stop instead of a space, especially in light of the fact that the article linked to in the comment uses a space and not a full stop. (http://perishablepress.com/press/2009/12/06/new-clearfix-hack)

I have tested this in Safari, FF, IE6, 7, 8 and Opera and all seem perfectly happy with using a space instead of a full stop.

Can anyone come up with a valid reason that we shouldn't change this?

CommentFileSizeAuthor
#4 clearfix-D7.patch917 bytesdroplet
#4 clearfix.patch942 bytesdroplet
#2 1051464-update_clearfix-2.patch858 bytesamateescu

Comments

sonictruth’s picture

sonictruth commented

So, the clearfix rule would become:

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

I will roll a patch if no one can come up with an obvious reason why the full stop is a good idea

amateescu’s picture

amateescu commented
Status: Active » Needs review
StatusFileSize
new 1051464-update_clearfix-2.patch858 bytes

Actually, a space character is no good either, but i agree that we should definitely update our clearfix. Needs good testing though.

References:
https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-...
http://blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-mar...

sonictruth’s picture

sonictruth commented

I'm happy to do whatever the cool kids are doing ;)

droplet’s picture

droplet commented
Title: change full stop to space in .clearfix rule » change full stop to space in .clearfix rule & improve
Version: 7.x-dev » 8.x-dev
StatusFileSize
new clearfix.patch942 bytes
new clearfix-D7.patch917 bytes

the new clearfix removed font-size:0; and use overflow: hidden; instead of visibility: hidden;

amateescu’s picture

amateescu commented
Issue tags: +Needs backport to D7

Sure, but still needs a lot of testing :)

droplet’s picture

droplet commented

some more cool and new clearfix recently:
http://nicolasgallagher.com/better-float-containment-in-ie/

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Needs review » Needs work 
+++ b/modules/system/system.base.css
@@ -244,21 +244,24 @@ html.js .js-hide {
+.clearfix:before,
+.clearfix:after {
+  content: "\0020";    ¶
+  display: block;    ¶
+  height: 0;    ¶
+  overflow: hidden;	
+}

Lots of trailing white-space and tabs here.

18 days to next Drupal core point release.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Needs work » Closed (duplicate)

Actually, marking as duplicate of #961876: Consider new clearfix methods. You can follow up on that issue to track its status instead. If any information from this issue is missing in the other issue, please make sure you provide it over there.