FF Issue with height:0 on a "clearfix"

[derrickshowers]

This question stems from this blog post. I’ve recently discovered that there is an issue with hash/anchor links (not sure exactly what to call them, but http://something.com#something) in FF when using the height:0.

Here’s an example of it not working (remember to look at this in FF): http://jsfiddle.net/GKCE6/21/show/#some-content. If you scroll up, you’ll see the content is getting cut-off at the top.

Now, take a look at this: http://jsfiddle.net/GKCE6/23/show/#some-content. That’s with the height:0 removed from the clearfix class.

Any idea why this would be occurring? I can’t wrap my head around exactly what the height property is doing in the context of the clearfix.

Here is my StackOverflow question that no one has really responded to since yesterday. If you’re not sure, maybe help with some up votes :)

[Merri]

What do you need the overflow: hidden; for? Removing those two occurances are enough to get the issue resolved. Since you’re using a clearfix there should be no reason at all to use overflow, which is often used as a clearfix solution.

Of course this is likely to be a bug in Firefox and should be reported. You already have a good testcase so it isn’t a big step to take :)

You may also be interested to know about micro clearfix.

[Kingslayer]

I have had plenty of problems with the older versions of the clearfix. This and also it not working properly because of the display: inline-block; property.

For me its just easier to use the 2nd-last version of this article.

https://css-tricks.com/snippets/css/clear-fix/

does not give me any problems =)

[Author]

Posts