"contained float" clearing doesn't seem to validat

Could you show us it in the context of the rest of your css?

I'm sorry, but I don't see how display: inline-block is real. Did you make it up?

Well it's straight out of the page I linked to in the first post : http://www.csscreator.com/attributes/containedfloat.php

#content:after, #nav:after, .gallery:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

#content, #nav, .gallery {display: inline-block;}

/* Mark Hadley's fix for IE Mac */
/* Hides from IE Mac \*/
* html #content, * html #nav, * html .gallery {height: 1%;}
#content, #nav, .gallery {display: block;}
/* End Hack */

I guess "display: inline-block" is a hack, but I don't know any more...

You'll find my stylesheet and a sample page here : http://www.chokebore.net/temp/v7/

TPH display:inline-block is part of the CSS2.1 specs.

Support for it is patchy but nonetheless it's a useful little property allowing the element to remain inline on the outside and blocklevel on the inside and containing either block or inline elements in theory.

IE only supports it on the span tag if I remember rightly and the validator has not caught up with it yet hence the validation error.

florent, switch the inline-block to inline-table and you should be ok as the validator recognizes inline-table as it's from an earlier standard and this is I believe the current method to use with Tony's clearing floats technique.

Hugo.

Thanks Hugo !

I just recently put together a cross-browser solution (IE5.5+, MacIE5, Opera, Safari, Icab3, FF/MZ/NS) for inline-block (and "-moz-inline-box") that uses valid HTML/XHTML. It works like a charm.

I'm just wondering how "correct" it is to use CSS2.1 properties, since the code doesn't validate at the W3C CSS validator?

/J

EDIT 050709: Correction: wrote "-moz-inline-block", but I meant "-moz-inline-box"

Use it, it's going to be a part of the spec, if not already, the Jigsaw validator has just not been updated to account for it. I wouldn't let that put one off using the property if it has a use, and it will have .

I think I'm right in saying that it throws up a warning rather than an error, if that troubles anyone just be ready with the explanation as to why, it's not an invalid property per se.

Hugo.

As Hugo says, Jigsaw throws an error because it works to css2.0. CSS2.1 is a candidate for release, and is not 'official' yet.

As to the inline-block value, it is used in this case as a specific hack for IE5.x/Mac and is over-ridden for all other browsers. Standards are there for guidance and as a common base for everyone to work from. It is a Good Thing® for code to validate. It is not a Bad Thing® if it doesn't, and you know it doesn't, and you know why it doesn't, and you have a good reason to leave it that way.

Tony's clearing hack meets all criteria.

cheers,

gary

Ok, thanks.

Thank you all for your input. I guess my only problem is I've added "valid XHTML" and "valid CSS" show-off links. Can you hack these ?

Florent how do you mean can you hack those what are you trying to hack ? if the problem is that your concerned with display:inline block throwing up a warning with the jigsaw validator then as has been mentioned before switch it to inline table which is a CSS2 property and as such the validator will be alright with it as will IEMac, these properties are to fix a problem with IEMac and floats expanding to 100% if they contain block level elements and have no width themselves - left to shrinkwrap the contents as allowed in the new specs.

If this is not the problem what is it your concerned with ?

Hugo.

Sorry about that Hugo, I was just joking about "hacking" the W3C validator so it would not display any error messages regarding inline-block. I have a problem with compromise

Thanks for your suggestion of using inline table, I'll think about it !