clearfix not working in ie7

I'm seeing the same problem. It seems that the problem was introduced when #445830: Rename clear-block CSS class to clearfix was committed.

This patch fixed the problem for me, taken from http://www.webtoolkit.info/css-clearfix.html.

I'm using Zen 6.x-2.0-beta1, but I see .clearfix in page.css with some documentation.

/*
 * Markup free clearing (See: http://www.positioniseverything.net/easyclearing.html )
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

@_natron The problem is that IE7 doesn't recognize the :after pseudoclass, and so it ignores this rule.

ah. right.

Just noting, that the patch in post #1 fixed the issue for me.

Whoa this patch saved me from pulling more hair out ;) thanks!

Last patch had some tabbed indents that were bugging me.

thanks for the patch, agreed it should be in ie.css

I notice that this duplicate: http://drupal.org/node/721264 is marked as fixed.. which should rely on this patch being included in dev. Has it been?

The best way to use a clearfix can be found at best clearfix ever. It doesn't use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.

Simpler patch.

The patch in comment #7 works in both IE 6 and 7.

Tested on Zen 6.x-2.0 as well.

Just FYI, D7 comes with the following clearfix (in system.css) which has fixes for IE6 and 7:

/**
 * Markup free clearing
 * Details: http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}

Thought you might want to consider this :)

I'd like to second the suggestion we use D7's method, as suggest in comment #14

subscribing

I have tried nearly all of these patches in the ie.css file, and none of them seem to be fixing the problem I'm having with my footer. I can't figure out what I'm doing wrong. Any suggestions?

@MC_McMic, try adding the code from #14 to your stylesheet. If that doesn't fix your problem, then it might not be caused by this issue, or perhaps the CSS is not loading correctly.

@MC_McMic - are you using css optimiser or the agregator or some other method of getting over the IE number of style sheet problem?

Are you making sure that the changes you make to the css are being copied through to the css that is being used? These modules compress the css into a single sheet in the site/mysite/files folder and you need to go to the theme page and save the Zen config and then clear the cache to make sure the new css is picked up.

Wow, sorry it took me so long to reply. Every time I came into the forums section of the Drupal.org site, it would log me out... very strange. I had to restart to fix it.

Anyway, I did get the clearfix to work in IE7, but only by applying the suggested changes to the pages.css file... not the ie.css file.

I was being careful to clear the cache, and I do not have any of the performance optimizations turned on yet.

Copying and pasting the code from #14 works perfectly.

Ditto on the code from #14. It fixed the issue with IE7 for me.

No need to pollute our CSS files with hacks as in #14, we have ie-specific stylesheets.

seems fine, but i don't have ie to test...

The current clearfix class works fine in IE.

Are you all experiencing the 31 stylesheet limitation of IE? Try turning on CSS aggregation and see if you still have issues with Zen's clearfix class.

@dboulet The lines you are replacing in the ie.css and ie6.css already fix the clearfix class for IE6 and IE7. That's what "zoom: 1" does. Its an IE-only rule that turns on the element's haslayout property. http://www.satzansatz.de/cssd/onhavinglayout.html