11 replies [Last post]
florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 2 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

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 :

Quote:
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...

I'm a perfectionist
and perfect is a skinned knee

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

"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? Tongue

Verschwindende wrote:
  • CSS doesn't make pies

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 2 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

"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/

I'm a perfectionist
and perfect is a skinned knee

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

"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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 2 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

"contained float" clearing doesn't seem to validat

Thanks Hugo !

I'm a perfectionist
and perfect is a skinned knee

s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 13 years 17 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

"contained float" clearing doesn't seem to validat

Hugo wrote:
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"

Validator.w3.org compels you! Validator.w3.org compels you!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

"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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

"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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 13 years 17 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

"contained float" clearing doesn't seem to validat

Ok, thanks.

Validator.w3.org compels you! Validator.w3.org compels you!

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 2 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

"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 ? Laughing out loud

I'm a perfectionist
and perfect is a skinned knee

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

"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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 2 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

"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 Wink

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

I'm a perfectionist
and perfect is a skinned knee