Re: [css-d] Basic questions about the box model
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 <ge...@gunlaug.com> 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
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/
[css-d] Basic questions about the box model
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/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
You don't explain what you mean with same size -- in a valid HTML5
document I wouldn't get that issue you claim -- nor do you post online code
as HTML/CSS. It's pointless to debate what you think happened with a
picture. Make it happen in all of our browsers too -- by posting validated
code that illustrates your problem -- or talk about a specific known issue.
I did post (almost) valid code in my first message, but here it goes again.
Seeking validation I added a forgotten pair of forgotten TR tags, as well
as !doctype, charset information and a title:
!doctype html
meta charset=utf-8
titleInconsistent font size?/title
style
table { border-spacing: 0 }
td,p { font-size: medium }
/style
pLorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
cumque, pariatur, deserunt id impedit delectus at porro eum quaerat
officia atque eligendi tempora corporis necessitatibus quos minima
eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde
consectetur!/p
tabletrtdLorem ipsum dolor sit./td/tr/table
I also posted a picture, http://i.imgur.com/WtmgiXQ.png, that shows what
happens using three main browsers (Chrome, Firefox and Opera) in the
leading mobile OS (Android)... I would test it with an iPhone if I had one,
but I think this is far from a niche question. I can't make it happen in
all browsers since it doesn't affect desktop browsers, the Android 2.3
stock browser, etc. For convenience, here is a URL with such code:
http://81.4.104.136/fonts.html . I don't know what else to do in order to
present my question.
Thanks for replying.
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/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
I don't see your issue in Android nor in IOS. Anyone else? Thanks again for your reply. Now I'm really beginning to second-guess myself! And here I was so convinced it had something to do with the font boosting and inflation John Mellor refers to here [1]. I will ask tomorrow a couple of friends to let me use their cell phones... I'm beginning to fear this is a bug specific to my Galaxy Note II... Thanks once more, and goodnight from Spain. [1] https://lists.webkit.org/pipermail/webkit-dev/2012-May/020819.html __ 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] Do modern mobile browsers deliberately ignore font size?
http://www.quirksmode.org/mobile/metaviewport/
This has a good explanation of what it's for.
Thanks, Tom. Still, the word font cannot be found in that article,
and I again feel font size in particular is not supposed to be
affected by this meta tag. Besides, I'm still puzzled by the way
modern browsers consistently font-size declarations in the absence of
the meta viewport tag.
On Mon, Mar 10, 2014 at 11:36 AM, Tom Livingston tom...@gmail.com wrote:
http://www.quirksmode.org/mobile/metaviewport/
This has a good explanation of what it's for.
Sent from my iPhone
On Mar 9, 2014, at 4:52 PM, Ezequiel Garzón garzon.luc...@gmail.com wrote:
Greetings to all,
I can't figure out why a webpage as simple as [2] renders text with
uniform size in desktop browsers (which I would expect), but like this
[1] in Android browsers such as Chrome, Firefox and (the main version
of) Opera. I mean... both P and TD are given font-size: medium! Isn't
this a violation of CSS standards? I have (rather empirically) found
that adding the line meta name=viewport
content=width=device-width fixes the issue, though I thought this
meta tag was meant to make the value of width more predictable under
media queries.
Is this font boosting/inflation? If so, how is this not violating CSS
standards?
Thanks in advance for your advice.
Cheers,
Ezequiel
[1] http://i.imgur.com/WtmgiXQ.png
[2] Please consider the following:
style
table { border-spacing: 0 }
td,p { font-size: medium }
/style
pLorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
cumque, pariatur, deserunt id impedit delectus at porro eum quaerat
officia atque eligendi tempora corporis necessitatibus quos minima
eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde
consectetur!/p
tabletdLorem ipsum dolor sit./td/table
(If the paragraph is a bit shorter the font size is the same in P as in TD.)
__
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/
[css-d] Do modern mobile browsers deliberately ignore font size?
Greetings to all,
I can't figure out why a webpage as simple as [2] renders text with
uniform size in desktop browsers (which I would expect), but like this
[1] in Android browsers such as Chrome, Firefox and (the main version
of) Opera. I mean... both P and TD are given font-size: medium! Isn't
this a violation of CSS standards? I have (rather empirically) found
that adding the line meta name=viewport
content=width=device-width fixes the issue, though I thought this
meta tag was meant to make the value of width more predictable under
media queries.
Is this font boosting/inflation? If so, how is this not violating CSS standards?
Thanks in advance for your advice.
Cheers,
Ezequiel
[1] http://i.imgur.com/WtmgiXQ.png
[2] Please consider the following:
style
table { border-spacing: 0 }
td,p { font-size: medium }
/style
pLorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
cumque, pariatur, deserunt id impedit delectus at porro eum quaerat
officia atque eligendi tempora corporis necessitatibus quos minima
eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde
consectetur!/p
tabletdLorem ipsum dolor sit./td/table
(If the paragraph is a bit shorter the font size is the same in P as in TD.)
__
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] Will the unsemantic HTML elements B and I be soon phased out?
This is such a joy! Thank you all for such a lively exchange. First off, my memory betrayed me: it turns out the S and U elements *were* deprecated in HTML 4.01 [1], but they managed to make a comeback in HTML 5. This puzzles me even further, if that is even possible. I get lost with the demarcation put forth between emphasis and importance when it applies to EM vs. STRONG (subjective vs. objective?), stacked on top of this notion of changing mood while not conveying emphasis for I, while utilitarianly drawing attention without granting importance for B... I guess semantics is a rather intractable goal after all. But it gives mild comfort to find out that even the regulating bodies flip flop (e.g., STRONG used to be a 2nd-level EM, but now EMs ought to be nested, etc.). I realize amid all this flux most browsers are understandably likely to support all these one-letter elements for many years. Thanks again for all the replies. Cheers, Ezequiel [1] http://www.w3.org/TR/html401/index/elements.html __ 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] Will the unsemantic HTML elements B and I be soon phased out?
Greetings to all, I know this is highly subjective question, but am curious as to what people think about this issue. Allow me to put forth a few questions, and you can pick all of any of them. When the WHATWG describes the I element as a span of text in an alternate voice or mood, and the B element as a span of text to which attention is being drawn for utilitarian purposes, I'm puzzled... wouldn't this be the role of a special class for the SPAN element? I'm actually glad I and B are survivors, but seeing that U and S have been deprecated, it doesn't seem very consistent to keep these two one-letter elements around. And, going back to my main question, do you believe these two elements will be deprecated soon? Thank you in advance for any thoughts you may have on the matter. Best regards, 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/
Re: [css-d] Universal selector vs. body selector
Thank you, Philippe! It's interesting that the anchor's color doesn't seem to be specified in the W3C document. __ css-discuss [cs...@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] Universal selector vs. body selector
Greetings. As you will be able to tell, I'm a CSS rookie. My doubt is,
if the body contains all the other containers, why does body { ... }
behave different from * { ... }? Aren't properties supposed to
cascade? Inheritable properties at least, no? But then I find that
body { color:black; }
and
* { color:black; }
yield different results. For example, the links do not appear in black
in the first case, even though the a selector lives inside the body
selector and the color property is inheritable.
Shed some light, please.
Best regards,
Utterly confused
__
css-discuss [cs...@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] Universal selector vs. body selector
Thank you all for your replies! They have taught me a lot in very little
time.
Is it possible to open the default stylesheet? Are settings such as 'a {
color: blue; text-decoration: underline; }' de facto or formal standards?
Cheers,
Ezequiel
__
css-discuss [cs...@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/
