Re: [css-d] Basic questions about the box model

[Georg]

Den 13.08.2017 23.04, skrev Ezequiel Garzón:

What a treat, Georg! THIS kind of insight is what I was hoping for.
I'll try to accept the standards more as a given and not to think too
much about foundational issues, though sometimes these aspects
intrigue me.
I get that. Curiosity is good ... just don't try to find pure logic 
behind//everything you run into, as it may not lead to much. And, there 
will always be bugs...



For instance, and as an aside, while it's commonly
claimed that floats were not intended for layout, Wium Lie rejects
this notion in https://dev.opera.com/articles/css-twenty-years-hakon/.
It is "highly illogical" that we should avoid the use of any 
design-technique that actually works, just because someone else in the 
profession happens not to like it. We just have to learn to master all 
the various techniques - in depth and in combination, so we can choose 
the best solutions for each task at hand.


As one who has, and still is, using floats for just about everything the 
technique works well for - and then some, I am well aware of the 
arguments against floats for layout that have  been "floating around" 
for decades. Has never bothered me, and some of my first inspirations 
for the more intricate uses of floats for layout was derived from the 
code behind Wium Lie's early articles on the W3C site.



Thanks again.

You're welcome.

regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
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] Basic questions about the box model

[Ezequiel Garzón]

What a treat, Georg! THIS kind of insight is what I was hoping for.
I'll try to accept the standards more as a given and not to think too
much about foundational issues, though sometimes these aspects
intrigue me. For instance, and as an aside, while it's commonly
claimed that floats were not intended for layout, Wium Lie rejects
this notion in https://dev.opera.com/articles/css-twenty-years-hakon/.

Thanks again.

On Sun, Aug 13, 2017 at 2:49 AM, Georg  wrote:
> Den 12.08.2017 20.52, skrev Ezequiel Garzón:
>>
>> Georg, while I haven't gone over the standard in depth, I assumed the
>> rendering I saw in all browsers was compliant, and in that sense
>> logical and expected. I was shooting for something along the lines of
>> why you think it was defined this way.
>
>
> Well, I do not even know if that particular behavior was /intentionally/
> /defined/, or if it came about by accident...
>
> Look at it this way: the first browsers was developed without much of what
> we may call "standards", and there was _no_ CSS to begin with. Standards
> came later, and those first standard bodies simply picked up what there was
> some agreement about between competing browser developers, and mainly wrote
> "status quo" at the time into standards for HTML.
> Even later, when the first - basic - CSS standards was formulated, they kept
> on building those on "status quo" in the browser world, while trying to
> refine these standards in such a way that browser developers would come on
> board and actually develop browsers that (more or less) followed the same
> standards, in order to achieve interoperability.
> Lots of "less logical solutions" got dropped as standards organs - mainly
> the W3C - wrote and cleaned up standards, but there are still plenty "less
> logical" stuff left in today's standards from way back in the browser war
> era. Some of the old stuff is also left in today's standards to assure that
> new browsers that /follow /standards can render quite old pages /somewhat/
> acceptable.
>
> So, I don't know /who /- once upon a time - defined this particular behavior
> - some browser developer or a standard body, or /why/ they did it. Clearly
> noone has found good reasons to change it over the years, so now we are kind
> of stuck with it. As standards have evolved to provide us with ways to code
> around and/or avoid old behaviors that we don't like, it should not cause us
> any real problems for us today.
>
> regards
> Georg
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> 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-discuss [css-d@lists.css-discuss.org]
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] Basic questions about the box model

[Georg]

Den 12.08.2017 20.52, skrev Ezequiel Garzón:

Georg, while I haven't gone over the standard in depth, I assumed the
rendering I saw in all browsers was compliant, and in that sense
logical and expected. I was shooting for something along the lines of
why you think it was defined this way.


Well, I do not even know if that particular behavior was /intentionally/ 
/defined/, or if it came about by accident...


Look at it this way: the first browsers was developed without much of 
what we may call "standards", and there was _no_ CSS to begin with. 
Standards came later, and those first standard bodies simply picked up 
what there was some agreement about between competing browser 
developers, and mainly wrote "status quo" at the time into standards for 
HTML.
Even later, when the first - basic - CSS standards was formulated, they 
kept on building those on "status quo" in the browser world, while 
trying to refine these standards in such a way that browser developers 
would come on board and actually develop browsers that (more or less) 
followed the same standards, in order to achieve interoperability.
Lots of "less logical solutions" got dropped as standards organs - 
mainly the W3C - wrote and cleaned up standards, but there are still 
plenty "less logical" stuff left in today's standards from way back in 
the browser war era. Some of the old stuff is also left in today's 
standards to assure that new browsers that /follow /standards can render 
quite old pages /somewhat/ acceptable.


So, I don't know /who /- once upon a time - defined this particular 
behavior - some browser developer or a standard body, or /why/ they did 
it. Clearly noone has found good reasons to change it over the years, so 
now we are kind of stuck with it. As standards have evolved to provide 
us with ways to code around and/or avoid old behaviors that we don't 
like, it should not cause us any real problems for us today.


regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
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] Basic questions about the box model

[Ezequiel Garzón]

Thank you Georg and Jay for your replies, and my apologies for not
saying anything until now.

Georg, while I haven't gone over the standard in depth, I assumed the
rendering I saw in all browsers was compliant, and in that sense
logical and expected. I was shooting for something along the lines of
why you think it was defined this way.

Maybe one day I'll study the (CSS 2) standard, and maybe I will find
out the rationale behind this decision, though I guess it's a better
bet to read the designers' book, "Cascading Style Sheets: Designing
for the Web", or Wium Lie's PhD thesis, wiumlie.no/2006/phd.

Jay, I don't see what you're telling me. If I add "* { box-sizing:
border-box }" to my CSS I get the same result.

Thank you both once again. Cheers!

On Wed, Aug 9, 2017 at 10:36 PM, Jay Tanna <jta...@rocketmail.com> wrote:
> You can avoid all the problems of box model by using box-sizing.  I suggest 
> read this Mozilla (MDN) article:
>
> <https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>
>
> After using this, I don't have to worry about something not fitting in a DIV. 
>  This is what original Microsoft IE6, IE7 and IE8 used to do (i.e they 
> misinterpreted box model) but people said it is wrong so now we have 
> box-sizing.  Microsoft won here as far as I am concerned.
>
>
>
>
> 
> On Mon, 7/8/17, Ezequiel Garzón <garzon.luc...@gmail.com> wrote:
>
>  Subject: [css-d] Basic questions about the box model
>  To: "css-discuss" <css-d@lists.css-discuss.org>
>  Date: Monday, 7 August, 2017, 0:41
>
>  Greetings to all! I can see I'm not
>  understanding the box model
>  correctly considering this basic
>  example:
>
>  
>  #green {
>  background-color: green;
>  width: 100px;
>  height: 100px;
>  float: left;
>   }
>  #red {
>  background-color: red;
>  width: 100px;
>  height: 100px;
> }
>  
>id="green">Green
>  Red
>
>  I can understand that the "green"
>  floated div is blocking the "red"
>  div, and therefore we don't see any
>  red. Well, I can frankly sort of
>  understand it, because it's floated
>  after all, but what puzzles me the
>  most by far here is the fact that they
>  are the same size and yet we
>  can see the word "Red" below the green
>  square. Wouldn't it make more
>  sense for the word "Red" not to be
>  visible at all, considering it
>  comfortably fits its hidden box? I'm
>  sure the specs dictate this
>  behavior, but I'm looking for some
>  rationale, specially given that
>  overlaps and hidden stuff are quite
>  common in CSS, if not the desired
>  result.
>
>  Thanks in advance.
>
>  Cheers,
>
>  Ezequiel
>  __
>  css-discuss [css-d@lists.css-discuss.org]
>  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-discuss [css-d@lists.css-discuss.org]
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] Basic questions about the box model

[Jay Tanna]

You can avoid all the problems of box model by using box-sizing.  I suggest 
read this Mozilla (MDN) article:

<https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>

After using this, I don't have to worry about something not fitting in a DIV.  
This is what original Microsoft IE6, IE7 and IE8 used to do (i.e they 
misinterpreted box model) but people said it is wrong so now we have 
box-sizing.  Microsoft won here as far as I am concerned.





On Mon, 7/8/17, Ezequiel Garzón <garzon.luc...@gmail.com> wrote:

 Subject: [css-d] Basic questions about the box model
 To: "css-discuss" <css-d@lists.css-discuss.org>
 Date: Monday, 7 August, 2017, 0:41
 
 Greetings to all! I can see I'm not
 understanding the box model
 correctly considering this basic
 example:
 
 
 #green {
 background-color: green;
 width: 100px;
 height: 100px;
 float: left;       
  }
 #red {
 background-color: red;
 width: 100px;
 height: 100px;     
    }
 
 Green
 Red
 
 I can understand that the "green"
 floated div is blocking the "red"
 div, and therefore we don't see any
 red. Well, I can frankly sort of
 understand it, because it's floated
 after all, but what puzzles me the
 most by far here is the fact that they
 are the same size and yet we
 can see the word "Red" below the green
 square. Wouldn't it make more
 sense for the word "Red" not to be
 visible at all, considering it
 comfortably fits its hidden box? I'm
 sure the specs dictate this
 behavior, but I'm looking for some
 rationale, specially given that
 overlaps and hidden stuff are quite
 common in CSS, if not the desired
 result.
 
 Thanks in advance.
 
 Cheers,
 
 Ezequiel
 __
 css-discuss [css-d@lists.css-discuss.org]
 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-discuss [css-d@lists.css-discuss.org]
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] Basic questions about the box model

[Georg]

Den 07.08.2017 01.41, skrev Ezequiel Garzón:

Wouldn't it make more sense for the word "Red" not to be visible at all, 
considering it
comfortably fits its hidden box? I'm sure the specs dictate this
behavior, but I'm looking for some rationale, specially given that
overlaps and hidden stuff are quite common in CSS, if not the desired
result.


Content - like the word "Red" - is initially defined to flow outside 
preceding floats, even if it means flowing outside its own container.
Backgrounds are defined to not do that, unless block-formatting is 
declared on the container the background is declared on, in which case 
the container itself will flow outside preceding floats.
So with identical dimensions on the two containers, and no 
block-formatting, or clear, declared on the last container, the result 
you get is logical and as expected.


See: https://www.w3.org/TR/CSS2/visuren.html#block-formatting

regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
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] Basic questions about the box model

[Ezequiel Garzón]

Greetings to all! I can see I'm not understanding the box model
correctly considering this basic example:


#green {
background-color: green;
width: 100px;
height: 100px;
float: left; }
#red {
background-color: red;
width: 100px;
height: 100px; }

Green
Red

I can understand that the "green" floated div is blocking the "red"
div, and therefore we don't see any red. Well, I can frankly sort of
understand it, because it's floated after all, but what puzzles me the
most by far here is the fact that they are the same size and yet we
can see the word "Red" below the green square. Wouldn't it make more
sense for the word "Red" not to be visible at all, considering it
comfortably fits its hidden box? I'm sure the specs dictate this
behavior, but I'm looking for some rationale, specially given that
overlaps and hidden stuff are quite common in CSS, if not the desired
result.

Thanks in advance.

Cheers,

Ezequiel
__
css-discuss [css-d@lists.css-discuss.org]
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/