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.
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] Browser hacks
Has JS hacks as well, but it's a nice reference of all the hacks that are out there: http://browserhacks.com/ -- Chris Rockwell __ 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] child width exceeding parents' ?!
On Sun, Mar 9, 2014 at 7:59 PM, Georg ge...@gunlaug.com wrote: Den 10.03.2014 00:32, skrev Philippe Wittenbergh: The box model John. Adding the padding makes the box wider. Same thing with the border. The 1px border on that image makes it 2px wider and taller than 100%. If you really need to have that 100% width and the padding on that element, either adjust the width down so the padding and border don't make it larger than 100%, or use box-sizing: border-box; so that the width stays what you want it to regardless of padding. Be sure to check browser support and add any vendor prefixes needed! -- tim.arn...@gmail.com __ 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] child width exceeding parents' ?!
Looks like the H4 header is styled, not the container, which is getting a width of 998px. 980px width + 16px from padding + 2px from border? Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of John Sent: Sunday, March 09, 2014 2:46 PM To: CSS-Discuss Subject: [css-d] child width exceeding parents' ?! at this page the bar that says new clothes at doubletake is set to max-width:980px and width: 100%, yet it exceeds the width of it's parent which is 980 how can this be? Thanks for clues! John http://coffeeonmars.com/W200/test/DTake_Index.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-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] child width exceeding parents' ?!
Just to be the contrarian that my family and friends often say I am...Let me add
this to the thread:
It's been a long while since I've even thought about the convoluted math that
needs to be done when using the counter-intuitive W3C box model. These days I
just add this to the top of all my stylesheets and off I go -
* { -moz-box-sizing: border-box;
box-sizing: border-box; }
A few years ago I read some place that the W3C box model came down to a decision
by a single member. I don't know if that's true or not but I'd like to get some
history on the topic.
Eric
On March 9, 2014 at 7:59 PM Georg ge...@gunlaug.com wrote:
Den 10.03.2014 00:32, skrev Philippe Wittenbergh:
The box model John. Adding the padding makes the box wider.
Same thing with the border. The 1px border on that image makes it 2px
wider and taller than 100%.
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] 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/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
On Mon, Mar 10, 2014 at 4:54 PM, Ezequiel Garzón garzon.luc...@gmail.com wrote: 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. Maybe this? Although you mention FF... https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust I use -webkit-text-size-adjust: 100%; HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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?
mar 10 2014 21:54 Ezequiel Garzón garzon.luc...@gmail.com: I again feel font size in particular is not supposed to be affected by this meta tag Feel? Incongruent with something (what?) would seem more appropriate. Case in point? __ 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/
