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.
Comment | File | Size | Author |
---|---|---|---|
#8 | systeam-clearfix-143900-8.patch | 392 bytes | diedlikeahero |
#6 | system-clearfix-1439000-6.diff | 358 bytes | diedlikeahero |
#4 | system-clearfix-1439000-4.diff | 365 bytes | diedlikeahero |
#2 | system-clearfix-1439000-2.patch | 370 bytes | jlgreen2012 |
#1 | system-clearfix-1439000-1.patch | 370 bytes | jlgreen2012 |
Comments
Comment #1
jlgreen2012 CreditAttribution: jlgreen2012 commentedI went ahead and made a patch that replaces the content:"." line with content:" " as you said.
Comment #2
jlgreen2012 CreditAttribution: jlgreen2012 commentedSorry, this is the correct one.
Comment #4
diedlikeahero CreditAttribution: diedlikeahero commentedThis should pass.
Comment #6
diedlikeahero CreditAttribution: diedlikeahero commentedLinux formatting!
Comment #8
diedlikeahero CreditAttribution: diedlikeahero commentedChanged component to apply it correctly.
Comment #10
filijonka CreditAttribution: filijonka commentedI'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.
Comment #11
ralf.strobel CreditAttribution: ralf.strobel commentedIt 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?
Comment #12
bmarcotte CreditAttribution: bmarcotte commentedI'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.
Comment #13
ralf.strobel CreditAttribution: ralf.strobel commentedI 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?
Comment #14
bmarcotte CreditAttribution: bmarcotte commentedFollowup: I did a little experimenting:
the code is:
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
Comment #15
filijonka CreditAttribution: filijonka commentedComment #16
GAMe CreditAttribution: GAMe commentedI 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