Re: [css-d] How to contain floats without structural markup

[David Hucklesby]

On Fri, 21 Dec 2007 08:21:32 -0700, Alan Gresley wrote:
(Re: the use of invalid CSS)
>
> What my concern is that other CSS user may copy parts of this, potentially 
> morphing
> itself around the various mailing list and forums and result in new user of 
> CSS who use
> these hack not understanding what is going on in there page when they may 
> have some
> invalid declaration within the rule set. The whole rule set is thrown out by 
> the
> validator so the errors within one declaration that could be the cause of 
> their page
> problem does not be parsed thus not reported as an error.
>

Yes. You are quite right, Alan.

While "breaking the rules" may be okay for those who know the reasons
behind the rules, it was unwise of me to suggest this idea as generally
okay.

It's also true that beginners have a hard enough time understanding
the validator error messages as it is.

Thank you for pointing this out.

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[Gunlaug Sørtun]

Alan Gresley wrote:
> What my concern is that other CSS user may copy parts of this, 
> potentially morphing itself around the various mailing list and 
> forums and result in new user of CSS who use these hack not 
> understanding what is going on in there page when they may have some
>  invalid declaration within the rule set.

The fact that we who use hacks to solve problems may _create_ widespread
problems - and even end up _being_ the problem, should indeed not be
lost. By not using valid alternatives when they exist, we are just
polluting CSS for no good reason at all.

Regardless of that: all hacks - valid or not - should be commented when
they are _presented_ as solutions and workarounds. It is only in our own
stylesheets we can get away with less.
Validity in itself isn't all that important, IMO. However, knowing what
one is doing and how it works, is essential.


I have stayed away from this "containing floats" thread since the
solution - with or without hacks - simply wouldn't work for me anyway.
The use of 'overflow' restricts to much, and means among other things
that I can't manipulate elements over the container-edge - something I
do routinely.

This is of course the main reason why I never use my own, 2 year old,
solution...

...which I just revisited and tested to see if it still worked as
intended across browser-land, and updated with the latest finds.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[Alan Gresley]

David Hucklesby wrote:

> Thierry responded:
> 
> Speaking for myself, I "care" for CSS validation, in the way I "care"
> to spell check my documents. But I don't regard either check as the 
> final arbiter of what goes into the a document.
> 
> If I write about the Sheraton Centre in New York, for example,
> my (US) spell checker tells me that "Centre" is misspelled. Still,
> I see no need to "correct" the spelling since the sign on the complex
> spells it that way.
> 
> In the same way, I don't hide proprietary CSS from the validator
> in order to "pass" validation. I don't see the point, as the document
> gets the "invalid" code anyway.
> 
> Likewise, if you need to "hack the dead," what's the difference
> between using a leading underscore and using the "star html" aka. 
> Tan hack? (And since when has the universal selector been invalid?)
> 
> Yes, the underscore does not validate, while the Tan hack does.
> So what?
> 
> Cordially,
> David
> --

Really it doesn't matter what extra gremlims appear in anyones individual 
stylesheets [1]. My main point is that using valid hacks allow the style 
declarations to be fully parsed by the W3C CSS validator [2]. Trying to 
validate with this. 

.newBFC {
overflow: hidden;
_overflow: visible;
_overflow-x:hidden;
_height: 0;
*min-height: 0;
}

Will produce all errors in the validator report and nothing will show as valid. 
Trying to validate with this. 

.newBFC {
overflow: hidden;
_overflow: visible;
_overflow-x:hidden;
_height: 0;
min-height: 0;
}

Will only produce only produce three errors and the validator will show this as 
valid.

.newBFC {
overflow : hidden;
min-height : 0;
}

What my concern is that other CSS user may copy parts of this, potentially 
morphing itself around the various mailing list and forums and result in new 
user of CSS who use these hack not understanding what is going on in there page 
when they may have some invalid declaration within the rule set. The whole rule 
set is thrown out by the validator so the errors within one declaration that 
could be the cause of their page problem does not be parsed thus not reported 
as an error.

Thank you Thierry for the heads up about the star (*) property hack. Since I 
don't used it or any similar hacks, I not to knowing of there names.

[1] 
[2] 

Alan

http://css-class.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[Thierry Koblentz]

> Likewise, if you need to "hack the dead," what's the difference
> between using a leading underscore and using the "star html" aka. 
> Tan hack? (And since when has the universal selector been invalid?)

Hi David,
I think Alan meant the star (*) property hack, not universal selector.


-- 
Regards,
Thierry | http://www.TJKDesign.com




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[David Hucklesby]

Thierry Koblentz wrote:
>>> I'd appreciate any comment that would help me improve this article:
>>>
>>>
>  asp>
>
[...]

Alan Gresley said (Re: 
 ):

>> The universal selector and the underscore is invalid CSS.
>>
[...]
>
Thierry responded:

> I never cared for CSS validation.
>

Speaking for myself, I "care" for CSS validation, in the way I "care"
to spell check my documents. But I don't regard either check as the 
final arbiter of what goes into the a document.

If I write about the Sheraton Centre in New York, for example,
my (US) spell checker tells me that "Centre" is misspelled. Still,
I see no need to "correct" the spelling since the sign on the complex
spells it that way.

In the same way, I don't hide proprietary CSS from the validator
in order to "pass" validation. I don't see the point, as the document
gets the "invalid" code anyway.

Likewise, if you need to "hack the dead," what's the difference
between using a leading underscore and using the "star html" aka. 
Tan hack? (And since when has the universal selector been invalid?)

Yes, the underscore does not validate, while the Tan hack does.
So what?

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[Thierry Koblentz]

>>  I'd appreciate any comment that would help me improve this article:
>>  
>>

>>  
>>  The demo:
>>  
>>  
>
> Hi Thierry, I hope your not advocating the use of invalid CSS.
>
> "Setting hasLayout in IE 7"
>
> .newBFC {
> overflow: hidden;
> _overflow: visible;
> _overflow-x:hidden;
> _height: 0;
> *min-height: 0;
> }
>
> The last line is not needed to set hasLayout in IE7 as overflow:hidden
already does this. 

Very good catch!

When I started writing this article I was using this:

selector{overflow:hidden;*overflow:visible;
*overflow-x:hidden;_height:0;*min-height:0;}

but going from "*" to "_" removes the need for "min-height" 

> The universal selector and the underscore is invalid CSS. 
>
> For the good browsers you can have.
>
> .newBFC {overflow: hidden;}
>
> For IE6 and earlier (hidden from IE mac)
>
> /*  \*/
> * html .newBFC {
> overflow: visible;
> overflow-x:hidden;
> height: 0;
> }
> /*  */
>
> For IE mac (hidden from other browsers)
>
> /*\*//*/ 
> .newBFC {display: inline-block;}
> /*  */

> Having such ugly hacks keeps people aware that sooner or later they can
remove these hacks from their CSS as these legacy browsers fade away.

I used to think that way, I used to use Conditional Comment to serve just 1
or 2 rules to IE. Now I think keeping things "compact" - *in one place* - is
the best approach (at least it is for me). The above is extra bytes and
create one extra rule. I never cared for CSS validation.

Thanks for the heads up :)


-- 
Regards,
Thierry | http://www.TJKDesign.com




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[Alan Gresley]

Thierry Koblentz wrote:

> Hi all,
> 
> I'd appreciate any comment that would help me improve this article:
> 
> 
> 
> The demo:
> 
> 
> 
> Thanks
> -- 
> 
> Regards,
> 
> Thierry | http://www.TJKDesign.com

Hi Thierry, I hope your not advocating the use of invalid CSS.

"Setting hasLayout in IE 7"

.newBFC {
overflow: hidden;
_overflow: visible;
_overflow-x:hidden;
_height: 0;
*min-height: 0;
}

The last line is not needed to set hasLayout in IE7 as overflow:hidden already 
does this. The universal selector and the underscore is invalid CSS. For the 
good browsers you can have.

.newBFC {overflow: hidden;}

For IE6 and earlier (hidden from IE mac)

/*  \*/
* html .newBFC {
overflow: visible;
overflow-x:hidden;
height: 0;
}
/*  */

For IE mac (hidden from other browsers)

/*\*//*/ 
.newBFC {display: inline-block;}
/*  */

Having such ugly hacks keeps people aware that sooner or later they can remove 
these hacks from their CSS as these legacy browsers fade away.

Alan
http://css-class.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[Thierry Koblentz]

>> I'd appreciate any comment that would help me improve this article:
>>
>>
http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a
sp
>>
>> The demo:
>>
>> http://tjkdesign.com/articles/block-formatting_context/newBFC.asp
>
>
> Thanks for the timely article, Thierry.
>
> Interestingly, your demo adds a horizontal scroll bar in
> Firefox 2.0.0.11 here. This turns out to be due to demo #3:
> "The Paul O'brien's method" (with widthless boxes) where the
> class="content" DIV is as wide as its container and overflows it.
> Opera 9.24 drops that DIV below the sidebar, but includes the borders
> on the container as part of the 100% width, so overflows by the
> width of those borders.

I think it is the padding on that box. Left and right padding values add up
to the 100% width

> I had no idea that these clearing methods gave rise to so many 
> problems!!

> (Very minor issue: Line 170 has a "self-closing DIV" that upsets
> the validator. No problem for HTML though.  :) 

I'd say it's a BIG issue, I must have moved these boxes around a bit too
much :)
Thanks a lot for the heads up David

-- 
Regards,
Thierry | http://www.TJKDesign.com


 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to contain floats without structural markup

[David Hucklesby]

On Wed, 19 Dec 2007 09:44:21 -0800, Thierry Koblentz wrote:
> Hi all,
>
> I'd appreciate any comment that would help me improve this article:
>
> http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp
>
> The demo:
>
> http://tjkdesign.com/articles/block-formatting_context/newBFC.asp
>
Thanks for the timely article, Thierry.

Interestingly, your demo adds a horizontal scroll bar in
Firefox 2.0.0.11 here. This turns out to be due to demo #3:
"The Paul O'brien's method" (with widthless boxes) where the
class="content" DIV is as wide as its container and overflows it.
Opera 9.24 drops that DIV below the sidebar, but includes the borders
on the container as part of the 100% width, so overflows by the
width of those borders.

I had no idea that these clearing methods gave rise to so many 
problems!!

(Very minor issue: Line 170 has a "self-closing DIV" that upsets
the validator. No problem for HTML though.  :) 

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] How to contain floats without structural markup

[Thierry Koblentz]

Hi all,

I'd appreciate any comment that would help me improve this article:

http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a
sp

 

The demo:

http://tjkdesign.com/articles/block-formatting_context/newBFC.asp

 

Thanks

 

-- 

Regards,

Thierry | http://www.TJKDesign.com

 

 

 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/