Hi, I recently found out about that new great method of clearing contained floats without additional markup (http://www.csscreator.com/attributes/containedfloat.php).
I'm using it in my work-in-progress new site version, but I just noticed that it seems to prevent the CSS from validating :
Line: 312 Context : #nav , .gallery
Invalid number : display inline-block is not a display value : inline-block
I looked at the discussion thread in the how to forum but it doesn't seem this has been addressed...
"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?
"contained float" clearing doesn't seem to validat
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/
"contained float" clearing doesn't seem to validat
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.
"contained float" clearing doesn't seem to validat
Thanks Hugo !
"contained float" clearing doesn't seem to validat
TPH display:inline-block is part of the CSS2.1 specs.
Support for it is patchy but [...]
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"
"contained float" clearing doesn't seem to validat
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.
"contained float" clearing doesn't seem to validat
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
"contained float" clearing doesn't seem to validat
Ok, thanks.
"contained float" clearing doesn't seem to validat
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 ?
"contained float" clearing doesn't seem to validat
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.
"contained float" clearing doesn't seem to validat
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 !