Comments on: Saying Goodbye to the overflow: hidden Clearing Hack

By: Feria de artesanos

Feria de artesanos — Wed, 25 Apr 2012 17:45:05 +0000

I’m not a purist by any means but the zoom property does not validate using the CSS validating service from the W3C. Is this something to consider or shall we just blow it off and use

By: Norbert

Norbert — Sun, 12 Feb 2012 09:45:53 +0000

This is actually great. I’m sure I gonna use this for future projects.
Respect.

By: Esmalte

Esmalte — Wed, 27 Jul 2011 00:08:57 +0000

I have an addiction, where I have to read a feed if there is new article on it

By: Andy Ford

Andy Ford — Tue, 18 Jan 2011 15:11:49 +0000

@Phillip – Yes, it is something to consider. I’ve considered it and I don’t see any issue with having a few rules that don’t validate in my stylesheet. However it is good to validate your CSS as a means to discover other problems such as missing curly braces or typos in property names.

But a few ‘zoom:1′ rules aren’t going to have a catastrophic effect like an unclosed tag might in your HTML. In other words I do think we should strive for valid HTML but I think we can be selective about what does and does not validate in our CSS.

And if you really want to keep your CSS valid, you can always use conditional comments in your HTML to serve IE-specific stylesheets to IE.

By: Phillip

Phillip — Mon, 17 Jan 2011 22:48:29 +0000

I’m not a purist by any means but the zoom property does not validate using the CSS validating service from the W3C. Is this something to consider or shall we just blow it off and use it anyway?

By: Catherine Azzarello

Catherine Azzarello — Wed, 01 Sep 2010 18:16:04 +0000

Thank you! I’m in the middle of coding a site using Paul Irish’s HTML5 Boilerplate. I forgot about clearfix and began using overflow:hidden. It totally messed up my box-shadows.

Then I tried clearfix and all is right! Going to put a big sticky note on my monitor to NOT use overflow:hidden anymore.

By: Andy Ford

Andy Ford — Wed, 28 Jul 2010 00:43:01 +0000

@Chris – Thanks for chiming in. I’ve recently converted to Sass/SCSS and this will be a big help.

My new problem is CSSEdit is virtually useless now. I wish there were a TextMate bundle with the exact same code completion as CSSEdit. I’m not all that crazy about the zen css tab triggers.

By: Chris Eppstein

Chris Eppstein — Wed, 28 Jul 2010 00:12:57 +0000

If you want to keep your markup semantic like Dan suggests, I recommend using sass to preprocess your stylesheets for you. Here’s a code example that shows how to achieve the same result with much cleaner styles.

http://gist.github.com/493085

By: eednew

eednew — Mon, 10 May 2010 17:50:41 +0000

I too have been searching for the best clearing floats solution and have trimmed down a fix to what seems (to me anyway) to be the simplest and the most non-destructive. I like the idea of using something more semantic like “group” for a class name instead of “clearfix” and use mix of the single class name and the “big long list”.

.className :after {
content: ” “;
display: block;
height: 0;
clear: both;
}
.className {display: inline-block;}
.className {display: block;}

By: blowfish

blowfish — Thu, 06 May 2010 19:07:31 +0000

said:

Interesting and helpful “clearing-solution”, thx for sharing!