Re: [css-d] Section Lacks Heading ?
On Wed, Jul 30, 2014 at 9:44 PM, Crest Christopher crestchristop...@gmail.com wrote: I changed a section to a div and the validator continues to point to the line as an error. Link? -- 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/
[css-d] Placement of MQ question
List,
I'm working on a project that has large photo headers on each section
of a long scrolling page. Each header has - as you would expect -
related copy under it in a main section.
Client is requesting that more copy appear on screen with it's related
header, so I am thinking I'll institute an MQ related to viewport
height like:
@media screen and (max-height: 1024px){
header{height: $shorter-height;}
}
My question is what is the proper place to put this? After all my
other MQs? In with my styles near where the taller height is
specified? Does it matter?
--
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] Placement of MQ question
On Mon, Jul 28, 2014 at 1:42 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Hi Tom,
Without knowing how you have your styles structured, I can really only guess
at how I would do it.
I use partials like crazy so the way I would do it may not make sense in
your project, but I would put that in _header.scss (or maybe it would call
it _main--header.scss in this case).
If you have clear separation between your media query styles and
mobile-first styles (assuming that's how you've written it), I would just
drop that as another media query at the end of my media query code.
Does it matter?
In my opinion, yes. If requirements change in the future and there is no
adherence to structure, you'll end up with some messiness down the road (I
feel like I'm preaching to the choir on this point though :D, maybe I've
misunderstood the question).
Hope that helps.
Chris Rockwell
I use sass, and my main sheet is imports:
@import base;
@media only screen and (min-width: 30em) {
@import 480;
}
@media only screen and (min-width: 37em) {
@import 600;
}
@media only screen and (min-width: 48em) {
@import 768;
}
@media only screen and (min-width: 60em) {
@import 960;
}
I've done both where I've added at the end of this, and put tweaky MQs
in individual sheets. Just wondering if one place is better than the
other.
--
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] Placement of MQ question
On Mon, Jul 28, 2014 at 2:15 PM, Tom Livingston tom...@gmail.com wrote:
On Mon, Jul 28, 2014 at 1:42 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
Hi Tom,
Without knowing how you have your styles structured, I can really only guess
at how I would do it.
I use partials like crazy so the way I would do it may not make sense in
your project, but I would put that in _header.scss (or maybe it would call
it _main--header.scss in this case).
If you have clear separation between your media query styles and
mobile-first styles (assuming that's how you've written it), I would just
drop that as another media query at the end of my media query code.
Does it matter?
In my opinion, yes. If requirements change in the future and there is no
adherence to structure, you'll end up with some messiness down the road (I
feel like I'm preaching to the choir on this point though :D, maybe I've
misunderstood the question).
Hope that helps.
Chris Rockwell
I use sass, and my main sheet is imports:
@import base;
@media only screen and (min-width: 30em) {
@import 480;
}
@media only screen and (min-width: 37em) {
@import 600;
}
@media only screen and (min-width: 48em) {
@import 768;
}
@media only screen and (min-width: 60em) {
@import 960;
}
I've done both where I've added at the end of this, and put tweaky MQs
in individual sheets. Just wondering if one place is better than the
other.
I'm leaning towards adding it to the end of this. Seems most logical,
but then again... I'm not always the sharpest knife in the drawer.
--
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] div with spec'd width going to 100%?
On Sat, Jul 26, 2014 at 4:19 PM, John j...@coffeeonmars.com wrote: I am trying a better way to style and position elements at: http://www.coffeeonmars.com/170_su/template/home.html I’m the one who used an h1 and was seeing ems render larger because of that. so I tried changing that h1 to just a regular div but instead of respecting the specified width of width:332px; that div is as wide as its parent! “flummoxed” describes where I’m at..can someone help me to see what is going wrong here? the spot I’m talking about is styled by: #main_header Style.css, line 271 over-rides the 332px with 940px. -- 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] div with spec'd width going to 100%?
You also have 2 containers with the same ID of #main_header. The header and a child div. That's a no no. On Sat, Jul 26, 2014 at 4:23 PM, Tom Livingston tom...@gmail.com wrote: On Sat, Jul 26, 2014 at 4:19 PM, John j...@coffeeonmars.com wrote: I am trying a better way to style and position elements at: http://www.coffeeonmars.com/170_su/template/home.html I’m the one who used an h1 and was seeing ems render larger because of that. so I tried changing that h1 to just a regular div but instead of respecting the specified width of width:332px; that div is as wide as its parent! “flummoxed” describes where I’m at..can someone help me to see what is going wrong here? the spot I’m talking about is styled by: #main_header Style.css, line 271 over-rides the 332px with 940px. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- 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] why are ems rendering large?
On Saturday, July 26, 2014, Karl DeSaulniers k...@designdrumm.com wrote: Sent from losPhone On Jul 26, 2014, at 8:34 AM, MiB digital.disc...@gmail.com javascript:; wrote: jul 26 2014 01:24 Karl DeSaulniers k...@designdrumm.com javascript:; : I usually go px on the body and % everywhere else. Why does px on body seems like a good idea for users? It's actually a method I learned online, but I believe the premise was, screen readers usually size in px and they set the body font. So setting the body to px and using %, ems or rems elsewhere made it easier to control the fonts on a page. By no means am I saying this is the only way, just the way I do it. Works like a charm so far. :) Best, Karl Screen readers care about font size ? -- 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] why are ems rendering large?
On Saturday, July 26, 2014, Karl DeSaulniers k...@designdrumm.com wrote: Sent from losPhone On Jul 26, 2014, at 6:57 PM, Felix Miata mrma...@earthlink.net javascript:; wrote: On 2014-07-26 18:29 (GMT-0400) Karl DeSaulniers composed: I usually go px on the body and % everywhere else. Why does px on body seems like a good idea for users? It's actually a method I learned online... As is often the case where a page is trying to make it easy for stylists, which in this paradigm translates to hard on users. Screen readers care about font size ? No users do. That's precisely why CSS for the public web should never size text in px. Sizing text in px means the optimal base size determined by each user, as embodied in his browser default size, is totally disregarded, tyrannically usurped if you will, which is rude. -- Hmm looks like you're right. I was worried about screen readers zooming not users setting the browser font. So use ems as the body font size and % elsewhere. I just tried switching the base font in Firefox and it did what you said and didn't let me. So I'd agree now that px as a base font may not be ideal. I tried em as the body font-size and % else where and it still worked like I wanted and let me set the optimal font in Firefox. So I will be switching to ems as the body font-size. Thanks all. I set body to 100%. Size elements - minimally - with rems. -- 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] why are ems rendering large?
Lack of rem support is easily taken care of with a fallback declaration using px: Font-size:16px; Font-size:1rem; This allows MOST browsers to use a relative font unit - honoring a users preference for font size - without the compounding issues (and any other) of the em. -- 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] why are ems rendering large?
On Fri, Jul 25, 2014 at 2:27 PM, Chris F.A. Johnson ch...@cfajohnson.com wrote: On Fri, 25 Jul 2014, Tom Livingston wrote: Lack of rem support is easily taken care of with a fallback declaration using px: Font-size:16px; Font-size:1rem; Better still, using em or %: font-size: 100%; font-size: 1rem; This allows MOST browsers to use a relative font unit - honoring a users preference for font size - without the compounding issues (and any other) of the em. Why use rem at all if you are going to fall back to em? You are probably going to have to do a lot of extra coding to overcome any issues that arise should the fallback ems come into play. If you code and structure your pages without worrying about compounding issues etc, and then the ems kick in on a browser that doesn't support rems, you're most likely going to have more issues to overcome than if you fall back to pixels. -- 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] why are ems rendering large?
On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher crestchristop...@gmail.com wrote: Now you confused me ? ems are relative to font size. Given a browser default of 16px, 1em = 16px. If you have something set at font-size: 120%;, that's 120% bigger than 16px (1em) so, like Chris said, it would be 19px (rounded down) or 1.188em; -- 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] why are ems rendering large?
On Thu, Jul 24, 2014 at 11:22 AM, John j...@coffeeonmars.com wrote: On Jul 24, 2014, at 8:18 AM, Tom Livingston tom...@gmail.com wrote: ems are relative to font size. Given a browser default of 16px, 1em = 16px. If you have something set at font-size: 120%;, that's 120% bigger than 16px (1em) so, like Chris said, it would be 19px (rounded down) or 1.188em; This is my understanding, too…so given that my body font-size is set at 100%, should not padding-left:1.25em; be 1.25em in size? What I’m seeing is much larger. http://www.coffeeonmars.com/170_su/template/home.html Thank you! Where, specifically on the page, are we talking about? -- 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] why are ems rendering large?
On Thu, Jul 24, 2014 at 11:38 AM, John j...@coffeeonmars.com wrote:
On Jul 24, 2014, at 8:35 AM, Tom Livingston tom...@gmail.com wrote:
Where, specifically on the page, are we talking about?
This spot:
http://www.coffeeonmars.com/170_su/template/home.html
this declaration:
#header-logo {
height: auto;
margin: 2em 0 0 16px;
width: 300px;
}
Notice that margin left value is 16px (sorry, I said padding) If you insert
1.25em you get a much larger space than if you insert 20px, which 1.25 em
*should* be (1 em = 16; 1.25 x 16 = 20)
so, 20px is a hard value; ems are relative, but I don’t see what’s making ems
in that spot render as more than 100%
Thank you,
That's an h1, with a browser default computed font-size of 32px.
--
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] why are ems rendering large?
On Thu, Jul 24, 2014 at 11:45 AM, John j...@coffeeonmars.com wrote: On Jul 24, 2014, at 8:40 AM, Chris Rockwell ch...@chrisrockwell.com wrote: I don't think you're recognizing that em's inherit from their parent. - #header-logo is a child of h1 - h1 has a font-size of 2em (set by user agent stylesheet) - #header-logo therefore has a base font-size of 2em, or 32px (assuming 16px is the base) - Padding #header-logo by 1.25em is equal to (32 * 1.25)px. Make sense? If you want to pad it 20px (1.25em of document base font size), you would need to set padding-left to 0.625em Hopefully I haven't muddied the waters. No, actually you have un-muddied the waters. So I “did this to myself” in a sense, by wrapping that logo in an h1.. So, I either have to keep track of the math, or…is there another, better way I should have built that lock-up? I guess I was going for better SEO by wrapping my logo in an h1 which, now that I re-examine, seems like pretty weak sauce… Perhaps I’d best wrap the logo in a regular div with an id of ‘header-logo’ ? John __ Not really. You are currently making that the highest level head element (h1) of the page. Is that what you want? If you get into some of the other HTML sectioning elements, you can leave it as is (and keep track of the math - or eyeball it like David said) and add other h1's for other sections. Main content in a section, with it's own header and h1, or an article element with a header and h1, etc. But this is getting into the semantics of HTML which is off-topic for this list. STYLING those elements would be back on topic. ;-) -- 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] why are ems rendering large?
On Thu, Jul 24, 2014 at 12:00 PM, John j...@coffeeonmars.com wrote: On Jul 24, 2014, at 8:53 AM, Tom Livingston tom...@gmail.com wrote: Not really. You are currently making that the highest level head element (h1) of the page. Is that what you want? Not if the h1-wrapped element is a graphic whose only text opportunity is the alt tag. if that logo were live type, then yes. I would think, as far as the page outline goes, your h1 is the highest level head element of your page regardless of what's in it. No? -- 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] why are ems rendering large?
On Thu, Jul 24, 2014 at 12:52 PM, John j...@coffeeonmars.com wrote:
On Jul 24, 2014, at 9:49 AM, Tom Livingston tom...@gmail.com wrote:
You could, since that h1 is an image, spec it to be font-size: 1em; but I
tend to agree text trumps alt text.
OK..so for the css declaration, it could be:
#logo h1{
font-size:1em;
color:black;
blah;
blah;
blah;
}
which could come in very handy in future, but I suspect I also need to get
comfy with the REM idea as well..
J
I used rem on this site: htp://www.mlmic.com with a px font-size fallback, like:
p{font-size:14px; font-size: .9rem;}
--
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] why are ems rendering large?
I don't know about golden, but it equal to the browser default which, if unchanged, is usually 16px. On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com wrote: Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or rounded down as mentioned 19px, correct ? Tom Livingston wrote: On Thu, Jul 24, 2014 at 9:40 AM, Crest Christophercrestchristop...@gmail.com javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com'); wrote: Now you confused me ? ems are relative to font size. Given a browser default of 16px, 1em = 16px. If you have something set at font-size: 120%;, that's 120% bigger than 16px (1em) so, like Chris said, it would be 19px (rounded down) or 1.188em; -- 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] why are ems rendering large?
I believe so. On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com wrote: A font-size of 120% is 19px, is my math correct ? Tom Livingston wrote: I don't know about golden, but it equal to the browser default which, if unchanged, is usually 16px. On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com'); wrote: Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or rounded down as mentioned 19px, correct ? Tom Livingston wrote: On Thu, Jul 24, 2014 at 9:40 AM, Crest Christophercrestchristop...@gmail.com wrote: Now you confused me ? ems are relative to font size. Given a browser default of 16px, 1em = 16px. If you have something set at font-size: 120%;, that's 120% bigger than 16px (1em) so, like Chris said, it would be 19px (rounded down) or 1.188em; -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- 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] make image bottom-align?
On Wednesday, July 23, 2014, John j...@coffeeonmars.com wrote: Is there a way to make an image inside a parent div bottom-align? Or top-align for that matter? my method has been to give margin-top values to the image until it lands where I want but it’s kind of silly if there’s a declaration that will have it go to the bottom and be done with it! I have tried vertical-align:bottom; but this either isn’t working on my page or I mis-understand the implementation. tried on both image, then on its parent; neither has an effect. Not knowing your exact situation, could you try display:table; and vertical-align:bottom; on the parent ? -- 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] P tag can't be child of label ?
On Sun, Jul 13, 2014 at 7:05 PM, Robert A. Rosenberg webdesig...@rarpsl.com wrote: At 14:08 -0400 on 07/09/2014, Tom Livingston wrote about Re: [css-d] P tag can't be child of label ?: If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). The use of the for attribute allows the label to not need to wrap the input. It just references the id of the tag that wraps the input (if I remember correctly). Correct. I was just pointing out that IF you wrap the input, the 'for' attribute isn't required. Something I didn't know. -- 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] P tag can't be child of label ?
You're fine On Monday, July 14, 2014, Crest Christopher crestchristop...@gmail.com wrote: I'm confused, I was using the for attribute; label for=email id=mailspan class=mailemail/span/label ??? Tom Livingston wrote: On Sun, Jul 13, 2014 at 7:05 PM, Robert A. Rosenbergwebdesig...@rarpsl.com javascript:_e(%7B%7D,'cvml','webdesig...@rarpsl.com'); wrote: At 14:08 -0400 on 07/09/2014, Tom Livingston wrote about Re: [css-d] P tag can't be child of label ?: If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). The use of the for attribute allows the label to not need to wrap the input. It just references the id of the tag that wraps the input (if I remember correctly). Correct. I was just pointing out that IF you wrap the input, the 'for' attribute isn't required. Something I didn't know. -- 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] P tag can't be child of label ?
On Wed, Jul 9, 2014 at 1:58 PM, Crest Christopher crestchristop...@gmail.com wrote: I've had to restyle my form and it has caused the validator to inform me I'm not allowed to use p as a child element of a label tag ? From what I can see (searching, etc) the only thing you are supposed to have inside a label is the associated input. You don't have to, but you can. If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). There is some language in the spec stating the above, but not being of the right mind to dig into the spec, I didn't see anything obvious stating NOTHING else can be within the label element. So I wonder if span might be allowed? I'd have to whip up a test and run it through the validator and see if it complains. -- 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] P tag can't be child of label ?
On Wed, Jul 9, 2014 at 2:08 PM, Tom Livingston tom...@gmail.com wrote: On Wed, Jul 9, 2014 at 1:58 PM, Crest Christopher crestchristop...@gmail.com wrote: I've had to restyle my form and it has caused the validator to inform me I'm not allowed to use p as a child element of a label tag ? From what I can see (searching, etc) the only thing you are supposed to have inside a label is the associated input. You don't have to, but you can. If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). There is some language in the spec stating the above, but not being of the right mind to dig into the spec, I didn't see anything obvious stating NOTHING else can be within the label element. So I wonder if span might be allowed? I'd have to whip up a test and run it through the validator and see if it complains. A quick test resulted in no complaint about a span inside label. However, maybe someone more familiar with the spec can say whether that is actually OK or not according to the spec. Remember, the validator isn't law, it's a guide -- 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] Table with fixed headers
Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... -- 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] Equal height script not working on some pages
On Mon, Jun 30, 2014 at 12:54 AM, J.C. Berry jcharlesbe...@gmail.com wrote: Hello all, We are having an issue of content running off some pages past the footer-even though we are using an equal height script. Here is one of the pages: http://www.xifin.com/news/coverage Refreshing the page sometimes corrects the layout, but would be great to fix this. Thanks all again! Looks like the script is the issue. I disabled JS and the footer is consistently placed properly. Is it in a document.ready? Placed at the bottom rather than the head? Just thinking out loud here... -- 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] Rendering issues
Solved. Thanks all. We found an errant z-index which was putting the content behind the blue background wrapper. :-P On Mon, Jun 23, 2014 at 10:09 AM, Hahnel, Fred (DET-MRM) fred.hah...@mrm-mccann.com wrote: That screen flashes then the normal page renders on my Chrome 35.0.1916.153 on a laptop -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Friday, June 20, 2014 2:43 PM To: CSS Discussion Group Subject: [css-d] Rendering issues List, We've had a report of a rendering issue on this site: http://www.mlmic.com The user saw a blank, blue screen ( a brand color) in current Chrome and Opera (Mac, I believe). Also, Google Webmaster Tools Fetch As Google also renders it blank blue. We have not been able to recreate the issue except for in Google Webmaster Tools and that doesn't give much help in troubleshooting it. Do any of you see this issue, and if so, can you help track it down? Thanks in advance... -- 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/ -- 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] Rendering issues
On Mon, Jun 23, 2014 at 3:08 PM, Norman Fournier nor...@normanfournier.com wrote: ...in that case it is interesting to see which browsers rendered that z-index property correctly... Agreed. I don't understand why any browser showed any content at all. The selector needed JS to be active, but I tried my browser with and without JS and I still saw the content... Odd one. -- 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] Rendering issues
On Monday, June 23, 2014, Rick Gordon li...@rickgordon.com wrote:
I didn't search too deeply, but I suspect it's because the html element
is classed as js, and there are a significant number of styles in the CSS
that are like this:
.js .inner{background:#1d335c;left:0;width:175%}
This is a commonly used approach, in which html is initially classed as
.no-js, and then a script is run to change the class to .js. If it fails,
you can assume that JavaScript is not enabled, and style with the
possibility of either .js or .no-js as an ancestor.
Rick Gordon
On 6/23/14 12:10 PM, Tom Livingston wrote:
Understood. But turning off js did not allow me to replicate the issue.
Regardless, you would think if a negative z index put the content behind a
solid blue div with js enabled - as is the case with the rule in the CSS -
why did anyone see any content at any time!?!?
Like I said, odd one.
--
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] Rendering issues
On Monday, June 23, 2014, Philippe Wittenbergh e...@l-c-n.com wrote: Le 24 juin 2014 à 04:05, Tom Livingston tom...@gmail.com javascript:; a écrit : We found an errant z-index which was putting the content behind the blue background wrapper. :-P Le 24 juin 2014 à 04:08, Norman Fournier nor...@normanfournier.com javascript:; a écrit : ...in that case it is interesting to see which browsers rendered that z-index property correctly... Most modern browsers do. However there are more properties that affect the stacking / layering of content, independently of z-index. Opacity comes to mind, as do some of the CSS-transform properties (and in the latter case, this *may* vary between browsers…). Philippe -- Philippe Wittenbergh http://l-c-n.com There are transform going on so perhaps that's what was causing the odd behavior (odd as far as I'm concerned)... -- 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] Rendering issues
On Monday, June 23, 2014, Jon Reece jon.re...@gmail.com wrote: On Mon, Jun 23, 2014 at 8:32 PM, Philippe Wittenbergh e...@l-c-n.com javascript:; wrote: Le 24 juin 2014 à 04:05, Tom Livingston tom...@gmail.com javascript:; a écrit : We found an errant z-index which was putting the content behind the blue background wrapper. :-P Le 24 juin 2014 à 04:08, Norman Fournier nor...@normanfournier.com javascript:; a écrit : ...in that case it is interesting to see which browsers rendered that z-index property correctly... Most modern browsers do. However there are more properties that affect the stacking / layering of content, independently of z-index. Opacity comes to mind, as do some of the CSS-transform properties (and in the latter case, this *may* vary between browsers…). For those interested here's a good explanation of z-index stacking order and context, prefaced with a challenge to solve a problem rooted in what Philippe mentioned about other properties effects on positioning. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ Learn something new everyday! -- 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/
[css-d] Rendering issues
List, We've had a report of a rendering issue on this site: http://www.mlmic.com The user saw a blank, blue screen ( a brand color) in current Chrome and Opera (Mac, I believe). Also, Google Webmaster Tools Fetch As Google also renders it blank blue. We have not been able to recreate the issue except for in Google Webmaster Tools and that doesn't give much help in troubleshooting it. Do any of you see this issue, and if so, can you help track it down? Thanks in advance... -- 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] Rendering issues
On Friday, June 20, 2014, Norman Fournier nor...@normanfournier.com wrote: Camino on my mac shows the blue only w/o any text or graphics once. The source shows all the html in place but none renders. On a second visit, everything looked fine. On 2014-06-20, at 12:42 PM, Tom Livingston wrote: Ok, thank all. We think we found it. I'll write back if we're still stumped. -- 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] Right col jumps to next line
On Tue, Jun 17, 2014 at 7:26 PM, J.C. Berry jcharlesbe...@gmail.com wrote:
Hello, I have a question about a simple layout here. The width is 660px as
you can see, with the two columns 405px and 240px respectively. I've zeroed
out the margins and padding as needed, but the right col still drops down.
Any ideas?
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleYour Email Title/title
style type=text/css
body{background-color:#d0d0d0;font:14px
tahoma;padding:0;margin:0;}/*Which font to use be default?*/
#emailwrapper{width:660px;margin:0 auto;padding:0;}
#email_hdr{height:65px;vertical-align:middle;padding:0;margin:0;}
#email_hdr div{vertical-align:middle;padding:0;margin:0;}
#email_hdr div img{float:right;}
#email_banner_graphic{background-color:#fff;padding:0;margin:0;}
#email_left_col_top,#email_left_col_bottom{margin:15px 0 0
0;width:405px;float:left;background-color:#fff;padding:0;}
#email_right_col{padding:0;width:240px;float:left;background-color:#fff;vertical-align:top;margin:15px
0 0 15px;}
#email_footer{font:11px
tahoma;color:#000;text-align:center;padding:0;margin:0;}
#email_hdr div,#email_banner_graphic div,#email_left_col_top
div,#email_left_col_bottom div,#email_right_col div,#email_footer
div{padding:15px;margin:0;}
/style
/head
body
table id=emailwrapper
tr
td colspan=2 id=email_hdr
divimg src=http://mysite.com/_logo.png; id=logo
width=152 height=35 //div
/td
/tr
tr
td colspan=2 id=email_banner_graphic
div class=mktEditable
/div
/td
/tr
tr
td id=email_left_col_topdiv class=mktEditable/div/td
td id=email_right_col rowspan=2div
class=mktEditable/div/td
/tr
tr
td id=email_left_col_bottomdiv
class=mktEditable/div/td
/tr
tr
td colspan=2 id=email_footer
divAddress for company/div
/td
/tr
/table
/div
/body
/html
--
Is this an actual, for-real email? Is this a template from Marketo or
are you creating it?
You are doing far too much with embedded CSS. You should go all
old-school on the table and add all the attributes to the table as
well as td's. I recommend inline styles for text styling and maybe a
little layout tweaking too, but really, html email is not a fun thing.
It is very crude with terrible and variable support for anything
beyond basic table-based construction. Heck, I still use a spacer gif
if I can't fix something any other way.
I do A LOT of html email and still struggle with stuff. Floats are not
well supported at all - if at all - as well as declared margins on
most things. We do a little responsive email work, but that is very
crude as well.
I recommend a service like Litmus or Email On Acid for checking your
email layouts. They also provide tips on correcting issues as well as
optimizations, etc.
litmus.com
emailonacid.com
If you know all this, well...maybe someone else can benefit...
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] Right col jumps to next line
style type=text/css
body{background-color:#d0d0d0;font:14px
tahoma;padding:0;margin:0;}/*Which font to use be default?*/
#emailwrapper{width:660px;margin:0 auto;padding:0;}
#email_hdr{height:65px;vertical-align:middle;padding:0;margin:0;}
#email_hdr div{vertical-align:middle;padding:0;margin:0;}
#email_hdr div img{float:right;}
#email_banner_graphic{background-color:#fff;padding:0;margin:0;}
#email_left_col_top,#email_left_col_bottom{margin:15px 0 0
0;width:405px;float:left;background-color:#fff;padding:0;}
#email_right_col{padding:0;width:240px;float:left;background-color:#fff;vertical-align:top;margin:15px
0 0 15px;}
As for the issue, Chris is correct. I also noticed, in Chrome, that
reducing the margin-left on #email_right_col to 9 brought them next to
eachother. But... like I explained earlier... I don't think that's a
great idea.
--
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] Height 100% issue
Does .dots contain something that contribute to the height of .leftcol?
This is a possible solution:
.leftcol { position: relative; }
.dots { position: absolute; top: 0; bottom: 0; }
This looks like it's gonna work well. Thanks Philippe.
--
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/
[css-d] Height 100% issue
List, Can't post a link right now so bear with me... Given: div class=leftcol clear div class=cta-wrap/div div class=dots vert leftbr/div div class=facebook-widgetpFacebook/p/div /div .cta-wrap and .dots are float left .facebook-widget is float right .leftcol has clearfix applied I have .dots set as height 100% - which should be 100% the height of .leftcol, thing is, I can't define a height on .leftcol (fluid layout and .cta-wrap has a scaling image) so .dots isn't rendering height 100%. Is there a simple way to get .dots to render height 100% - without script? I'm drawing a blank. Any help would be appreciated. Thanks -- 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] Height 100% issue
Sent from my iPhone
On Jun 15, 2014, at 10:29 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
Le 16 juin 2014 à 10:05, Tom Livingston tom...@gmail.com a écrit :
List,
Can't post a link right now so bear with me...
Given:
div class=leftcol clear
div class=cta-wrap/div
div class=dots vert leftbr/div
div class=facebook-widgetpFacebook/p/div
/div
.cta-wrap and .dots are float left
.facebook-widget is float right
.leftcol has clearfix applied
I have .dots set as height 100% - which should be 100% the height of
.leftcol, thing is, I can't define a height on .leftcol (fluid layout
and .cta-wrap has a scaling image) so .dots isn't rendering height
100%.
Is there a simple way to get .dots to render height 100%
Does .dots contain something that contribute to the height of .leftcol?
.dots only contains a repeating background pattern. Design directed.
This is a possible solution:
.leftcol { position: relative; }
.dots { position: absolute; top: 0; bottom: 0; }
Not sure about this. Will give it a try.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
Thank you Philippe
__
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] Fixed position over background-attachment: fixed
Hello list, I'm having an issue where the design I'm working on requires a position:fixed nav bar over a series of divs that contain a fixed background image (background-attachment:fixed;). As you scroll, these divs are to scroll normally under the fixed nav. Also, at a certain point while scrolling, I trigger the fixed navbar to display - using waypoints.js and slideToggle. I can see the navbar very briefly with some deft scrolling maneuvers, so it appears to be showing and hiding, but the issue seems to be a stacking order problem. Does background-attachement:fixed and/or position:fixed mess up the stacking order? I have tried z-index ordering them but it isn't helping. I'm sorry but I cant post a link as of yet. TIA #663399Becca -- 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] Fixed position over background-attachment: fixed
On Fri, Jun 13, 2014 at 1:54 PM, Tom Livingston tom...@gmail.com wrote: Hello list, I'm having an issue where the design I'm working on requires a position:fixed nav bar over a series of divs that contain a fixed background image (background-attachment:fixed;). As you scroll, these divs are to scroll normally under the fixed nav. Also, at a certain point while scrolling, I trigger the fixed navbar to display - using waypoints.js and slideToggle. I can see the navbar very briefly with some deft scrolling maneuvers, so it appears to be showing and hiding, but the issue seems to be a stacking order problem. Does background-attachement:fixed and/or position:fixed mess up the stacking order? I have tried z-index ordering them but it isn't helping. I'm sorry but I cant post a link as of yet. TIA I got it. Not sure what I did to get it, but I got it. Thank you, if you were pondering this. Don't ponder it, if you haven't started. #663399Becca -- 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] Falstaff weds Frutiger.
Sent from my iPhone On Jun 6, 2014, at 4:08 PM, David Laakso laakso.davi...@gmail.com wrote: Constructive comments and suggestions on this site are always appreciated. html http://ccstudi.com css http://ccstudi.com/site/css/sisu.css Best, David Laakso Only comment I have is that I feel the external link icon on the social icons in the footer are unnecessary. Otherwise, very nice. __ 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] Having trouble adding video to web page.
On Wed, Jun 4, 2014 at 3:24 PM, Rod Castello rodcastel...@gmail.com wrote: Hi All, Need some quick, real world advice on adding an mp4 video to a web page. It needs to work in modern versions of major browsers. I can skip the iPhone display but would be nice to have that too. The page is responsive and I would need to be able to control the width for various column or screen widths. Is there a good tutorial on this? Do I need to request different versions...mp3, webm? I'm thinking get it on youtube might be an easy fix. Any thoughts on that? Any advice would be greatly appreciated. Here's a link to the video source: http://delivery.tourdesigncreative.com/clients/BET/BET_PremiumTicketReel_Rev4.mp4 I will be swapping it out with the video on this page: http://www.axs.com/betexperience Thanks, Rod Castello I recommend videos as well. We usually serve WebM, ogg and mp4 using html5 element. http://www.videojs.com -- 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] Having trouble adding video to web page.
On Wed, Jun 4, 2014 at 4:17 PM, Tom Livingston tom...@gmail.com wrote: On Wed, Jun 4, 2014 at 3:24 PM, Rod Castello rodcastel...@gmail.com wrote: Hi All, Need some quick, real world advice on adding an mp4 video to a web page. It needs to work in modern versions of major browsers. I can skip the iPhone display but would be nice to have that too. The page is responsive and I would need to be able to control the width for various column or screen widths. Is there a good tutorial on this? Do I need to request different versions...mp3, webm? I'm thinking get it on youtube might be an easy fix. Any thoughts on that? Any advice would be greatly appreciated. Here's a link to the video source: http://delivery.tourdesigncreative.com/clients/BET/BET_PremiumTicketReel_Rev4.mp4 I will be swapping it out with the video on this page: http://www.axs.com/betexperience Thanks, Rod Castello I recommend videos as well. We usually serve WebM, ogg and mp4 using html5 element. Er, that should have been *videojs*... I recommend videojs as well. http://www.videojs.com -- 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] Android Tablet Chrome Portrait Screen Odd Behavior
Sent from my iPhone On May 26, 2014, at 11:59 AM, Shari Lynn Smith webweave...@gmail.com wrote: I have a site I've designed mobile 1st and everything seemed to be working fine, however on my Android tablet in Chrome when the 7 screen is in portrait the aside is showing to the right very narrow, instead of starting by being below the header and at 100%. It shows correctly on a PC in Chrome, and works correctly in firefox on the tablet. I have no idea how to even look for what's wrong. Is this a bug of some sort in Chrome? the site is: http://www.jamesmwanless.com Any idea's would be appreciated. Thanks! Shari ___/ Are u using ems for your MQs? Is Chrome's default font size different from FF? Or us it scaled up? Sorry I can't look as I'm away from a PC right now. __ 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] Select by descendant?
On Fri, May 16, 2014 at 9:47 AM, MiB digital.disc...@gmail.com wrote: may 16 2014 14:25 Brian Kardell bkard...@gmail.com: If you only, need this in script, jQuery has had :has from the beginning (it was a proposal from CSS3 a decade and a half ago), and if you need it in CSS you might have a look at hitchjs which has it I suppose that if you are already using jQuery you could make a script add a class or whatever to the parent element. While this is cheating (:-P) it will work unless Javascript is inactive. __ I was thinking the same thing. If it's just an aesthetic tweak and not a critical usability fix, I'd say it's pretty harmless. -- 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/
[css-d] iPad Mini MQs
List, Can anyone recommend an appropriate MQ for iPad Mini? I was using an iPad Mini (Retina) and noticed an issue on a site I work on where the absolute-position footer crashed into other content in landscape orientation because the screen is so small. Retina has specs of 2048-by-1536 resolution at 326 pixels per inch (ppi) and the other of 1024-by-768 resolution at 163 pixels per inch (ppi). I dont think @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) will work in both cases... unless I'm thinking about resolution wrong. TIA -- 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] iPad Mini MQs
On Tue, May 6, 2014 at 9:30 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 6 mai 2014 à 22:12, Tom Livingston tom...@gmail.com a écrit : Retina has specs of 2048-by-1536 resolution at 326 pixels per inch (ppi) and the other of 1024-by-768 resolution at 163 pixels per inch (ppi). Those are device pixels, not CSS pixels. I was hoping that was the case. Thank you sir. -- 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/
[css-d] iPad zoom triggers other MQ
Here's the site in question: http://www.medialogic.com/health-care/ In landscape view on iPad and after initial page load, if I do any zoom action at all - including pinch - the layout switches to a smaller screen layout/MQ. If you navigate to another page or refresh, it uses my desktop layout - which is what I want/expect. My MQ for desktop triggers at 960px wide. Can anyone explain what is happening? -- 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] Drop-menu items not 'sticky'
On Wed, Apr 30, 2014 at 11:16 AM, GJim jarne...@wyomerc.com wrote: Howdy All, One of my site testers is telling me that the drop-menu items, on this page, under 'Annual Book and Paper Fair', are not 'sticky' - they don't show long enough to make a selection. http://rmaba.org/2014/index2014.html I cannot reproduce the issue. One thing I did notice is that the div wrapping the dropdown is pos:abs but not relative to it's main nav item (Annual Book and Paper Fair). Hovering the hidden div in FF inspector shows it's position to be hidden in the upper left corner of the browser. Just FYI. That may be intentional... 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] Firefox and page inflation -- late response
I recall seeing this come through, but anyway, I'd like to say that I wasn't defending *not* using RWD, I'm a big proponent of it, but IIRC there were some replies that eluded to non-responsive sites being broken or preventative of users using the site on phones or tablets. I was just saying that in some (and at this point maybe most) cases that's not entirely true. Again, I'm not saying you shouldn't do mobile-first RWD, but for noobs, saying anything remotely suggesting that if you don't do RWD, you're site won't work on phones, et al, is misleading. On Tuesday, April 29, 2014 10:16 AM, MiB digital.disc...@gmail.com wrote: This got held up for unknown reasons: apr 10 2014 18:50 Tom Livingston tom...@gmail.com: it's still useable. He's not leaving mobile users *completely* out in the cold. That it is so, is still quite a bit beside the point I think. The users only have to get used to sites that cater for them, their use cases and their devices, to feel left out in the cold with just ”still usable”. In my world that can far too often mean that the user closes the window and doesn’t return. That’s what I do and I only had a smart phone for 2-3 years now. Of course each site is different typically. Anyway, to get back to CSS I find ”Mobile First” very helpful for designing already at the content level and focusing on what’s really important and that going from small size screens in my media queries and source media to larger simplifies my CSS design development considerably. That said I have already lost customers that don’t ”get” the need to design at the content level, at least not when they are doing the content. It’s possible I need to find people to work with that can do content so I can focus on server-side and interface design. /MiB __ 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] CSS menu at 320px
Actually, I believe it has. I get those as do some others, and I only get them as replies to CSS-D threads. Mr. Meyer is aware of this issue. On Sun, Apr 27, 2014 at 11:51 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: No, by subscribing to this list, you make your e-mail address accessible to others; you then risk receiving spam, as you have done in this case. Philip Taylor John wrote: Uh…I got 2 response to my question which were obviously spam..individuals taking photos of themselves..Has the list been compromised? John __ 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/ -- 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] CSS menu at 320px
On Sun, Apr 27, 2014 at 12:29 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: Actually, I believe it has. I get those as do some others, and I only get them as replies to CSS-D threads. Mr. Meyer is aware of this issue. But what can he do about it, since there is no way for him to know which of the list subscribers has set up an auto-responder to send these spam messages off-list ? The list has not been compromised, but a list member is abusing his/her membership in a covert manner. Philip Taylor Perhaps I'm using list in a more general term. Someone *on* the list has been compromised. And you are correct, it is difficult to figure out where it's coming from. My main point was that I don't get these messages outside of this list. -- 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] Ready for Pre-processors?
On Apr 25, 2014, at 1:43 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Eric wrote: I'll raise my hand and say I'm against it. Not because I have a problem with CSS pre-processors rather because this is a CSS list. Pre-processors are simply a tool used to write CSS in a more programmatic way and then 'compile' it I agree, and each is presumably different; a separate list for such things (or no list at all) would allow this list to retain its focus. Possible Holy War as well... __ 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] Webkit's wobbly centering
On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby huckle...@gmail.com wrote: Making a photo gallery, I want to center a row of thumbnails below the main photo. My code works well in all browsers *except* for those based on Webkit. A cut-down version of the code is here: http://codepen.io/hucklesby/pen/xjKEL What am I doing wrong? Any suggestions gratefully accepted. Thank. -- Cordially, David __ Turning off the word-spacing on .thumbs in Chrome inspector fixed it, though the space between thumbnails became less. Maybe that will put you on the right track... -- 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/
[css-d] Test
Subscription issue. Sorry about the noise. -- 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] Sticky Footer Problems
First of all, I'm glad it's not just me. Second, Mr. Meyer is aware of the issue. On Mon, Apr 21, 2014 at 5:17 PM, King's Cat (Cassandra King) puddin...@gmail.com wrote: Hi list i got that offensive email as well Is there a way of banning that account from this list? seems to be set to auto-respond on their end...for me, as soon as i posted, it immediately appeared in my inbox. On Mon, Apr 21, 2014 at 3:37 PM, Jennifer jenni...@superiorshelving.comwrote: On Apr 21, 2014, at 12:17 PM, David Hucklesby wrote: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ I’m assuming you either don’t need to support IE older than version 8, or give those geriatric browsers a very simple “generic” style sheet. Hi David, I remember running across that page in my search and trying it. I just don't remember why I didn't go with it. I'll try it again, but that way will add a lot more work for me. I already reformatted quite a few pages before I realized that it wasn't working properly. It seems that there should be a way to 'fix' this. I know it works, since I've tried it on a simple page, so it looks like I'll have to start stripping out other CSS to see what's interfering with the footer. And I thought this was going to be a simple task! ;) Thank you, Jenni Superior Shelving Systems The (Storage|Office|Home|Warehouse) Shelving Specialists Since 1984 Computer Workstations: http://www.superiorshelving.com/mfg/nexel/pages/lan-workstations-nexel.php __ 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/ -- 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] Phone breaks: unsure if working or not
On Fri, Apr 18, 2014 at 9:14 AM, Hahnel, Fred (DET-MRM) fred.hah...@mrmworldwide.com wrote: If not to use px for media breaks, what should be used? -regards, ems are becoming the preferred unit. -- 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] Media Queries: How many pixels make an em ?
On Fri, Apr 18, 2014 at 4:03 PM, Freelance Traveller edi...@freelancetraveller.com wrote: On Fri, 18 Apr 2014 17:53:37 +0100, Tim Dawson t...@ramasaig.com wrote: I've been following another thread (Phone breaks), and I can see the advantage of using 'ems' rather than pixels for media queries. So if I'm using 'px' now but would like to change to 'em', how do I calculate how many 'em' to allow for my 960px starting point ? I like using this: http://riddle.pl/emcalc/ -- 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] Fancybox modal window location in iPhone
5s iOS 7.1 On Fri, Apr 11, 2014 at 11:36 AM, Debbie Campbell d...@redkitecreative.com wrote: Are you using an iPhone 5, or another model, Tom? -- Debbie I'm still experiencing the problem. Sent from my iPhone On Apr 10, 2014, at 9:37 PM, Debbie Campbell d...@redkitecreative.com wrote: On Thu, Apr 10, 2014 at 9:07 AM, Debbie Campbell d...@redkitecreative.com wrote: Works fine in Android both portrait and landscape (centered on the screen), and fine in iPhone portrait view, but in landscape view on an iPhone the modal window is off to the lower right. I tried making an adjustment to the CSS but don't have an iPhone to test; in the online emulators I tried, the modal windows filled 100% of the screen so I can't see the problem. Tom Livingstone wrote: It seems you may be suffering from this: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/ When I changed orientation, the whole page was zoomed in so when you click a photo, the modal is acting accordingly. If I zoom out first, the modal works as desired. I've included the script to fix the iOS orientationchange issue - I'd be grateful if someone can take a look again in portrait and landscape view in an iPhone - this is the temporary URL: http://www.redkitecreative.com/dev/aemb/class-photos/ -- Debbie -- 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] Fancybox modal window location in iPhone
On Thu, Apr 10, 2014 at 9:07 AM, Debbie Campbell d...@redkitecreative.com wrote: Works fine in Android both portrait and landscape (centered on the screen), and fine in iPhone portrait view, but in landscape view on an iPhone the modal window is off to the lower right. http://www.artofequinemassage.com/class-photos/ I tried making an adjustment to the CSS but don't have an iPhone to test; in the online emulators I tried, the modal windows filled 100% of the screen so I can't see the problem. It seems you may be suffering from this: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/ When I changed orientation, the whole page was zoomed in so when you click a photo, the modal is acting accordingly. If I zoom out first, the modal works as desired. 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] Firefox and page inflation
Typical text site : http://marden-prg.org.uk/ Typical graphic-dependent high-resolution site : http://www.royalholloway.ac.uk/Hellenic-Institute/Research/Etheridge/ For what it's worth, a smart enough phone - like my iPhone - can render the high resolution site mentioned above with only minor Issues. I could even view the manuscript with little problem (minor button display issue), which seems to be the most complex area. I have to 'pinch and zoom' but it works. I'm not saying mobile optimized sites aren't giving a better experience. They do. But in case Philip hasn't looked (as he states he doesn't have a mobile) it's still useable. He's not leaving mobile users *completely* out in the cold. I'm a huge proponent of responsive sites, but you need to know your user base. There are still cases for not doing responsive. __ 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] Firefox and page inflation
Also, we're drifting away from list appropriate topics... Sent from my iPhone On Apr 10, 2014, at 12:32 PM, Chris Williams ch...@clwill.com wrote: Philip, as I described in the message I just sent, I too am developing a very complex and detailed application where I was convinced that one needed a huge screen to appreciate it. After many discussions with my contract designer she was able to convince me that the mobile user was worth pursuing. I wasn't initially convinced, so I approached several users and discussed the idea of using a phone or a tablet. They hadn't even imagined such a use case. With one, I started brainstorming and we realized that being able to walk around with the application, on a phone or tablet, was in fact a game-changer for the industry (I'll leave the specific industry out of it). After discussing it with other users, they (to my surprise) started to become huge advocates for it. Now, the mobile use case has become a cornerstone of the new product, a true differentiator from the competition. And not only has thinking about mobile changed our market strategy, it has, I believe, made a better product for the full screen user (see my other message). In short, I think people who ignore mobile do so at their own peril, or at least to their own market detriment. Chris On 4/10/14 9:18 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: I develop two sorts of site -- those that convey information, and those that set out to exploit web functionality to the full in order to achieve on-screen something that might otherwise require using a full GUI toolkit in order to accomplish. The first are pure text. They say what needs to be said and no more. I imagine that they will render satisfactorily on any tablet or mobile device, but lacking both I have never tested them against such a benchmark. The second (of which an example can be seen at the link below) typically require a screen resolution of at least 1152 x 864 in order to display satisfactorily (unless the visitor has good eyesight and can use negative page zoom in order to see more). They are not intended to be usable on tablets or similar, neither can I envisage any satisfactory way of making them render satisfactorily on such devices (nor can I envisage how to make the manuscript content accessible to blind and partially sighted users, which I regard as a far more important issue, and one that I would dearly love to be able to address). Since I don't create sites that seek to merge these two (in other words, my sites are quite unlike the vast majority of sites that one experiences today), I am not convinced that the first need to be made more mobile-friendly or that it would be possible to make the second more mobile-friendly. __ 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] Fancybox modal window location in iPhone
I'm still experiencing the problem. Sent from my iPhone On Apr 10, 2014, at 9:37 PM, Debbie Campbell d...@redkitecreative.com wrote: On Thu, Apr 10, 2014 at 9:07 AM, Debbie Campbell d...@redkitecreative.com wrote: Works fine in Android both portrait and landscape (centered on the screen), and fine in iPhone portrait view, but in landscape view on an iPhone the modal window is off to the lower right. I tried making an adjustment to the CSS but don't have an iPhone to test; in the online emulators I tried, the modal windows filled 100% of the screen so I can't see the problem. Tom Livingstone wrote: It seems you may be suffering from this: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/ When I changed orientation, the whole page was zoomed in so when you click a photo, the modal is acting accordingly. If I zoom out first, the modal works as desired. I've included the script to fix the iOS orientationchange issue - I'd be grateful if someone can take a look again in portrait and landscape view in an iPhone - this is the temporary URL: http://www.redkitecreative.com/dev/aemb/class-photos/ -- Debbie __ 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] Font-Sizes - Golden Rule ?
On Wed, Apr 9, 2014 at 11:33 AM, Tim Climis tim.cli...@gmail.com wrote:
How did you calculate 100% = 1em ?
Mostly everyone used, including myself pixels for box sizing, I hope you
were referring to creating a DIV as in box sizing ? What do you mean by
percentages are based on browser size ?
(although, it would be kind of fun if 100% resulted in letters
hundreds of pixels high...)
---Tim
I think percentages are based on their parents size and not the browser.
Correct me if I am wrong.
You are correct (except for the exceptions mentioned later by other people),
and of course for fonts.
The original question was about fonts. None of the box-model percent sizing
tangents matter. My comment was based on this from the OP:
percentages from what I know are relative to the browser size
And that's only remotely true in the context of boxes.
For example, if I have a rule that says
body {
font-size: 50%;
width: 50%;
}
I'll add that ems and % for font sizes will compound.
ul
li class=aHi
ulli class=bThere/li/ul
/li
/ul
A rule of li{font-size: 50%;} for the above will cause Hi to be 1/2
the size of it's parent (or browser default) and There will be 1/2
the size of Hi.
--
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] Font-Sizes - Golden Rule ?
Sent from my iPhone On Apr 9, 2014, at 12:05 PM, Shari webweave...@gmail.com wrote: If you use rem's it stays consistent from the body tag... correct? Correct. It is relative to the root. Shari __ 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 10:30 AM, Davies, Elizabeth
elizabeth_dav...@gallup.com wrote:
I've not used PX sizing for well over a decade. We did recently change to
using REM's off of a % on the HTML.
The site in question uses a % on the HTML and REM's on the typography with PX
in a legacy IE-only (for those that don't support REM). I can't post an URL
as its internal, but it uses similar base to
http://www.gallupstrengthsfinder.com (except the GSC site cascades PX to
REM's instead of having a separate conditional, the internal site has them
separated out with a conditional.)
html {font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
P (etc etc) {
font-size: 1.6rem;
line-height: 1.5;
}
ELIZABETH DAVIES
Input | Intellection | Learner | Achiever | Belief
I'm sure Felix can give an in depth explanation as to what's
happening, but I have to ask...
What's your reasoning for using 62.5% on the HTML element, then sizing
body copy back UP with 1.6 rems? What is accomplished over 100% on
HTML and 1rem on body copy? Did you try this to see if FF behaves
better?
As I said, Felix can give far more knowledge on this than I can, but
to my eye, you are working harder to achieve the same thing and 100%
on the HTML respects a users default browser settings.
--
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] Firefox and page inflation
On Mon, Apr 7, 2014 at 3:31 PM, Barney Carroll barney.carr...@gmail.com wrote: Please forgive the impertinent lurker here, but could somebody weigh in with why relative measures are necessary when the desired outcome is pixel-level accuracy? While feeling a little 'holy war', I'll bite... It's to honor browser/user-set default font size settings. If a user has set a larger font size in their browser preferences due to less than perfect eyesight, for example, setting 100% on the HTML element and then sizing elements with relative units will respect the users need for a larger readable text size and allow the text to scale up. Why do I feel like you know this and meant something else with your question... -- 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 5:10 PM, Felix Miata mrma...@earthlink.net wrote: On 2014-04-07 15:51 (GMT-0400) Tom Livingston composed: Barney Carroll wrote: Please forgive the impertinent lurker here, but could somebody weigh in with why relative measures are necessary when the desired outcome is pixel-level accuracy? While feeling a little 'holy war', I'll bite... It's to honor browser/user-set default font size settings. Exactly. Respect for optimal as determined by the viewer, represented by the configured default. If a user has set a larger font size in their browser preferences She may have set a smaller size. Maybe she wants to fit more open windows with less hidden from view in any or all of them. due to less than perfect eyesight, The why is totally irrelevant. Web pages are nearly always viewed on personal computing devices. Personalization is expected, regardless how often it ever goes beyond which wallpaper goes on the desktop to knowing default browser font size can be changed. for example, setting 100% on the HTML element and then sizing elements with relative units will respect the users need for a larger readable text size and allow the text to scale up. Not exactly. Zoom will scale it up, or down. The more important issue is the disregard for optimal, which causes the desire or need for a defensive reaction to the disregard in order to achieve legible and/or optimal and/or comfortable state. Computers have a natural ability to make tasks easier through automation. Disregard for defaults defeats an automation step. Design off the web generally means total control is given the designer. Elsewhere he has total control of all sizing. One of the virtues of the web is that designer control over absolute size ranges between difficult and impossible. And it's unnecessary. Even for a non-web design, apparent size varies with viewing distance. So the important part of design is how it all fits together, the perspective among design components. Those perspectives, no matter how important or trivial, can be reached in web design without attempting to impose any arbitrary absolute size to it or its individual elements. That is done primarily by disposing of use of the arbitrarily sized px, pt, cm, in and related units in favor of units configured by the visitor to suit the visitor, keywords, rem, em %, which improves automation, and reduces reactive activity required of the visitor. The friendly treatment that is respect should translate into a happier and less irritated viewer, which in turn should translate into a more receptive frame of mind, one more likely to lead the viewer to purchase whatever the site is trying to sell, or accept as valid the information provided. Exerting less control is usually easier too. :-) Well, yeah. That too. ;-) I was close though... right? -- 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] Graphic not aligning correctly
On Wed, Apr 2, 2014 at 1:58 PM, J.C. Berry jcharlesbe...@gmail.com wrote: Hi all, Thought I would just try this again. On this page http://www.xifin.com/news/blogs We have the green Most Recent Post graphic on the left of the first blog post and you can see that in some browsers it is not aligning and in others it is. Any ideas how to fix? Hopefully this will be a learning experience! Thank you! Can you be specific about what browsers aren't playing nice? I'm not seeing the issue. -- 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] Graphic not aligning correctly
On Wed, Apr 2, 2014 at 2:14 PM, J.C. Berry jcharlesbe...@gmail.com wrote: Firefox 28 On Wed, Apr 2, 2014 at 11:09 AM, Tom Livingston tom...@gmail.com wrote: On Wed, Apr 2, 2014 at 1:58 PM, J.C. Berry jcharlesbe...@gmail.comwrote: Hi all, Thought I would just try this again. On this page http://www.xifin.com/news/blogs We have the green Most Recent Post graphic on the left of the first blog post and you can see that in some browsers it is not aligning and in others it is. Any ideas how to fix? Hopefully this will be a learning experience! Thank you! Can you be specific about what browsers aren't playing nice? I'm not seeing the issue. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com The graphic in question is lined up nicely to the edge of the white area for me in FF28. Even when scaling text up and down. Is it supposed to be somewhere else? -- 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/
[css-d] Fwd: Graphic not aligning correctly
-- Forwarded message -- From: J.C. Berry jcharlesbe...@gmail.com Date: Wed, Apr 2, 2014 at 2:23 PM Subject: Re: [css-d] Graphic not aligning correctly To: Tom Livingston tom...@gmail.com oops. It's just Drupal when I'm logged in. I logged out and all is fine! Thanks for the time! On Wed, Apr 2, 2014 at 11:20 AM, Tom Livingston tom...@gmail.com wrote: On Wed, Apr 2, 2014 at 2:14 PM, J.C. Berry jcharlesbe...@gmail.comwrote: Firefox 28 On Wed, Apr 2, 2014 at 11:09 AM, Tom Livingston tom...@gmail.com wrote: On Wed, Apr 2, 2014 at 1:58 PM, J.C. Berry jcharlesbe...@gmail.comwrote: Hi all, Thought I would just try this again. On this page http://www.xifin.com/news/blogs We have the green Most Recent Post graphic on the left of the first blog post and you can see that in some browsers it is not aligning and in others it is. Any ideas how to fix? Hopefully this will be a learning experience! Thank you! Can you be specific about what browsers aren't playing nice? I'm not seeing the issue. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com The graphic in question is lined up nicely to the edge of the white area for me in FF28. Even when scaling text up and down. Is it supposed to be somewhere else? -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. -- 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] floating thumbnails
On Thu, Mar 27, 2014 at 10:19 AM, Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com wrote: In this Gallery page I'd like all thumbnails to float left around the main display image without making odd, unpredictable white space areas on the next line after a thumbnail runs off the right side of the display area. In other words I'd like the thumbnails to float into an orderly table like arrangement, controlled entirely by the browser, depending on current viewport width. is this possible with CSS only? -- Images are different heights, so that makes p different heights, messing up the floats. Adding min-height: 5em; to .robonav cleaned it up nice for me. Adjust as desired. 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/
[css-d] Google font use
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
Thanks in advance.
--
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] Google font use
On Thu, Mar 27, 2014 at 2:04 PM, Isabel Santos unboun...@gmail.com wrote:
Hi Tom,
font-weight:500 means semi-bold, default for strong is bold, so I gess
you need to add that extra rule
strong {
font-weight: 500;
}
you can take a look at:
http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/
and
http://css-tricks.com/watch-your-font-weight/
hope it helps
isabel
Thanks Isabel. All i can say is I'm glad it isn't a case of me just being
tick-headed. It's not just me.
I'll see if I can't come up with some sass for this...
Thanks
--
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] Google font use
Thanks Isabel. All i can say is I'm glad it isn't a case of me just being tick-headed. It's not just me. Er, I mean thick-headed. -- 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] Google font use
On Thu, Mar 27, 2014 at 3:25 PM, Eric e...@minerbits.com wrote: Yes, I realize that. I was just checking to see if a different CSS approach might be used. On March 27, 2014 at 2:53 PM Philip Taylor p.tay...@rhul.ac.uk wrote: Eric wrote: You're not using the strong tag for styling are you? I very much suspect that the browser neither knows nor cares why any particular tag has been used, Eric; it almost certainly renders the tagged element identically, regardless of the motivation for the tag's use. Philip Taylor I'm using strong in place of b if that's what you mean. -- 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] Google font use
On Thu, Mar 27, 2014 at 2:44 PM, Jukka K. Korpela jkorp...@cs.tut.fiwrote:
2014-03-27 18:34, Tom Livingston wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
I suppose you are using some special tools that convert that $roboto to a
real name. But how do you refer to the font? If you use Roboto as hosted by
Google and you use normal weight and 500 weight, you need, as Google
instructions say,
link href='http://fonts.googleapis.com/css?family=Roboto:400,500'
rel='stylesheet'
Yes, $roboto is a sass variable. And my @import from google is similar to
your example.
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong element causes font-weight: bold, i.e. font-weight: 700, by
default. So you should either change that setting or include 700 into the
href attribute.
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
When settings ask for bold and the font in use has no bold typeface
(loaded), browsers may apply algorithmic (synthetic) bolding. The results
vary by browser and are generally typographically poorer than real bold
typeface.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
If you want strong to appear in weight 500, then you need
strong { font-weight:500; }
There is no reason to set font-style on it, since font-style: normal is
the default. (Theoretically, some browser could have a different default.
Then there's probably some very good reason to that, and authors should not
interfere.)
OK, so I'm not (completely) crazy. I've used a few different font sources
and just wanted to confirm that a rule like strong{font-weight: 500;} is
needed in Google's case.
Yucca
Thanks all.
--
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] Google font use
On Thu, Mar 27, 2014 at 12:34 PM, Tom Livingston tom...@gmail.com wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
Thanks in advance.
So looks like so far my b,strong{font-weight:500;} rule solves the main
issue and even for cases like:
pSome text that has strongembold italic text/em/strong/p
Google seems to get the italic version of the 500-weight font correct, as I
am including the corresponding italic face for each weight, I just still
need b,strong{font-weight:500;} to avoid double-bolding.
Thanks again all
--
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] dealing with media breaks
On Tue, Mar 25, 2014 at 9:16 PM, John j...@coffeeonmars.com wrote: Are there best practices in dealing with setting up and modifying media breaks and the CSS for each? In the few responsive sites I've worked on, I find myself quickly getting clobbered by the several instances of each style that must be adjusted for each media break. I manage to deal with it, but wondering if others use methods to help keep it all straight as they work, or especially, if they have to come back to the code months later. Thank you! John Mobile-first tends to keep repeat styles to a minimum. As your width increases, only change or add rules to deal with layout changes. My base (mobile) styles are heaviest, and sheets for increased widths tend to be extremely light, consisting only of tweaks. Also, I second the idea of content dictating break points, although other people where I work have expectations of where breaks occur, but that's another story... 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] Subject: Font Size Small in FireFox ?
On Wed, Mar 19, 2014 at 10:52 AM, Crest Christopher
crestchristop...@gmail.com wrote:
David Hucklesby - I added {font-family:serif;} considering serif is on all
window computers. The font sizes remain different in firefox compared to
IE. Arghh !
__
I can't help still leaning towards browser settings. Have you double
checked that zoom/text scaling is at 100% in all browsers?
--
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] Subject: Font Size Small in FireFox ?
On Wed, Mar 19, 2014 at 11:16 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Here is the updated link.
Tom Livingston wrote:
On Wed, Mar 19, 2014 at 11:14 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Zoom and Text scaling is at 100% in all browsers. Arghh the text won't look
right in FireFox, I don't understand, I was expecting this in IE, not
firefox.
Tom Livingston wrote:
On Wed, Mar 19, 2014 at 10:52 AM, Crest Christopher
crestchristop...@gmail.com wrote:
David Hucklesby - I added {font-family:serif;} considering serif is on all
window computers. The font sizes remain different in firefox compared to
IE. Arghh !
__
I can't help still leaning towards browser settings. Have you double
checked that zoom/text scaling is at 100% in all browsers?
Do you have an updated link to look at?
Chrome on top, FF Aurora behind:
https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-19%20at%2011.23.10%20AM.png
--
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] Subject: Font Size Small in FireFox ?
On Wed, Mar 19, 2014 at 11:14 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Zoom and Text scaling is at 100% in all browsers. Arghh the text won't look
right in FireFox, I don't understand, I was expecting this in IE, not
firefox.
Tom Livingston wrote:
On Wed, Mar 19, 2014 at 10:52 AM, Crest Christopher
crestchristop...@gmail.com wrote:
David Hucklesby - I added {font-family:serif;} considering serif is on all
window computers. The font sizes remain different in firefox compared to
IE. Arghh !
__
I can't help still leaning towards browser settings. Have you double
checked that zoom/text scaling is at 100% in all browsers?
Do you have an updated link to look at?
--
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] Subject: Font Size Small in FireFox ?
On Wed, Mar 19, 2014 at 11:27 AM, Tom Livingston tom...@gmail.com wrote: On Wed, Mar 19, 2014 at 11:26 AM, Crest Christopher crestchristop...@gmail.com wrote: It looks identical, did you change any rule in the style sheet or nothing at all ? I changed nothing. -- Did you edit browser default style sheets at all? Browser extensions, like Greasemonkey, that manipulate styles for sites? -- 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] Subject: Font Size Small in FireFox ?
On Wed, Mar 19, 2014 at 11:26 AM, Crest Christopher crestchristop...@gmail.com wrote: It looks identical, did you change any rule in the style sheet or nothing at all ? I changed nothing. -- 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] Subject: Font Size Small in FireFox ?
On Wed, Mar 19, 2014 at 11:41 AM, Crest Christopher crestchristop...@gmail.com wrote: Thank You for the help ! Tom Livingston wrote: On Wed, Mar 19, 2014 at 11:33 AM, Crest Christopher crestchristop...@gmail.com wrote: I have a question, how come when I hover over the word 'gallery' the word tutorial changes color as set for the hover rule. How do I confined the anchor size to the word, not so that it spills onto the other text ? They overlap. Hit areas are on top of eachother. Not sure you can avoid this as built. You might butt them up to each other (no overlap) and mess with fixed height containers, text size and overflow:hidden to get close. Maybe. Haven't tested. -- 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] Subject: Font Size Small in FireFox ?
On Wed, Mar 19, 2014 at 11:33 AM, Crest Christopher crestchristop...@gmail.com wrote: I have a question, how come when I hover over the word 'gallery' the word tutorial changes color as set for the hover rule. How do I confined the anchor size to the word, not so that it spills onto the other text ? They overlap. Hit areas are on top of eachother. Not sure you can avoid this as built. -- 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] Line Height doesn't effect all pseduo elements
On Wed, Mar 19, 2014 at 12:41 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Hi, I can successfully change the line height for {h3.contact a:
font-size:7em;line-height:40%;} but when I add line-height to {h3.gallery
a:hover - color:orange;line-height: 40%;} nothing changes. I know I can
change the line height for the list with {nav li}. I want a little more
control over each pseudo element.
__
You don't appear to be changing anything on hover. Are all links
default of 7em and 40% line-height? If so, having 40% line-height on
hover won't change.
This works, but an extreme amount will get flaky fast:
!DOCTYPE html
html lang=en
head
meta charset=utf-8
title/title
style
a{font-size: 2em; line-height: 20%;}
a:hover{line-height: 80%;}
p{width: 100px;}
/style
/head
body
div class=main role=main
pa href=This is a really long link to test line-height
on hover./a/p
/div
/body
/html
--
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] Space between text {Chrome}
On Wed, Mar 19, 2014 at 2:45 PM, Crest Christopher
crestchristop...@gmail.com wrote:
I want to remove the space between gallery tutorials which only
exists in Chrome :-(
[Link http://www.thecreativesheep.ca/webdesignprojects/
largeprojects/cs_site.html]
Adding h3.gallery{margin: 0;} helped
--
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] Line Height doesn't effect all pseduo elements
Also, see:
http://css-tricks.com/almanac/properties/l/line-height/
*Unitless Line HeightsThe recommended method for defining line height is
using a number value, referred to as a unitless line height. A number
value can be any number, including a decimal-based number, as is used in
the first code example on this page.Unitless line heights are recommended
due to the fact that child elements will inherit the raw number value,
rather than the computed value. With this, child elements can compute their
line heights based on their computed font size, rather than inheriting an
arbitrary value from a parent that is more likely to need overriding.*
On Wed, Mar 19, 2014 at 12:41 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Hi, I can successfully change the line height for {h3.contact a:
font-size:7em;line-height:40%;} but when I add line-height to {h3.gallery
a:hover - color:orange;line-height: 40%;} nothing changes. I know I can
change the line height for the list with {nav li}. I want a little more
control over each pseudo element.
__
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/
--
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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 7:40 AM, John j...@coffeeonmars.com wrote: On 3/17/14 12:35 AM, MiB wrote: Absolute positioning is relative to the nearest Positioning context. That is the first parent — going inside out from the current element — that has a position. In my current page, the parent to the item that misbehaves in FF does have position:relative Shouldn't this be enough information for all browsers to render the children with position:absolute;top:x;right/left:x; correctly? So, I don't get why FF is doing something different with that information compared to the other browsers. Thank you, John One thing that may be happening is that you are spacing the icons with ems, which is tied to font sizing. The math involved with the spacing of the elements in #social is tight enough where browser font rendering differences may be playing a part. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. This is just my gut feeling here. No science to back it up. 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] Subject: Font Size Small in FireFox ?
On Mon, Mar 17, 2014 at 8:36 AM, Crest Christopher crestchristop...@gmail.com wrote: I changed my font-size to pixels, yet the fonts still look smaller in FireFox then Chrome or IE (site http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site.html), probably something else wrong ? Why is the CSS Mailing List sending me a digest instead of individual messages as I originally set it up to ? Although in Chrome I see a serif font - most likely a default setting for me - the sizes are the same between Latest FF Aurora and latest released Chrome on my Mac. Just a wild guess here, but might you have used FF's font scaling UI (View Zoom Scale Text Only) - scaled things down - and maybe left it down? -- 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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 10:09 AM, John j...@coffeeonmars.com wrote: On 3/17/14 5:56 AM, Tom Livingston wrote: One thing that may be happening is that you are spacing the icons with ems, which is tied to font sizing. The math involved with the spacing of the elements in #social is tight enough where browser font rendering differences may be playing a part. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. Thanks, Tom..I will address that... But I'm seeing that in FireFox, down below, 2 chunks: Hours Monday-Saturday: Sunday: and 10am-6pm Closed don't have the same positioning as they do in Safari, Chrome and Opera..which baffles me, if they are using the same origin point relative to top and left, why should Firefox show those 2 text hunks in different positions from the other browsers? Thank you! This link to a screen shot is Chrome on top and FF Aurora behind: https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-17%20at%2010.12.56%20AM.png 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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 10:22 AM, John j...@coffeeonmars.com wrote: On 3/17/14 7:19 AM, Tom Livingston wrote: This link to a screen shot is Chrome on top and FF Aurora behind: https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-17%20at%2010.12.56%20AM.png HTH Yes, that is about what I am seeing. *Why* the discrepancy? What is the cause of this difference in Firefox, as opposed to how Chrome, Opera and Safari show that exact same part? Thank you! John Sorry. I'm not sure what the discrepancy is. They look pretty similar to me. -- 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] display:inline-block differences in browsers
On Mon, Mar 17, 2014 at 10:29 AM, John j...@coffeeonmars.com wrote: On 3/17/14 7:24 AM, Tom Livingston wrote: Sorry. I'm not sure what the discrepancy is. They look pretty similar to me. your screengrab shows them closer than my FF version, but why should there BE a discrep? Or better, am I using the wrong method to get those text bits to line up as I want them to? I reached out for inline-block and position: absolute to avoid the snarkyness of using float and clear but it seems *much* trickier by quite a bit. I am hoping it is learning pains. Thanks! John I personally would have gone with floats. I've gotten used to it so I'm comfortable with it. Make your columns separate divs, float them and make sure the math works for all widths. I usually don't fit things 100%. Leave some wiggle room for the child elements. -- 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] Responstable SCSS
The pen is working on my iPhone Sent from my iPhone On Mar 17, 2014, at 1:54 PM, SSC_perl p...@surfshopcart.com wrote: I'm trying to implement this responsive table on my site: http://codepen.io/sharifh/pen/imojf It works fine in the Safari browser on my Mac when resizing the window, but it doesn't work on the iPhone - the table remains normal. I'm thinking that my problem is the SCSS. I converted it into CSS on some web site (sorry, don't remember which one now) and maybe the conversion wasn't 100% successful. How can I convert the SCSS into proper CSS? Thanks, Frank http://www.surfshopcart.com/ Setting up shop has never been easier! __ 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] display:inline-block differences in browsers
On Sun, Mar 16, 2014 at 8:07 PM, John j...@coffeeonmars.com wrote:
On 3/16/14 12:13 PM, Georg wrote:
You are absolute positioning in thin air ... not given browsers a
starting point for positioning.
That makes browsers guess what you mean, and one browser's guess is as
good as another's.
Adding...
#social { top: 0; left: 0;}
...as starting points, will make browsers agree.
If you also add...
#social { outline: solid 1px red;}
...while designing, you will see where and how wide that container is.
this fixed things for Safari, but all the other browsers are showing things
pretty much wherever the spirit moves them. Is there something else I've
left up for grabs in this? The whole design appears to be exploding
thanks for any clues...FYI, I validated the code first:
http://coffeeonmars.com/W200/test/DTake_Index.html
John
Removing margin-right on header ul got them all on one line for me in
Chrome, without them crowding the rule at the edge of wrapper.
--
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/
[css-d] iOS Safari and multiple fixed backgrounds
List,
I have a page with multiple divs that have fixed backgrounds. This
isn't working in iOS Safari or iOS Chrome. Actually, not even a single
div with a fixed background is working. In desktop appears to work
fine.
The CSS rule I am using is:
.myDiv{background: fixed url(../img/careers/careers-header-bg.jpg) 50%
0 no-repeat;}
Some Googling produced nothing that will help.
Anyone have any ideas? Anyone know if there's a trick to this?
Thanks
--
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] iOS Safari and multiple fixed backgrounds
Sent from my iPhone On Mar 14, 2014, at 12:11 PM, Georg ge...@gunlaug.com wrote: Den 14.03.2014 16:55, skrev Tom Livingston: List, I have a page with multiple divs that have fixed backgrounds. This isn't working in iOS Safari or iOS Chrome. Actually, not even a single div with a fixed background is working. In desktop appears to work fine. Read somewhere - a long time ago - that many browsers don't support anything fixed on small devices, because of the problems it unintentionally may cause. Also too easy to intentionally mess things up with fixed. Can u give an example of intentionally mess things up? 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] SASS or LESS
Sent from my iPhone On Mar 14, 2014, at 12:38 PM, Vince Mendella vi...@graymatterstudios.ca wrote: Hey everyone, Just wondering if there is a good place for tutorials to learn SASS or LESS? And which one would be better to dive into? May be 'holy war' territory. A lot is personal preference but IMO there's a bigger pool of resources for SASS. See http://sass-lang.com Thanks in advance everyone, Vince HTH Sent from my iPhone __ 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] iOS Safari and multiple fixed backgrounds
On Fri, Mar 14, 2014 at 1:18 PM, Chris Rockwell ch...@chrisrockwell.com wrote: Hey Tom, Did you see this support chart: http://www.quirksmode.org/css/backgrounds-borders/mobile.html There appear to be some hacks, with one from 2012 referenced here: http://stackoverflow.com/a/13337504/1108292 And what could potentially be a starting point for a polyfill: http://stackoverflow.com/a/14115437/1108292 And, finally, this post tries to explain why position:fixed is unreliable in iOS (and Android): http://webreflection.blogspot.co.nz/2009/09/css-position-fixed-solution.html Hope it helps. -- Chris Rockwell Hi Chris, Thanks. I did see those. The last link you posted above talks about position:fixed in terms of, for example, a fixed navbar at the top of a page. What I'm after is a fixed background image applied to a div. Now technically, that may be the same thing and in my limited knowledge I just don't realize it, but I would think these are two different things. In the end, I'll go with what I thought and that's 'no, you can't do that', and just code my MQs accordingly. Georg, I remember reading something a while back as well, but the way things change in this biz, you never know if someone figured out a way around it. Thanks. -- 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?
The alternative to font inflation is substantially worse. Mobile browsers give you a viewport in which you can pan and zoom around a desktop-size viewport of the page. This feature exists for compatibility, to allow mobile Web browsers to view Web pages designed before good mobile Web browsers existed, or designed without considering them. If you've considered mobile in your design, you can use a meta viewport in your page to opt out of parts or all of this behavior. Some Web pages contain text that the user wants to read, and to do this, and in cases where these dual viewports exist, the user needs to zoom in to make the text a decent size. If, at that zoom level where the font is readably large, the user needs to scroll side to side to reach *each line* of the text, because the width of the block is wider than the device. This is a horrible experience. Font inflation exists to solve only this problem, which is a problem that fundamentally would make mobile Web browsers unusable. It doesn't happen if pages declare a meta viewport that means there's no viewport scaling involved, and it doesn't happen if all their blocks are narrow enough to be readable without side-to-side scrolling for each line. -David -- 턞 L. David Baron http://dbaron.org I'd go along with this except... You say Font inflation exists to solve only this problem, which is a problem that fundamentally would make mobile Web browsers unusable. It doesn't happen if pages declare a meta viewport. The OP's page here: http://81.4.104.136/fonts.html doesn't inflate the fonts for me on my iPhone. It miniaturizes them. Severely. This page doesn't have the viewport meta tag in the head. Without the meta tag, I will need to pinch and zoom, but the sizes are ridiculously small. I'm gonna guess that because there is no layout, the width of the page is very large so it is zoomed OUT a great deal. Right? Am I missing something? -- 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/
