Fail valid CSS/XHTML tests .

First off, you may not need half of those lines of code-- but we don't know that until we see the HTML.

Let's go through what you're doing:

<span style="font-weight:bold">this part is for non-IE browsers, who understand :after</span>
.clsClearFix:after {
	content: "."; <span style="font-weight:bold"> the content who clears stuff</span>
	display: block; <span style="font-weight:bold">this makes it naturally 100% wide</span>
	clear: both;<span style="font-weight:bold"> clearing here</span>
	visibility: hidden; <span style="font-weight:bold">this hides the . but you could also just set a background colour to match the background instead</span>
	line-height: 0; <span style="font-weight:bold">this is an old Mozilla hack I believe... if everyone's using at least FF2 or any newer Gecko browser, you shouldn't need this</span>
	height: 0; <span style="font-weight:bold">ditto, this I think was also an old Mozilla hack</span>
}
` <span style="font-weight:bold"><---not sure what this typo is, but you should remove it</span>
<span style="font-weight:bold">below sets Haslayout in IE, which also makes it wrap floats-- you DON'T need this if you've ALREADY set Haslayout in some other way (like by setting a height, or a width, or any of a few other things on the box)</span>
.clsClearFix {
	display: inline-block;
}
 
<span style="font-weight:bold">I've seen this, but not sure why you need the [xmlns] because this is just to tell IE that you really wanted it to be a block and not inline-block</span>
html[xmlns] .clsClearFix {
	display: block;
}
 
<span style="font-weight:bold">another Haslayout hack... since you already have one (above) you don't need this one (except IE6 can't see the [xmlns] part... remove it and you don't need the line below)</span>
 
* html .clsClearFix {
	height: 1%;
}

Whew.

.clsClearFix{
	overflow:auto;
	zoom:1; <span style="font-weight:bold"><-- this sets Haslayout in IE, but it's IE-only-- it's not valid CSS.  There are other ways to set Haslayout which are completely legal-- besides, setting overflow already triggered Haslayout in IE7 anyway</span>
}
 
* html .clsClearFix{
	height:1%; <span style="font-weight:bold">This sets Haslayout in IE6...</span>
	overflow:visible; <span style="font-weight:bold">this undoes the overflow: auto for IE6 only</span>
}

You're using old clearfixes, when chances are you could get away with something simpler:

.clsClearFix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden; (or a background colour instead)
}
.clsClearFix {
  display: inline-block; (sets Haslayout for IE)
}
 .clsClearFix {
  display: block; (resets the block to what you want for ALL BROWSERS, without losing Haslayout)
}

That should all be perfectly legal.

.clsClearFix{
	overflow:hidden;
}
* html .clsClearFix{
	height:1%;
	overflow:visible;
}

And, if that box already has a width (or some dimension set on it), you don't even need the * html {height: 1%;} thing anyway-- that's just a hidden way to trigger Haslayout in IE6. You could keep the overlfow: auto instead of :hidden but I like hiddden because I don't get teh Uglies scrollbars with hidden. I don't see any height or width set on your box so there's no way something will get "hidden" anyway.

IE7 gets Haslayout just from the change in overflow properties, so you don't need the proprietary "zoom" there either.

That ` character in your code might have triggered an error, but should do no harm to browsers. Same for zoom-- other browsers ignore it, so you could ignore the validator error if you wanted. Most people just don't use zoom to set haslayout so they don't have to worry about having illegal code, but it's not critical here.

Edit/ ah how did I know that I would be too slow and be trummped *sigh* and trumped by so much more wordage

Of more importance really is the fact that it's not that much of an issue to pass or fail CSS validation - as long as the errors are not critical, but then your rules would not have worked anyway! -

You are failing on the star selector filter '* html' which is not valid however CSS parsing rules say that that selector/ruleset will simply be ignored.

You could do away with that part of the clearfix rules instead simply relying on setting display:inline-block and then after resetting to display:block; the star selector in this instance is only useful to feed the rules to IE5

The home of this technique is actually this forum as it was devised by the forum owner, check out the tools tab to find the page describing the technique which may help.

RE validation, it's only important to pass markup validation CSS validation is far less important, I never bother validating CSS I know if it's correct or not.

Blimey poes for someone professing not to use this method of clearing a while back that's a lot of advice.

I wouldn't try and re-invent this technique why not just let it stand? there are times when it's needed as is. line-height is wise to leave in as it's also wise to add font-size:0; .

I have said this before but it's sensible for the moment to retain clearfix as one of the methods available in our arsenal of clearing techniques, don't try and dissuade others from using it.

Thanks to everyone

As I recall, line-height and font-size are necessary for IE. It'll ignore your height:1% and make up its own if it needs more than 1% height for the font-size / line-height. Fwiw, I've always felt height:1% is silly, make it 1px. This avoids any issue with height being undefined or more than a few pixels on tall elements.

AFAIK, IE6 doesn't have a problem with overflow:hidden. However, sometimes you need to enclose floats and not trigger overflow - e.g. when the design calls for particular elements to be placed outside the boundaries of the enclosure.

The thing with IE5 & IE6 is that if you trigger "hasLayout", the float will automatically be enclosed. Hence the usual post (in pre IE7 days) on these forums concerning backgrounds not appearing in Firefox but showing up "correctly" in IE.

Hugo,

The star '*' is valid CSS isnt it? Validated fine for me back in the day when I used it...

Have I mis-read something :shrug: lol

I didn't, but you can re-read what I wrote to see that I don't dissuade anyone from using it. I've just used it on my maps page, but without half the lines.

Instead, I wanted to make it clear that all the Haslayout stuff in the hack is ONLY there when the box doesn't already have Haslayout. If it has Layout, you DON'T need to clutter up your CSS with all that display: inline-block, display: block stuff. If you WANT to repeat code, that's fine. Redundancy can be great for mission-critical code. My code isn't landing the Space Shuttle, so I don't.

I could have sworn I read a line-by-line explanation on the clearfix where it was old Mozilla who needed the height: 0 stuff-- even though I had always thought it was IE who needed it due to the line-height bug of IE6 (thinking line-height=height) so I was surprised when I read which version of Mozilla that was. However I'm going to stop mentioning this until I can find that page again... I'm starting to not trust my memory when I can't find anything googling for "clearfix Mozilla bugs" and various versions of this. Then again, my Google-Fu is notoriously bad.

* html is valid (or, the validator won't say anything about it). It mentions something which doesn't exist-- a parent for the html element, but it won't bring up any errors (it shouldn't). Maybe this depends on DTD used?

This is different-- the overflow float-enclosure technique (sample 2 on OP's post) has overflow: hidden enclosing floats in everyone except IE6, and then overflow: visible and a holly hack w/haslayout for IE6. The OP started out with this, and I remember a crusty from another forum always set overflow back to visible for IE6 whenever setting it to hidden for everyone else, claiming that IE6 has issues with overflow: hidden, so I guessed that was what that was there for. I have never seen problems, and my code goes back and forth on whether I "undo" the overflow: hidden for IE6, and haven't seen a difference (yet). This crusty never said what exactly IE6's problem was with the overflow:hidden, and the comment then was referring to setting overflow to hidden on a 100% #container using 100% height model.

However, I am not advocating that people "reset" IE6 with overflow: visible. Instead, I guessed wherever the OP got that from was preventing some IE6 bug.

'*' is valid css.

'* html' is not valid css. html is the root element, so its invalid to use it as the second or subsequent element in a descendent (or child) selector.

Ah I see. Thanks for that. I honestly didnt know that as I always used html * blabla.

I know this is an old topic but this hack came up again on a website I'm working on.

Try the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
* HTML #box{
	width:100px;
	margin:0 auto;
}
</style>
</head>
 
<body>
<div id="box">center me!</div>
</body>
</html>

Only centres in IE6 and validates. I'm double, triple checking I'm not cheating but as far as I can see it works.

Validates? validates in what?
I'm guessing you have used the sgml w3c validator which validates the markup syntax and well formdness.

* html {} is not valid, as Chris said html is the root element; Nothing can ever validate in the context of a parent to it.

Not sure what 'sgml w3c validator' is but that must be what I'm using:

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.liamsmart.co.uk%2Ftest%2FIE6_CSS_hack.html

hmm Ok it will pass the validator (although have to admit I'm sure it didn't once upon a time, but hey they like to change things?)

Passing the validator is not necessarily an indication that all is well, although it perhaps ought to be with css due to it's strict error trapping nature, It looks as though the validator is saying that the set of selectors is valid, which they are but it's not checking the grouping which is not correct there is no element that exists as a parent of html, thus it can't work and doesn't in nearly all browsers; or has there been a major change that I have missed? quite possible!

It's been valid as long as I've used it, but that's not terribly long and I know there was a big change with the validator right after I started this stuff (better explanations of errors, for one).

However I'll still get an error if I don't have the descendent selector

*html #element
even though that also worked for IE6. It has to be * html #element.

*+html also works, without spacing (IE7 hax) and the validator gives it a pass.

Since they don't complain, I won't either-- I need those!