I had a mysterious gap of about 10px between my page footer region and the actual bottom of the page, which did not seem to be associated with any margin or padding (tested in FF and IE).

I was able to trace it back to the declaration of .clearfix:after in system.base.css. It's caused by the line content: ".";, which apparently makes the browser reserve space in the height of one line, even though "height" is specified to 0.

The easiest fix I could find was to use content: " "; instead, which still has the clearfix affect for me, but does not cause the gap. Note that this is also what Jeff Starr used in his original clearfix hack.

Another possibility is to declare line-height: 0; in addition, but this only shrinks the gap to 1px in height.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jlgreen2012’s picture

Status: Active » Needs review
FileSize
370 bytes

I went ahead and made a patch that replaces the content:"." line with content:" " as you said.

jlgreen2012’s picture

Sorry, this is the correct one.

Status: Needs review » Needs work

The last submitted patch, system-clearfix-1439000-2.patch, failed testing.

diedlikeahero’s picture

Status: Needs work » Needs review
FileSize
365 bytes

This should pass.

Status: Needs review » Needs work

The last submitted patch, system-clearfix-1439000-4.diff, failed testing.

diedlikeahero’s picture

Status: Needs work » Needs review
FileSize
358 bytes

Linux formatting!

Status: Needs review » Needs work

The last submitted patch, system-clearfix-1439000-6.diff, failed testing.

diedlikeahero’s picture

Component: CSS » system.module
Status: Needs work » Needs review
FileSize
392 bytes

Changed component to apply it correctly.

Status: Needs review » Needs work

The last submitted patch, systeam-clearfix-143900-8.patch, failed testing.

filijonka’s picture

I'm a bit concerned that nothing is said in this issue how this does affect any region using the clearfix class.
Nothing is said about which theme this was used on?

When I tried this on a site with bartik theme I got extra spaces between each region that has the clearfix created a much larger space than 10px between them. Which weren't there from the beginning.

ralf.strobel’s picture

It was a custom theme, although I believe it uses the clearfixes quite similar to bartik (applying them to each region and also to each block). The fix had no effect on any element of the layout except that it removed the gap at the page bottom. What browser are you on?

The one thing that worries me the most here is the lack of traceability. At some point, someone obviously had a reason to use "." rather than " ", but it was never documented. At least I could not find it.

Does anyone have a clue as to what the reason could have been or are we really down to try and error?

bmarcotte’s picture

I'm having this problem too. I'm working on a theme based off bartik and I get a gap after the header region. Changing "." to " " does not eliminate the gap. Deleting the 'content: ".";' does remove the gap.
Also, content:none; has no gap either. In my case, I will add content:none; to my theme's css file.

Edit: There becomes an issue with devel page time data applied to the end of the page when content:none; is used. Adding a clear:both; to the footer region fixed the devel issue.

Sorry, I found that I had a margin a couple levels down in main that caused firefox to display a gap where IE didn't. The original clearfix: "." seems to be ok. Odd, but ok.

ralf.strobel’s picture

Version: 7.10 » 7.15

I can imagine that this works, but it probably also breaks the entire clearfix functionality, doesn't it?

As for the origin of the ".", I found that it also appears in the YAML CSS framework. Maybe we can find an explanation and possible fix there?

bmarcotte’s picture

Followup: I did a little experimenting:

the code is:

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

content: " "; i.e. a space leaves a gap. I don't know why.
content: none; leaves a gap.
height: 0 eliminates the gap that would have been created by the "." or any other string
content:"anything in here is ok as long as it is characters";

so content:"." adds a character; height:0 prevents it from taking any vertical space, and visibility: hidden hides the '.' from being shown when height is not 0.

I see no reason to change anything. it seems to work correctly.
Bob

filijonka’s picture

Status: Needs work » Closed (works as designed)
GAMe’s picture

Issue summary: View changes

I have just started putting together a new from scratch responsive theme and I'm finding this same issue and the only way to get rid of it is to change content: "."; to content: " "; which then I believe wont work on older browsers. Im using panels which applies clearfix quite a lot so maybe this could be looked at again.

Thanks