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/
[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/
[css-d] Retina MQs
List, This is my first attempt at serving retina images to retina devices. Will this MQ cover most of the bases? screen and (-Webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) Is there a safer and more comprehensive MQ for this purpose? 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] Section Lacks Heading ?
I admit to not having gone through the spec itself, but here's a reliable reference: http://html5doctor.com/the-section-element/ See the part called rules of thumb for using section. I pretty sure section has to have a heading of some kind. h1 or header etc. On Wed, Jul 30, 2014 at 8:59 PM, Crest Christopher crestchristop...@gmail.com wrote: The W3C Validator is handing me this error; I can't decode what it means ? I read I should replace with a div but must I ? Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. | section class=contactme**| __ 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] 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/
Re: [css-d] Fwd: Re: Web fonts
-- Forwarded message -- From: Chris Rockwell ch...@chrisrockwell.com Tip: if you're using Chrome or Firefox, highlight some of the text (really not necessary, i just do it out of habit), right click (on windows, not sure of mac) and select Inspect Element. In the right side pane of developer tools, you'll be able to see what styles are being applied to the element. Firefox has a Fonts tab on the right. Very handy. -- 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] keeping submenu open when parent is 'current'
Can't inspect on my phone (that would be nice, huh?) but I'll take a stab at it. Is the element triggered on hover wrapping the menu items? On Friday, August 1, 2014, Debbie Campbell d...@redkitecreative.com wrote: I managed to get a dropline menu working in WordPress, but the submenu won't stay open: http://www.redkitecreative.com/dev/pestpro/bed-bug-heat- products/small-apartment-package/ If you hover the red main menu item, you'll see the dropline menu. I'd like that to be open always when it's parent is current, or when one of the items in the dropline menu is current. Help? -- Debbie Campbell www.redkitecreative.com --- This email is free from viruses and malware because avast! Antivirus protection is active. http://www.avast.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] keeping submenu open when parent is 'current'
Works in latest Chrome and FF for me. On Fri, Aug 1, 2014 at 12:46 PM, Debbie Campbell d...@redkitecreative.com wrote: I managed to get a dropline menu working in WordPress, but the submenu won't stay open: http://www.redkitecreative.com/dev/pestpro/bed-bug-heat-products/small-apartment-package/ If you hover the red main menu item, you'll see the dropline menu. I'd like that to be open always when it's parent is current, or when one of the items in the dropline menu is current. Help? -- Debbie Campbell www.redkitecreative.com --- This email is free from viruses and malware because avast! Antivirus protection is active. http://www.avast.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] keeping submenu open when parent is 'current'
On Fri, Aug 1, 2014 at 1:15 PM, Debbie Campbell d...@redkitecreative.com wrote: It only appears on hover for me in the latest Chrome/FF.. Sorry I misunderstood what you were after... -- 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] keeping submenu open when parent is 'current'
For example, the Small Apartment Package has the class `page-189` on
the body, and the menu item li has the class `menu-item-210`. In
this scenario, you would need something like:
.page-189 .menu-item-210 ul { display: block;}
Again, there are other considerations because you're showing/hiding with
javascript by adding inline styles (as opposed to adding classes and
dealing with the styling in a sheet), but this will hopefully get you
thinking along the right path.
Make sense?
Chris
Chris Rockwell
Along those lines, I'd opt for adding a class to the body (or a high
level wrapper) and adjust the styles of the menu to stay visible.
Changing the class per page.
--
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] Web fonts
On Monday, August 4, 2014, Tim Dawson t...@ramasaig.com wrote: On 31/07/2014 14:17, Tom Livingston wrote: -- Forwarded message -- From: Chris Rockwell ch...@chrisrockwell.com Tip: if you're using Chrome or Firefox, highlight some of the text (really not necessary, i just do it out of habit), right click (on windows, not sure of mac) and select Inspect Element. In the right side pane of developer tools, you'll be able to see what styles are being applied to the element. Firefox has a Fonts tab on the right. Very handy. Isn't that an 'Add-on' (or 'Extension') ? I don't see it on my Firefox, but it might be useful. I'll chech but I don't remember doing anything special to get it. I'll let you 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] Web fonts
On Monday, August 4, 2014, Tom Livingston tom...@gmail.com wrote: On Monday, August 4, 2014, Tim Dawson t...@ramasaig.com javascript:_e(%7B%7D,'cvml','t...@ramasaig.com'); wrote: On 31/07/2014 14:17, Tom Livingston wrote: -- Forwarded message -- From: Chris Rockwell ch...@chrisrockwell.com Tip: if you're using Chrome or Firefox, highlight some of the text (really not necessary, i just do it out of habit), right click (on windows, not sure of mac) and select Inspect Element. In the right side pane of developer tools, you'll be able to see what styles are being applied to the element. Firefox has a Fonts tab on the right. Very handy. To be clear, the fonts tan I am referring to is in FFs own dev tools. Right click and choose inspect element. -- 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] JavaScript / HTML groups
http://www.webdesign-l.com/ On Mon, Aug 4, 2014 at 10:54 AM, Frank Taylor pace...@madebypaceaux.com wrote: Hi All, I apologize in advance for an off-topic question. I’ve been following this group for a while now and have learned a ton from it. Are there any groups like this one, but for HTML or JavaScript? /email signature id=paceaux name=Frank M. Taylor twitter=@paceaux / __ 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/
[css-d] SVG background-image with fallback
List, I was having a discussion in the comments of an article about using svg as a background-image in CSS, and using a png as fallback. I was writing it like this: background-image: image.png; background-image: image.svg; But this fails in IE8 (and presumably in other non-svg-supporting browsers). My thought was that it would work like background-color does. Sample page: http://tomliv.com/nick-test/ Just trying to learn here. Why does the cascade not work in both cases? -- 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] SVG background-image with fallback
I've seen that and others. I'm looking for why. Why don't they work the
same.
On Tuesday, August 5, 2014, Chris Rockwell ch...@chrisrockwell.com wrote:
Have you seen this, Tom: http://css-tricks.com/svg-fallbacks/ ?
Scroll down about 1/2 way for the `background-image` fallback; Basically
you have to fake multiple backgrounds, but it doesn't work in Android 2.3,
if that's a concern.
So:
background-image: url('image.png');
background-image: url('image.svg'), none;
There's also modernizr if you're already using that.
Chris
Chris Rockwell
On Tue, Aug 5, 2014 at 9:00 AM, Tom Livingston tom...@gmail.com
javascript:_e(%7B%7D,'cvml','tom...@gmail.com'); wrote:
List,
I was having a discussion in the comments of an article about using
svg as a background-image in CSS, and using a png as fallback. I was
writing it like this:
background-image: image.png;
background-image: image.svg;
But this fails in IE8 (and presumably in other non-svg-supporting
browsers).
My thought was that it would work like background-color does.
Sample page:
http://tomliv.com/nick-test/
Just trying to learn here. Why does the cascade not work in both cases?
--
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
javascript:_e(%7B%7D,'cvml','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] SVG background-image with fallback
Ok, I see the difference. Thanks all.
On Tuesday, August 5, 2014, Chris Rockwell ch...@chrisrockwell.com wrote:
They do work the same. You're not giving it a declaration it doesn't
understand ( like rgba(), therefore causing a fallback ), it perfectly
understands url(), it just can't render the resource you're giving it.
Chris Rockwell
On Tue, Aug 5, 2014 at 9:17 AM, Tom Livingston tom...@gmail.com
javascript:_e(%7B%7D,'cvml','tom...@gmail.com'); wrote:
I've seen that and others. I'm looking for why. Why don't they work the
same.
On Tuesday, August 5, 2014, Chris Rockwell ch...@chrisrockwell.com
javascript:_e(%7B%7D,'cvml','ch...@chrisrockwell.com'); wrote:
Have you seen this, Tom: http://css-tricks.com/svg-fallbacks/ ?
Scroll down about 1/2 way for the `background-image` fallback; Basically
you have to fake multiple backgrounds, but it doesn't work in Android 2.3,
if that's a concern.
So:
background-image: url('image.png');
background-image: url('image.svg'), none;
There's also modernizr if you're already using that.
Chris
Chris Rockwell
On Tue, Aug 5, 2014 at 9:00 AM, Tom Livingston tom...@gmail.com wrote:
List,
I was having a discussion in the comments of an article about using
svg as a background-image in CSS, and using a png as fallback. I was
writing it like this:
background-image: image.png;
background-image: image.svg;
But this fails in IE8 (and presumably in other non-svg-supporting
browsers).
My thought was that it would work like background-color does.
Sample page:
http://tomliv.com/nick-test/
Just trying to learn here. Why does the cascade not work in both cases?
--
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
--
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] SVG background-image with fallback
On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: On Aug 5, 2014, at 6:15 PM, Philippe Wittenbergh e...@l-c-n.com javascript:; wrote: Le 6 août 2014 à 06:40, Karl DeSaulniers k...@designdrumm.com javascript:; a écrit : urn your svg image into a base64 and load the image data as content: . Wouldn't that work? No, that wouldn't work any differently. A browser that doesn't support SVG will see an invalid / unrecognised image format as content of the background-image: url(); It will apply the rule (valid, recognised syntax) but can't display the image. Because it recognises the syntax, it will not fall back to the previous rule that references the .PNG image. Philippe -- Philippe Wittenbergh http://l-c-n.com/ Ah yes, I guess you are right. Hope you all don't mind, but I would say this is a javascript solution. Check the browser for svg support and load the one you want. Done. Actually, now that I see the difference between this and rgba with rgb fallback, I see the best non-script solution is: Background: url(image.png); background-image: url(image.svg); See here: http://callmenick.com/2014/04/02/svg-fallback-with-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] SVG background-image with fallback
On Tuesday, August 5, 2014, Chris Rockwell ch...@chrisrockwell.com wrote: Hey Tom, just a heads up that you need to include the 2nd argument in background-image:, otherwise it won't fallback. Ah yes. Correct. -- 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] SVG background-image with fallback
These were simple examples. In practice, I'd add MQ to stop that from happening in most browsers. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: So with this, my browser, if it supports svg has to download your png and then your svg? Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 7:45 PM, Tom Livingston tom...@gmail.com javascript:; wrote: Background: url(image.png); background-image: url(image.svg), none; __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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] SVG background-image with fallback
Most likely, yes. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: I see. But so I can wrap my head around this, without the media queries, that is what this css declaration does? Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 8:08 PM, Tom Livingston tom...@gmail.com javascript:; wrote: These were simple examples. In practice, I'd add MQ to stop that from happening in most browsers. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com javascript:; wrote: So with this, my browser, if it supports svg has to download your png and then your svg? Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 7:45 PM, Tom Livingston tom...@gmail.com javascript:; wrote: Background: url(image.png); background-image: url(image.svg), none; __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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 javascript:;] 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] SVG background-image with fallback
If you're already using modernizr, it's even easier. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: That is an interesting find, thank you for sharing. I am still a little partial to the js solution as it checks things before anything is loaded, but if your a css purist, this is gold. ;) Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 8:11 PM, Tom Livingston tom...@gmail.com javascript:; wrote: Most likely, yes. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com javascript:; wrote: I see. But so I can wrap my head around this, without the media queries, that is what this css declaration does? Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 8:08 PM, Tom Livingston tom...@gmail.com javascript:; wrote: These were simple examples. In practice, I'd add MQ to stop that from happening in most browsers. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com javascript:; wrote: So with this, my browser, if it supports svg has to download your png and then your svg? Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 5, 2014, at 7:45 PM, Tom Livingston tom...@gmail.com javascript:; wrote: Background: url(image.png); background-image: url(image.svg), none; __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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 javascript:;] 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 javascript:;] 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] SVG background-image with fallback
Of course, YMMV, but like I said, if you're already using modernizr - which also includes the html5shiv - it's trivial to handle this svg situation. On Tuesday, August 5, 2014, Karl DeSaulniers k...@designdrumm.com wrote: On Aug 5, 2014, at 8:19 PM, Tom Livingston tom...@gmail.com javascript:; wrote: If you're already using modernizr, it's even easier. Na, I don't normally use those libraries unless I can't roll my own or it's just more feasible to do so. Too much excess code for stuff I am not utilizing in a project. Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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] SVG background-image with fallback
Our clients still use IE8. I think all most all of them. That's the only reason that matters to my superiors, or my clients. On Thu, Aug 7, 2014 at 6:33 PM, Eric e...@minerbits.com wrote: I realize that this thread has gone off in other direction but I have a question - Given that SVG is support universally except for very ancient UAs (IE8 is south of 5% now) why bother with a fallback image? Why not just give them a background-color? Seems like a whole lot of wasted work for a drop int he bucket of users. Eric On August 5, 2014 at 9:00 AM Tom Livingston tom...@gmail.com wrote: List, I was having a discussion in the comments of an article about using svg as a background-image in CSS, and using a png as fallback. I was writing it like this: background-image: image.png; background-image: image.svg; But this fails in IE8 (and presumably in other non-svg-supporting browsers). My thought was that it would work like background-color does. Sample page: http://tomliv.com/nick-test/ Just trying to learn here. Why does the cascade not work in both cases? -- 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] Flex-box: what sets the initial width of a flex item ?
On Fri, Aug 8, 2014 at 8:19 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
Le 8 août 2014 à 20:45, Tim Dawson t...@ramasaig.com a écrit :
I'm experimenting with the CSS3 Flexible Box layout. Since I am also using
SASS I copied a very simple flex layout from:
http://compass-style.org/examples/compass/css3/box/
…
.main {
display: box;
You are using very old and **deprecated** code here, you really should’t work
with that.
here is a decent tutorial for flexbox, based on what current browsers
implement and the curent spec.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Philippe
--
Was looking for that tutorial. Philippe beat me to it.
--
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 map link won't open in iPhone - is this a css issue?
Worked fine for me gmail app sent me to Chome and google map on iPhone 5S On Friday, August 8, 2014, bho...@aol.com wrote: Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm Thanks Bruce __ 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] Google map link won't open in iPhone - is this a css issue?
Pasting the link into iOS Safari and clicking the directions link took me to google maps ok, but I briefly saw an error message about an invalid link. On Friday, August 8, 2014, bho...@aol.com wrote: Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm Thanks Bruce __ 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] removal
Follow the links in the footer of any CSS-d message to find the unsubscribe. I believe you must sign in to find it. On Monday, August 11, 2014, csimpson csimpson@gmail.com wrote: hi sorry to be a pain , can you remove me for a while from the list , thanks Carl __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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] Grids: what's all the fuss ?
On Mon, Aug 11, 2014 at 8:14 AM, Tim Dawson t...@ramasaig.com wrote: On 11/08/2014 12:21, MiB wrote: Grids are not the same as grid frameworks. It sounds to me you mixing these concepts up. I think you've put your finger on it here. I asked the wrong question. It should have been 'Grid frameworks: what's all the fuss about'. But I wouldn't have asked that question because I'm not a devotee of frameworks (doubtless to my detriment, but I prefer first principles. I can always copy my own frameworks). You don’t need a framework in order to use grids. All you need is the ability to choose and use grids as a concept and a tool. That’s all you need. I'm an engineer by background (civil by training, mechanical from practice), not a 'designer' (whatever that may mean). My designs tended to be rectilinear so I was a natural user of grids even before I took up web design. It had just never occurred to me to create all those 1/12 size columns in CSS and I wanted to find out more. I think I have now. To misquote J Caesar: I came, I saw, I went away. Thanks for your help. Tim I'm more or less in the same boat as you. Though, designers I work with use a grid, but I see a page differently and can recreate it in html with out the need of a million classes for columns. -- 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 code - is this right?
Nice article Frank.
Just so I'm tracking this right - as I've not used this very much -
given this example:
[class*=span]
This means select elements who's class contains the word 'span'. Correct?
On Thu, Aug 14, 2014 at 9:39 AM, Frank Taylor pace...@madebypaceaux.com wrote:
Yes, that’s correct. It’s the attribute selector. Whatever goes into the
brackets is an attribute, and that can be any attribute on the HTML selector.
Shameless self-plug: there’s some crazy stuff you can do with the attribute
selector:
http://blog.frankmtaylor.com/2012/04/27/css-sorcery-performing-magic-with-the-attribute-selector/
On Aug 14, 2014, at 0:49, John D xfs...@hotmail.com wrote:
Just noticed that a joomla site has the following code:
[class*=span].pull-right,
.row-fluid [class*=span].pull-right {
float: right;
}
Is this correct especially th items in square brackets?
I thought the easiest way is to write something like this:
span.pull-right,
.row-fluid {
float: right;
}
Why are they using square brackets?
__
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] div backgound shows below content when it shouldn't
I'm guessing the initial relatively positioned image is causing this.
A lot of times you can get rid of this by floating the image left in
the container (and clearing presumably). This may not work for you. in
this case. Off the top of my head I can't think of other solutions.
On Thu, Aug 14, 2014 at 2:06 PM, Tim Dawson t...@ramasaig.com wrote:
I'm coding a new site and am struggling with a 'wrapping' problem in the
header.
I have a div containing a CSS animation of five* images which appear
sequentially. The images are absolutely positioned in a stack, except for
the first to load, which has relative positioning. That's done with the
intention of getting the containing div to wrap the images without having
to set a height.
* There's a sixth image, last to load, which fades out initially, but then
doesn't reappear. I did this to avoid loading an image with zero opacity and
having to wait for it to fade in. There are probably better ways to do this,
but that's not the problem here.
Margins and Padding are set to zero (except the image margin-top) so my
expectation is that the div will be the same size as the image plus 48px
of image top margin.
It works except that I always get two pixels worth of the div background
showing at the bottom of the images, and I cannot work out why.
You can see it at: http://webadit.co.uk/hminew3/ (site is far from complete)
For this demo the background colour for the animation div class='pananim'
is bright green. The 48 pixel gap at the top is deliberate (that's where the
navigation will go).
The relevant CSS is:
.pananim {
position: relative;
margin-bottom: 0; /* set elsewhere too, but inserted here in hope */
background-color: #0F0; /* for demo only */
}
.pananim img {
position: absolute;
top: 0;
left: 0;
margin-top: 48px;
width: 100%;
opacity: 0;
}
.pananim img:first-of-type {
position: relative;
}
The two pixel line disappears if I remove the relative positioning of the
first image, but then the animation div collapses, and the main page
heading 'Welcome to Mull Iona' (purple text) appears above the images.
I can, of course, make the problem 'go away' by changing the background
colour, but I'd rather know why it happens and correct the CSS.
I fear I can no longer see the wood for the trees, and would be grateful for
some help, please.
Regards,
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
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 code - is this right?
Actually, the code says an element with a class of 'span' will be selected. Kinda poor. On Thursday, August 14, 2014, John D xfs...@hotmail.com wrote: Not sure I understand your post but span can be given a class and the code is attributing to that class. Is this what your view is about Joomla? I guess those semantics (using elements as class names) sums up my view of Joomla very well. __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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] div backgound shows below content when it shouldn't
Can you use padding instead of margin and add it to .pananim?
On Saturday, August 16, 2014, Tim Dawson t...@ramasaig.com wrote:
I'm just tidying up this problem, and trying to fathom why I still need
'overflow: hidden;' to prevent the BODY being moved down 48px ( = the
margin on the positioned images).
The CSS I've got now for the animation positioning is:
.pananim {
position: relative;
background-color: #0272a7; /* replacing the lime green I used for the
problem demo */
overflow: hidden; /* without this even the BODY gets moved down
48px */
}
.pananim img {
position: absolute;
top: 0;
left: 0;
display: block; /* this can be here or on 'last-of-type' (it doesn't
seem to matter) */
margin: 0;/* redundant here, but included to be sure */
margin-top: 48px; /* If I remove this the body no longer moves down (but
the images move up) */
padding: 0; /* redundant here, but included to be sure */
width: 100%;
opacity: 0;
}
.pananim img:last-of-type {
position: static; /* enables div.pananim to expand to wrap the images*/
}
If I remove '.pananim overflow: hidden;' everything, including the body,
gets moved down by 48px (except the copyright and caption text in the
animation), as in the example: http://webadit.co.uk/hminew3/. It's
commented out on line 446 of hmi2_01.css
I've set a 5px red outline on the body to help illustrate this.
It must be to do with the absolute positioning of the images (within
div.pananim), but I'd like to understand why it seems to work UP the
cascade to the body ?
Putting the top margin onto div.pananim instead of the images makes no
difference to what happens. Relatively positioning div.ananim with 'top:
48px;' resolves the problem, but pushes the header images down over the
text below (where the main content will go), so a top margin is then needed
on the content.
So either I stick to 'overflow: hidden;' (which seems fairly innocuous) or
I have to start adding margin further down the page which is likely to lead
to complexities when I come to make the design responsive. Or is there a
better solution staring me in the face ?
Tim
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
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] Another bug?
Assuming you don't want both applied, can you put the filter In a conditional or use a conditional to add classes to the html and set ie9 to filter:none ? On Sunday, August 17, 2014, Karl DeSaulniers k...@designdrumm.com wrote: Ok, not sure what the deal is here but I think I found another bug. This time with IE. Currently I have a div that I have put a matrix transform on and I have these two declarations set. filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99862953, M12=-0.05233596, M21=0.05233596, M22=0.99862953,sizingMethod='auto expand'); and -ms-transform: matrix(0.99862953, 0.05233596, -0.05233596, 0.99862953, 0, 0); (Thinking I needed them to cover all IEs. ) IE 9 applies both to the div and I get a messed up angle and a black background. The backgrounds are transparent otherwise. Bug? Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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] page guts visible only in Firefox?
Clear: both; on #middle brought it back from the right edge of my window. Maybe that will give you a hint? On Tue, Aug 19, 2014 at 4:21 PM, John j...@coffeeonmars.com wrote: My heart just about leaped out of my body just now..proofed my page in browsers other than FF and aside from header and footer…nothin’s there. The source code is there and the pages validate.. Can anyone clarify what up? Thank you! John http://coffeeonmars.com/W202/proto/home.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/ -- 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] page guts visible only in Firefox?
Not sure about too many, but are you clearing them properly? I prefer clearfix, but others like overflow:hidden; method. On Tue, Aug 19, 2014 at 4:43 PM, John j...@coffeeonmars.com wrote: On Aug 19, 2014, at 1:26 PM, Tom Livingston tom...@gmail.com wrote: Clear: both; on #middle brought it back from the right edge of my window. Maybe that will give you a hint? Well I know I have some floats going on and clear:both on #middle brought the content back to visibility, yet some things are still off in opera and chrome. middle is not the immediate parent to the divs inside of content. have I shot myself in the foot by having too many floats? Is that possible? Thank you! 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] page guts visible only in Firefox?
When I was messing with it in firebug, I added overflow:hidden; on the nav ul, and clear both on #middle On Tue, Aug 19, 2014 at 4:47 PM, John j...@coffeeonmars.com wrote: On Aug 19, 2014, at 1:44 PM, Tom Livingston tom...@gmail.com wrote: Not sure about too many, but are you clearing them properly? I prefer clearfix, but others like overflow:hidden; method. well, now that you ask, no I am not sure! ;-) It was my understanding that overflow:hidden is the new clear:both/clearfix. My understanding is that the parent div which contains float must have overflow:hidden placed on it..so that suggests #content for my page; yet that had no effect. 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] Understanding How Relative Font-Size Resize Units in Responsive Design
Fonts are relative to the root element, and can be effected by font sizes applied to parent elements (compounding). Ems and percentage sizes will compound. Rem units will not. Font won't scale like images. There are a few script solutions but I dislike them. On Sunday, August 24, 2014, Elli Vizcaino e7f...@gmail.com wrote: Hello CSS Discuss, I'm trying to understand how relative font sizes resize in the browser because they don't seem to resize proportionately to their containing element the way a responsive background image would. The background image logo on this page: http://www.e7flux.com/e7flux2014/.html resizes up or down according to the browser window where as the fonts only resize according to the percentages set in the media queries depending on breakpoint even though they are contained in elements with percentage base widths. Is there anyway to get font sizing to resize proportionately based on containing element width? Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/
[css-d] button using text and graphic
I have a button, as shown here:
http://www.tomliv.com/img/button.png
and I am using this style:
.button{
display: inline-block;
background-color: $yellow;
background-image: url(../img/button-arrow.png);
background-position: 100% 0;
background-repeat: no-repeat;
color: $lightblue;
@include scalabold-font;
font-size: 17px;
font-size: 1.063rem;
padding: 11px 35px 8px 10px;
margin: 10px 0;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
This type of style comes up a lot where i work. This isn't very stable.
It's easily messed up by different font sizes - either different button
uses styled differently or user preferences.
Can anyone recommend a better way to style a button like that? Text is
'live text' and has a graphic element in it. I've been around and around
with different attempts. I feel like I'm not seeing the forest for the
trees...
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] button using text and graphic
The text isn't a graphic. On Tue, Sep 2, 2014 at 4:33 PM, Crest Christopher crestchristop...@gmail.com wrote: What do you mean by live text ? Christopher Tom Livingston wrote: color: $lightblue -- 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] button using text and graphic
Sorry. A little sass is still in there. On Tuesday, September 2, 2014, Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: background-color: $yellow; color: $lightblue; What do the dollar signs contribute ? Philip Taylor -- 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] button using text and graphic
I have. I usually get the same result as far as tweakiness. What I'm after is more stability. Especially with vertical centering and spacing. On Tuesday, September 2, 2014, Karl DeSaulniers k...@designdrumm.com wrote: Hi Tom, Have you tried the good 'ol button element? button type=button class=buttonLive Text!/button Best, Karl Karl DeSaulniers Design Drumm http://designdrumm.com On Sep 2, 2014, at 3:45 PM, Tom Livingston tom...@gmail.com javascript:; wrote: The text isn't a graphic. On Tue, Sep 2, 2014 at 4:33 PM, Crest Christopher crestchristop...@gmail.com javascript:; wrote: What do you mean by live text ? Christopher Tom Livingston wrote: color: $lightblue -- 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 javascript:;] 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 javascript:;] 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] button using text and graphic
I'll play with that, thanks Georg On Tuesday, September 2, 2014, Georg ge...@gunlaug.com wrote: Den 02.09.2014 22:20, skrev Tom Livingston: http://www.tomliv.com/img/button.png If that's a typical button, I would think the addition of 'background-size' and adding the arrow in with '::after' should be flexible enough to work. 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/ -- 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] button using text and graphic
On Tue, Sep 2, 2014 at 7:55 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 3 sept. 2014 à 07:05, Georg ge...@gunlaug.com a écrit : Den 02.09.2014 22:20, skrev Tom Livingston: http://www.tomliv.com/img/button.png If that's a typical button, I would think the addition of 'background-size' yes (sized in em, or rem, using an SVG image) In addition: background-position: 100% 50%; and again, use em, rem instead of px for the padding. and adding the arrow in with '::after' should be flexible enough to work. Not great for AT, if you use the 'content' property; if you use a background image on the ::after element, you'll have the same issues in terms of sizing positioning. Philippe -- Philippe Wittenbergh http://l-c-n.com/ If you look carefully at the image I linked to, the text and arrow image aren't well centered vertically. It look better in Safari. I know vertical centering is a bit annoying but is there a better way to go about this structure/style? -- 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] button using text and graphic
If you look carefully at the image I linked to, the text and arrow image aren't well centered vertically. It look better in Safari. I know vertical centering is a bit annoying but is there a better way to go about this structure/style? Sorry. The structure I'm currently using is just this: a href= class=buttonLearn More/a -- 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] button using text and graphic
On Wed, Sep 3, 2014 at 11:32 AM, Tom Livingston tom...@gmail.com wrote: If you look carefully at the image I linked to, the text and arrow image aren't well centered vertically. It look better in Safari. I know vertical centering is a bit annoying but is there a better way to go about this structure/style? Sorry. The structure I'm currently using is just this: a href= class=buttonLearn More/a Incidentally, the image is a screenshot from current Firefox mac -- 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] button using text and graphic
In addition: background-position: 100% 50%;
and again, use em, rem instead of px for the padding.
and adding the arrow in with '::after' should be flexible enough to
work.
Not great for AT, if you use the 'content' property; if you use a
background image on the ::after element, you'll have the same issues in
terms of sizing positioning.
Philippe
Also, I can't use background-position: 100% 50%; in this case as the arrow
is a sprite which changes position on hover. The sprite is an image of two
different colored arrows that move up and down on hover via
background-position.
.button{
background-position: 100% 0;
}
.button:hover{
background-position: 100% -43px;
}
--
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] CSS Shapes
Good morning fellow listers, CSS Shapes. No doubt this will be something I'm asked to do in a page layout soon. I was just watching this demo of a new Chrome extension: http://razvancaliman.com/writing/css-shapes-editor-chrome/ A very handy thing indeed, but... my first thought when seeing the coffee cup layout on that page is how do you provide a fallback for that? Anyone? -- 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 Shapes
On Thu, Sep 4, 2014 at 8:32 AM, Tom Livingston tom...@gmail.com wrote: Good morning fellow listers, CSS Shapes. No doubt this will be something I'm asked to do in a page layout soon. I was just watching this demo of a new Chrome extension: http://razvancaliman.com/writing/css-shapes-editor-chrome/ A very handy thing indeed, but... my first thought when seeing the coffee cup layout on that page is how do you provide a fallback for that? Anyone? -- I'll add that it seems like a significant layout change or at least swap images for ones that allow text to run over them and still allow for legibility. I also see modernizr being used as well. Anything 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/
Re: [css-d] CSS Shapes
On Thu, Sep 4, 2014 at 8:58 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 4 sept. 2014 à 21:32, Tom Livingston tom...@gmail.com a écrit : No doubt this will be something I'm asked to do in a page layout soon. I was just watching this demo of a new Chrome extension: http://razvancaliman.com/writing/css-shapes-editor-chrome/ A very handy thing indeed, but... my first thought when seeing the coffee cup layout on that page is how do you provide a fallback for that? Perhaps this: http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/ Also this gallery by the folks who implemented it in WebKit/Bink/Firefox: http://blogs.adobe.com/webplatform/2014/05/13/good-looking-shapes-gallery/ Philippe -- Philippe Wittenbergh http://l-c-n.com/ Thanks Philippe. I was hoping it wouldn't be another polyfill. I use picturefill.js (and subsequently matchmedia.js), as I feel it's use is ultimately for the greater good, but I'm not a fan of polyfills. If I can avoid adding any weight, then all the better. I don't use modernizr in every project either - though it's very handy - but shapes seem like a tough thing to do a fallback for without it. A fallback for shapes looks like a bit of work, as opposed to the fallback for rem units, for example. Seems like using modernizr to help you swap images with something that allows legible text to run over it would be simplest. Next would be layout changes, moving the images to another place on the page so the text doesn't crash into it. Obviously it depends on each situation... -- 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] button using text and graphic
On Thu, Sep 4, 2014 at 9:29 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
Le 4 sept. 2014 à 00:31, Tom Livingston tom...@gmail.com a écrit :
If you look carefully at the image I linked to, the text and arrow image
aren't well centered vertically. It look better in Safari. I know
vertical
centering is a bit annoying but is there a better way to go about this
structure/style?
subpixel positioning - depends on the rendering engine and is platform
dependent (and resolution dependent). Not much you can do about it.
One possibility: set the line-height to '1' on the element. Might help a
little by making the line box the same size as the font-size.
Le 4 sept. 2014 à 00:50, Tom Livingston tom...@gmail.com a écrit :
Also, I can't use background-position: 100% 50%; in this case as the
arrow
is a sprite which changes position on hover. The sprite is an image of
two
different colored arrows that move up and down on hover via
background-position.
.button{
background-position: 100% 0;
}
.button:hover{
background-position: 100% -43px;
}
sigh I rarely use those things :-) (hate hover effects with a passion).
In the future, CSS blend modes may alleviate the need for multiple images…
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Thank you! I'll give the line-height suggestion a test. Not sure why I
didn't think of that... :-/
--
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] button using text and graphic
One possibility: set the line-height to '1' on the element. Might help a
little by making the line box the same size as the font-size.
Le 4 sept. 2014 à 00:50, Tom Livingston tom...@gmail.com a écrit :
Also, I can't use background-position: 100% 50%; in this case as the
arrow
is a sprite which changes position on hover. The sprite is an image of
two
different colored arrows that move up and down on hover via
background-position.
.button{
background-position: 100% 0;
}
.button:hover{
background-position: 100% -43px;
}
sigh I rarely use those things :-) (hate hover effects with a passion).
In the future, CSS blend modes may alleviate the need for multiple images…
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Thank you! I'll give the line-height suggestion a test. Not sure why I
didn't think of that... :-/
That took some of the sting out of it. Thanks again.
--
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] Centering menu items responsively
I'm not near a computer but won't text-align:center on the ul work? On Friday, September 5, 2014, J.C. Berry jcharlesbe...@gmail.com wrote: OK don't judge me - well actually do http://www.xifin.com/solutions/xifin-technology/portals Not fine-tuned but there it is. On Fri, Sep 5, 2014 at 3:38 PM, Jon Reece jon.re...@gmail.com javascript:; wrote: On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry jcharlesbe...@gmail.com javascript:; wrote: I have 3 menu items that look like this on full width of site X X X If I want to reduce to a phone width I get X X X But what about the in-between (tablet, etc.) alignment? Right now I get: X X X And I want X X X i.e. Centered second row. How can I? Since we can't see your actual code, it's hard to say. But, based on your diagram - are you floating the menu items? If so, you might want to try display: inline-block instead. Then, setting left and right margins to auto should give you the centering you want. Here's a quick example, this assumes you are setting a fixed width on the menu items: http://codepen.io/jreece/pen/EKJrd?editors=110 -- Jon Reece jon.re...@gmail.com javascript:; -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com javascript:; 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. __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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] a img tag being overwritten?
The a is a stylable element independent of the img.
On Wednesday, September 10, 2014, John j...@coffeeonmars.com wrote:
On Sep 10, 2014, at 6:49 PM, Georg ge...@gunlaug.com javascript:;
wrote:
The border is on the link, not the image.
If you don't want borders on links with images in them, you can add a
class to those links that states that.
Example:
[a class=img] [img href=... alt=...] [/a]
a.img {border: none;}
Thank you, Georg; I made an .img class per your example and that had no
effect, but I’m puzzled by something you said that the border is on the
link not image; isn’t the stuff between the opening and closing a tags the
“link?” Be that a word or an image?
I do get the idea you’re talking about and maybe something is overrulling
my rules?
John
__
css-discuss [css-d@lists.css-discuss.org javascript:;]
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] a img tag being overwritten?
On Wed, Sep 10, 2014 at 10:32 PM, John j...@coffeeonmars.com wrote:
On Sep 10, 2014, at 7:21 PM, Tom Livingston tom...@gmail.com wrote:
The a is a stylable element independent of the img.
OK..then would that mean that an empty a tag would have an underline?
a class=“has-border-bottom” href=“#”/a
^^ this would produce the bottom border of some length, even tho nothing
is between the a tags?
No because it's wrapping nothing. It's empty. Even if you gave it a width
and a height, it's won't show a text-decoration or border unless you put a
character in it. And, at least in FF, a space isn't even good enough to
make the decoration show. But that doesn't mean it's not a style-able
element.
Or do you mean that, when something IS between the a tags, that the
resulting bottom-border is on the a tag and not on what’s between the a
tags?
Yes. In the case of a href=img src=myimg.jpg //a to remove
text-decoration, you add text-decoration: none; to the a not the img.
In the case of:
a img{border: none;}
This is actually valid in some cases as some email clients (and older
browsers maybe, I can't recall right now) will add a blue border around
images that are wrapped in an a. But that's different than what you
originally asked.
Sorry..I’m getting a bit loopy here..trying to understand.
Thank you!
John
--
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] a img tag being overwritten?
On Wed, Sep 10, 2014 at 11:11 PM, Tom Livingston tom...@gmail.com wrote: On Wed, Sep 10, 2014 at 10:32 PM, John j...@coffeeonmars.com wrote: On Sep 10, 2014, at 7:21 PM, Tom Livingston tom...@gmail.com wrote: The a is a stylable element independent of the img. OK..then would that mean that an empty a tag would have an underline? a class=“has-border-bottom” href=“#”/a ^^ this would produce the bottom border of some length, even tho nothing is between the a tags? No because it's wrapping nothing. It's empty. Even if you gave it a width and a height, it's won't show a text-decoration or border unless you put a character in it. And, at least in FF, a space isn't even good enough to make the decoration show. But that doesn't mean it's not a style-able element. Or do you mean that, when something IS between the a tags, that the resulting bottom-border is on the a tag and not on what’s between the a tags? Yes. In the case of a href=img src=myimg.jpg //a to remove text-decoration, you add text-decoration: none; to the a not the img. Reading this over again, a href=img src=myimg.jpg //a wouldn't have any text-decoration anyway. -- 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] a img tag being overwritten?
I guess you would if the images wasn't found. Alt text would get decorated?
Can't check right now.
On Thursday, September 11, 2014, Philippe Wittenbergh e...@l-c-n.com
wrote:
Le 11 sept. 2014 à 18:56, MiB digital.disc...@gmail.com javascript:;
a écrit :
sep 11 2014 05:19 Tom Livingston tom...@gmail.com javascript:;:
Reading this over again, a href=img src=myimg.jpg //a wouldn't
have any text-decoration anyway.
If you write compliant code it would, at least in a non webkit browser
like Firefox:
a href=#img src=myimg.jpg alt=”My Image /a
Uh ? Does Firefox apply a text-decoration in that case ? That would
non-compliant (I thought they had that fixed aeons ago, and Firefox doesn't
show any text-decoration over here). The situation with border-bottom is of
course different.
CSS 2.1
http://www.w3.org/TR/CSS21/text.html#decoration
CSS3 Text-decoration module
http://dev.w3.org/csswg/css-text-decor/#line-decoration
Quote ( present in both docs):
Atomic inlines, such as images, are not decorated.
Assuming a[href] { text-decoration: underline; } (which is the default…)
Or do I miss something?
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org javascript:;]
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/
[css-d] Fwd: a img tag being overwritten?
-- Forwarded message -- From: *MiB* digital.disc...@gmail.com Date: Thursday, September 11, 2014 sep 11 2014 13:33 Tom Livingston tom...@gmail.com javascript:_e(%7B%7D,'cvml','tom...@gmail.com');: I guess you would if the images wasn't found. Alt text would get decorated? Can't check right now. That is what is happening and is on spec as far as I know. So yes, you'd get decoration on an image... If the image wasn't found and there is alt text. -- 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] a img tag being overwritten?
...and it's wrapped in an a. On Thursday, September 11, 2014, Tom Livingston tom...@gmail.com wrote: -- Forwarded message -- From: *MiB* digital.disc...@gmail.com javascript:_e(%7B%7D,'cvml','digital.disc...@gmail.com'); Date: Thursday, September 11, 2014 sep 11 2014 13:33 Tom Livingston tom...@gmail.com: I guess you would if the images wasn't found. Alt text would get decorated? Can't check right now. That is what is happening and is on spec as far as I know. So yes, you'd get decoration on an image... If the image wasn't found and there is alt text. -- 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] how to locate un-used CSS?
https://unused-css.com/ On Thu, Sep 11, 2014 at 9:05 AM, John j...@coffeeonmars.com wrote: Is there a way to determine which CSS are not being used by a site? I am using TextWrangler, so I am on my own in terms of trying to keep track what thing is used where - unlike Dreamweaver which may alert the author to unused styles, images, etc. Thank you! 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] Call Button CSS not working in all browsers
Two things. You might want to check support for 'run-in'. Will
display:inline; work?
Also, those two MQs result in the same thing. Seems unnecessary to have
both.
On Saturday, September 13, 2014, Paul cssl...@bassonhook.com wrote:
Hello everyone, I am relatively new to responsive design and css with
media queries and have used an online tool to generate my template and
then customized it as I went along to try and learn. I seem to have it
working well as far as I can see without actually viewing on smart phones
but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16. Not sure about
older browsers.
The code I used is this:
html - a href=tel:1-555-555-img class=call
src=images/callbutton.png alt=call button //a
css - .call {display:none;}
media query - /* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and
(orientation: landscape){.call {display:run-in; }}
and
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {.call {display:run-in; }}
Site can be viewed temporarily at:
http://www.sportsmanfishing.com/webdev/index.html
Any help greatly appreciated!
Paul
__
css-discuss [css-d@lists.css-discuss.org javascript:;]
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] Call Button CSS not working in all browsers
Also, the button works on my iPhone 5s.
On Saturday, September 13, 2014, Paul cssl...@bassonhook.com wrote:
Hello everyone, I am relatively new to responsive design and css with
media queries and have used an online tool to generate my template and
then customized it as I went along to try and learn. I seem to have it
working well as far as I can see without actually viewing on smart phones
but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16. Not sure about
older browsers.
The code I used is this:
html - a href=tel:1-555-555-img class=call
src=images/callbutton.png alt=call button //a
css - .call {display:none;}
media query - /* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and
(orientation: landscape){.call {display:run-in; }}
and
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {.call {display:run-in; }}
Site can be viewed temporarily at:
http://www.sportsmanfishing.com/webdev/index.html
Any help greatly appreciated!
Paul
__
css-discuss [css-d@lists.css-discuss.org javascript:;]
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] Call Button CSS not working in all browsers
On Saturday, September 13, 2014, Paul cssl...@bassonhook.com
javascript:_e(%7B%7D,'cvml','cssl...@bassonhook.com'); wrote:
Hello everyone, I am relatively new to responsive design and css with
media queries and have used an online tool to generate my template and
then customized it as I went along to try and learn. I seem to have it
working well as far as I can see without actually viewing on smart phones
but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16. Not sure about
older browsers.
The code I used is this:
html - a href=tel:1-555-555-img class=call
src=images/callbutton.png alt=call button //a
css - .call {display:none;}
media query - /* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and
(orientation: landscape){.call {display:run-in; }}
and
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {.call {display:run-in; }}
Site can be viewed temporarily at:
http://www.sportsmanfishing.com/webdev/index.html
I usually develop mobile first with all my base styles for phone width. My
first break point MQ is usually 'min-width: 30em' (480px).
--
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] Call Button CSS not working in all browsers
On Saturday, September 13, 2014, Paul cssl...@bassonhook.com wrote: I remember reading that somewhere also so I will give a try on my next go. Should I be using em instead of px? Brad Frost explains: http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/#relative -- 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] IE8/Netrenderer reveals huge problems
Are you loading an html5shiv or modernizr? Could be the problem if you aren't... On Tue, Sep 16, 2014 at 3:50 PM, John j...@coffeeonmars.com wrote: I just looked at a site I’m developing in IE 8 using Netrender and it looks like an 18-car pile up…very not pretty. IE 9, 10, 11 appear to draw the page the way other browsers do. Is IE8 a browser of concern anymore, IOW, should I work hard to fix whatever is messing up my site in IE8, or will this mess up my site in modern, well-behaved browsers? Thanks for any thoughts on this! John for the curious: http://netrenderer.com/?browser=ie8url=http://www.coffeeonmars.com/170_su/client/category/design/ __ 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] IE8/Netrenderer reveals huge problems
On Tue, Sep 16, 2014 at 3:59 PM, Tim Arnold tim.arn...@gmail.com wrote: On Tue, Sep 16, 2014 at 3:50 PM, John j...@coffeeonmars.com wrote: I just looked at a site I’m developing in IE 8 using Netrender and it looks like an 18-car pile up…very not pretty. IE 9, 10, 11 appear to draw the page the way other browsers do. Is IE8 a browser of concern anymore, IOW, should I work hard to fix whatever is messing up my site in IE8, or will this mess up my site in modern, well-behaved browsers? Thanks for any thoughts on this! John for the curious: http://netrenderer.com/?browser=ie8url=http://www.coffeeonmars.com/170_su/client/category/design/ __ I'm guessing the pile-up is due to using REMs for layout (or anything). IE8 doesn't know what to do with a REM. That said, I always look to the analytics to determine browser support. Not general, internet-wide, analytics, but ones specific to the audience I'm building for. I mostly work for non-profits and occasionally come across cases where decent IE8 support is required. Tim Just add a fallback, if this is the issue: font-size: 16px; font-size: 1rem; -- 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] IE8/Netrenderer reveals huge problems
No, you don't need modernizr too. IMHO It's well worth adding the px fallback instead of converting rems to ems. You'll still avoid the compounding issue you get with ems, and you'll gain a decent layout in IE8. On Tue, Sep 16, 2014 at 4:09 PM, John j...@coffeeonmars.com wrote: On Sep 16, 2014, at 12:59 PM, Tim Arnold tim.arn...@gmail.com wrote: I'm guessing the pile-up is due to using REMs for layout (or anything). IE8 doesn't know what to do with a REM. This is so weird…I spend about an hour or two converting all my ems to rems to combat a parent/child % type size problem (children were progressively smaller and smaller on WordPress comments).. So, sounds like, if rems are my problem, I need to go back to ems and otherwise solve the parent/child type sizing issue? J __ 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] IE8/Netrenderer reveals huge problems
On Tue, Sep 16, 2014 at 4:16 PM, John j...@coffeeonmars.com wrote: On Sep 16, 2014, at 1:11 PM, Tom Livingston tom...@gmail.com wrote: IMHO It's well worth adding the px fallback instead the px fallback being to add font-size: 16px; font-size: 1rem; to my css up at the top, right? Does this also set 1rem equal to 16px? No no. For each use of rem, you need to add a px fallback. The above was just an example of it... -- 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] IE8/Netrenderer reveals huge problems
Correct. On Tue, Sep 16, 2014 at 4:25 PM, John j...@coffeeonmars.com wrote: On Sep 16, 2014, at 1:21 PM, Tom Livingston tom...@gmail.com wrote: the px fallback being to add font-size: 16px; font-size: 1rem; to my css up at the top, right? Does this also set 1rem equal to 16px? No no. For each use of rem, you need to add a px fallback. The above was just an example of it... Ah..that’s right..sorry..it’s so that IE8 will ignore the rem but will happily use the px, and by putting the rem size afterward, “modern” browsers will use rem, not px. J -- 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] rem units and %
On Tuesday, September 16, 2014, John j...@coffeeonmars.com wrote: On Sep 16, 2014, at 2:29 PM, Jukka K. Korpela jkorp...@cs.tut.fi javascript:; wrote: Percentages have their use, but for margin and padding, they are mostly unsuitable. The padding between text and the edge of an element should relate to the font size, not the total width of something. Thank you, Jukka….I don’t expect anyone here to be a mind-reader, but why do so many advocate using % for margin and padding? what is a proper use of % for margin and padding? is it for something like the width of a content div which you want to be 66.7% the width of its container? thank you! John ___ Some will use % for margin or padding in a fluid grid. For example, based on a max content width of 960px, a two column layout might have a main col of 650px, a side bar of 250 and a gutter of 60. Using percentages, that would be 67%, 26% and 6% with 1% wiggle room (I don't recommend making everything add up to exactly 100% because of differences in browser renderings). -- 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] Webkit syntax for stopped linear gradient
I use this: http://www.colorzilla.com/gradient-editor/ On Tue, Sep 16, 2014 at 7:36 PM, Tim Dawson t...@ramasaig.com wrote: I'm trying to create a cross-browser stopped linear gradient, but can't get the -webkit- syntax right despite the reference books. The 'gradient' is to have #1B91FF (a blue) in the top 60%, and #FEC409 (a yellow) in the bottom 40%. There should be a sharp division between the colours. For the standards version I've got: background-image: linear-gradient(top, #1B91FF 60%, #FEC409 60%, #FEC409 100%); it works perfectly in Firefox (32), but not in Chrome 37 (which I thought it should ?) For the webkit version I've tried several variants on: background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #1B91FF), color-stop(60%, #1B91FF), color-stop(60%, #FEC409), color-stop(100%, #FEC409) ); but it produces nothing (not even a wrong gradient). I hope my error is only a small one, but can someone put me right, please ? Regards, Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ 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] rem units and %
On Tuesday, September 16, 2014, John j...@coffeeonmars.com wrote: so, if rem units are specifically for type and not for positioning, then what about things like line-height? Should line-height be expressed in rems if the font-size is expressed in rems? I would think so, since line-height acts on the type, rather than on the type’s container..but I am not the oracle.. ;-) Thank you, John As far as I know, it's best to leave line height unit-less. From: http://css-tricks.com/almanac/properties/l/line-height/ 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. -- 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] More ems fun!
Seems like a compounding issue. I don't really recommend putting your h2 inside your h1. On Wed, Sep 17, 2014 at 2:19 PM, John j...@coffeeonmars.com wrote: I have a situation in which I modified my header logo and tag line to be wrapped in an h1 tag and now it seems that my alignment of header elements doesn’t respect the left edge they had before, and the value of em seems to be way off…I increased my tag line to enable the line not to break by making width 25ems (400 px) but that box now goes almost the width of the wrapper! I have divs with colored outlines..can anyone help me to see what is at work here? link: http://www.coffeeonmars.com/170_su/client/ Thank you. 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] More ems fun!
If not compounding then it's the relation of the width in ems and the font-sizes. EMs used for things other than font-size (like width or margin) are relative to the font-size of *the element it is applied to*. On Wed, Sep 17, 2014 at 2:19 PM, John j...@coffeeonmars.com wrote: I have a situation in which I modified my header logo and tag line to be wrapped in an h1 tag and now it seems that my alignment of header elements doesn’t respect the left edge they had before, and the value of em seems to be way off…I increased my tag line to enable the line not to break by making width 25ems (400 px) but that box now goes almost the width of the wrapper! I have divs with colored outlines..can anyone help me to see what is at work here? link: http://www.coffeeonmars.com/170_su/client/ Thank you. 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] More ems fun!
On Wed, Sep 17, 2014 at 4:31 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Span tags inside an H1 is suppose to help SEO, that would be news to me !
John wrote:
h1
a href=index.php
spanMy Headline Text/span !-- for SEO --
img src=images/logo.jpg id=logo
alt=My Headline Text!-- for screen readers --
width=XXX height=YYY /
/a
/h1
h1 span {
display:none;
}
/* h1 text inside the span tag does not visually display,
It's not the span tag that's good, it's the text it wraps. Though I'm
not sure how much better it is over the alt text of the image. Anyone
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] More ems fun!
The span is display none. Not the whole h1.
On Thu, Sep 18, 2014 at 1:01 AM, Crest Christopher
crestchristop...@gmail.com wrote:
The image is suppose to be seen, but it's not seen because the display is
set to none, but it's in a H1 so it works for SEO, but the image doesn't
display, hrm ?
Karl DeSaulniers wrote:
On Sep 17, 2014, at 4:28 PM, Tim Climistim.cli...@gmail.com wrote:
h1 span{
display:none;
}
prevents that from being seen (because the logo presumably says Bob's
hot
dog palace) but since it's in an h1, you get thebenefits of better
SEO
results..that is my understanding of why to use this technique.
Why not just h1 {display:none} ?
---Tim
Probably so your actual text headers don't disappear while wrapping
everything else with them.
Karl
Sent from losPhone
__
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] rem units and %
On Wed, Sep 17, 2014 at 3:49 PM, John j...@coffeeonmars.com wrote: On Sep 16, 2014, at 7:35 PM, Eric e...@minerbits.com wrote: Did you read on this list that the REM unit is only for type? - It's a relative unit like any other relative unit. I use it for everything except element widths (they get %s) and line-height that should be unitless. No, I mean that in my gathering information about proper use of rems, I’m looking far and wide (online, people I know) and there is a disagreement as to how rem units should be used. As I take this site responsive, I’m going with % also. Thank you, John __ I haven't heard any arguments about not using rem for anything but font-size until this thread. I've only heard that it's no different than using em, except for the lack of the compounding issue associated with em. And that's a really good thing. -- 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] after pseudo-class and link
On Wed, Sep 17, 2014 at 11:32 PM, Dave Solko d...@pixelalchemy.com wrote: Is it possible to add a link to the :after? I'm adding an image via :after, and I want to make it clickable. Is this possible? Using WP, and it's not possible to add the image without hacking the template. However, it's easy to add it to the css, that's why the convoluted solution. Dave Solko Pixel Alchemy d...@pixelalchemy.com 513.300.2165 Without seeing code... You're adding the image after an element, so can you wrap that element in an a href? You would be adding the image after the element, but it would be inside the a. A quick test with adding some text after an element worked for me in latest Mac FF/Chrome. 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] after pseudo-class and link
On Thu, Sep 18, 2014 at 9:17 AM, Chris Rockwell ch...@chrisrockwell.com wrote:
I assume you're adding this as a background-image, is that correct?
Something like:
div:after {
content: ;
background-image: url('');
}
You can't add tags to an :after. If this is something you *need* to link
to, I would suggest adding it to the markup proper (wp template) as that is
where it belongs.
Chris Rockwell
On Wed, Sep 17, 2014 at 11:32 PM, Dave Solko d...@pixelalchemy.com wrote:
Is it possible to add a link to the :after?
I'm adding an image via :after, and I want to make it clickable. Is this
possible?
Using WP, and it's not possible to add the image without hacking the
template. However, it's easy to add it to the css, that's why the
convoluted solution.
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
Can you add the image as base64 in the content: : rule?
--
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] after pseudo-class and link
On Thu, Sep 18, 2014 at 9:28 AM, Tom Livingston tom...@gmail.com wrote:
On Thu, Sep 18, 2014 at 9:17 AM, Chris Rockwell ch...@chrisrockwell.com
wrote:
I assume you're adding this as a background-image, is that correct?
Something like:
div:after {
content: ;
background-image: url('');
}
You can't add tags to an :after. If this is something you *need* to link
to, I would suggest adding it to the markup proper (wp template) as that is
where it belongs.
Chris Rockwell
On Wed, Sep 17, 2014 at 11:32 PM, Dave Solko d...@pixelalchemy.com wrote:
Is it possible to add a link to the :after?
I'm adding an image via :after, and I want to make it clickable. Is this
possible?
Using WP, and it's not possible to add the image without hacking the
template. However, it's easy to add it to the css, that's why the
convoluted solution.
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
Can you add the image as base64 in the content: : rule?
--
Not rule but declaration...
--
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] after pseudo-class and link
On Thu, Sep 18, 2014 at 9:49 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 18 sept. 2014 à 22:28, Tom Livingston tom...@gmail.com a écrit : Can you add the image as base64 in the content: : rule? How would that help in making the image a link? I guess I was adding this to my comment of adding an a around the element that the :after was applied to. With that and if the base64 was possible, then the scenario the OP was describing *may* work. Ultimately, I agree that the img should just be added to the markup. -- 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] rem units and %
On Thu, Sep 18, 2014 at 10:53 AM, John j...@coffeeonmars.com wrote: On Sep 18, 2014, at 5:47 AM, Tom Livingston tom...@gmail.com wrote: I haven't heard any arguments about not using rem for anything but font-size until this thread. I've only heard that it's no different than using em, except for the lack of the compounding issue associated with em. And that's a really good thing. Such as that problem I had yesterday, where em values seemed to double in the spot where I had an h2 enclosed by my h1? John That's what it looked like to me, yes. -- 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] iFrame Tag Error in Validation
Anything in the structure BEFORE the iframe amiss? On Fri, Sep 19, 2014 at 2:18 PM, Crest Christopher crestchristop...@gmail.com wrote: I have an opening and closing iframe tag, but the validator is giving this error; Saw when expecting an attribute name. Probable cause: Missing immediately before. My code: iframe class= src=div/div/iframe __ 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] rem units and %
On Fri, Sep 19, 2014 at 4:12 PM, Felix Miata mrma...@earthlink.net wrote: Norman Fournier wrote on 2014-09-19 13:46 (GMT-0600): the problem stated in the post is solved by CSS and media queries, not created by it. Actually, media queries have compounded the problems of CSS overuse. I doubt many practitioners using them have tested against user CSS to see how a UA deals with the multiplied conflicts. Gecko (at least; on Linux there is neither Safari nor IE, and Chrom* UI is useless in high DPI DEs, leaving it up to Konq, SeaMonkey and Firefox to hold down the fort) has the ability to remember zoom level on a per domain basis. Yet, multiple large domains I frequent have font sizes jumping all over the place, both literally and figuratively, only since queries were implemented on those domains. Despite the UA memory, or maybe because of it, I'm forced to change zoom levels both up and down when switching among multiple simultaneously open tabs on domains employing queries. e.g. newegg.com. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.com/ Quickly resizing my browser width, I don't notice any MQs on the newegg site as far as I can tell. What I do see is failure to accommodate larger font sizes in the layout and therefore things over flow their containers or get cropped. That's poor planning. This is failure on the designers/devs part. Not CSS's. Is CSS responsible for the containers not flexing? Technically, yes. Did it get into the site by itself and mess things up? No. It was used incorrectly. -- 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] First-Child
Like Philip asked, first child of what?
ul
li/li -- first-child of UL
li/li
/ul
div
p/p -- first-child of div
p/p
/div
aside
header/header -- first-child of aside
div/div
aside
etc.
On Fri, Sep 26, 2014 at 10:04 AM, Crest Christopher
crestchristop...@gmail.com wrote:
::First-child of the body, not of the div#t3, news to me. You can't have
::first-child of the div#t3, it is always of the body ?
::first-child {outline dotted lime;} didn't display ?
Philippe Wittenbergh wrote:
Le 26 sept. 2014 à 22:36, Crest Christophercrestchristop...@gmail.com a
écrit :
Hi, I've been understanding the pseudo-class elements, I like their
functionality. I have a question, here is an code
examplehttp://jsfiddle.net/bpL490pn/embedded/result/, which is the
first-child ?
div#t3 is the first-child of body
p.rt is the first-child of div#t3
Very quick debug tip:
:first-child { outline: 1px dotted lime; }
And are there any tools that aid in helping you know what is the first
child, decedent children for FireFox or Chrome, as a helper tool in the
beginning ?
Developer tools for each browser ?
Spec ?
http://www.w3.org/TR/css3-selectors/#first-child-pseudo
MDN usually has decent explanation:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
Philippe
--
Philippe Wittenbergh
http://l-c-n.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] Grid Columns and Frustrations
On Thu, Oct 2, 2014 at 8:31 PM, Crest Christopher crestchristop...@gmail.com wrote: When using a Grid FrameWork must you keep all the column classes and gutters or that is only needed when designing ? I don't understand about grids, columns and gutters is if you use a grid template with the columns and gutters within Ps and place your graphics on the grid template, what good does it help ? I mean you still are going to position things where you want them and how you want them and CSS doesn't have a snapping feature that for example means you want a graphic here or there. Instead have a grid template which you designed your site http://line25.com/tutorials/create-a-gnarly-snowboarding-themed-web-design on top, now your ready to build your page, you being to create your div, headers etc, you cut up your graphics and now how do you translate the design from the PSD to your grid, so you get an exact representation of your site whether it's a responsive site or not ? I understand how a grid works in design, not so much in css because you have gutters, except in design it's a little easier you can essentially snap your graphics and designs in place, there is no code involved. I do not use a framework or official grid system like 960.gs and similar. One could argue that my home-grown established starting point for webpages is a framework of sorts, but I'm not so sure. I call it a template. When I get a design to start building, I measure it and recreate the look and spacing etc as I see best fits the build. So if it's a 2 column layout for example I'll figure out how to code elements that will create that layout in HTML. Two floats, one main one and a sidebar, widths based on percentages that will achieve the design. I always build responsive pages now so that has an impact on how I recreate a layout in code. This isn't to say real frameworks can't do this, I just never liked what was involved in implementing frameworks (a lot of classes I don't need, extra css, etc...). I have crazy tight deadlines, so I need to go with what works for me, with what I know, and what I can get done in time. -- 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] Grid Columns and Frustrations
http://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/ On Friday, October 3, 2014, Crest Christopher crestchristop...@gmail.com wrote: Patrick you're explanations, are, well, lacking ! , Karl DeSaulniers Design Drumm http://designdrumm.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/ patrick mailto:patr...@iampms.com Friday, October 03, 2014 6:13 PM You don't have one grid You have a framework -- homegrown or adapted, whichever -- that allows you the flexibility to realize any design. Karl DeSaulniers mailto:k...@designdrumm.com Friday, October 03, 2014 4:06 PM Ok, I think I need to be more specific. I am aware of the hand-off from design to dev. I want to know how do you translate a grid PSD to html? What is the formula for adapting to these gutters? Ensuring the correct layout using Bootstrap or the like for example? How do you adapt custom designs to this layout that may or may not fit this grid? Or do all your sites have to look like they were built in Wordpress.. lol. Best, Karl DeSaulniers Design Drumm http://designdrumm.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] Grid Columns and Frustrations
On Saturday, October 4, 2014, patrick patr...@iampms.com wrote: On 10/4/2014 12:14 am, Crest Christopher wrote: Suppose I download a 960 framework, I design my site on top. I now want to start building the site and complete it in, I suppose two weeks time. How do I translate the design from a image template to the development stage ? I've watched many tutorials on this subject but the details that I and many are concerned with are never explained, it can be those details that makes it or breaks it from understanding something. Ahh, okay -- here's where I misunderstood you. It may sound trite, but there is no substitute for experience. It's like having a set of drawings for a house and then watching a video about home construction. You can do it that way, but it might take a bit longer. You will really benefit by just trying it. Start (relatively) easily with a popular framework/grid and try to build one page of your design -- the simplest component (say the mobile version of your simplest page). Developing mobile first can make it easier, since it's easier to add than it is to remove (this is totally over-simplified, but you get the idea). Does this help? Or am I still off? -- //patrick http://iampms.com __ Agreed. Just do it. Try it. The framework creates the layout - two columns etc - and you put your content in where it goes. At that point you may have more specific issues that might be more easily helped with here on the list like how do I get this image to break out of its grid column as a design element etc. -- 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] Grid Columns and Frustrations
On Monday, October 6, 2014, Crest Christopher crestchristop...@gmail.com wrote: I was throwing random ideologies that exist as questions. The basis of CSS I know, I may not have it all memorized but I know what is possible, if it's advanced css, I may be rusty, but once again, I know what is possible. You don't need a grid frame work, obviously, although if you want to build a responsive site they say it will help with the development. I only build responsively now and I don't use a framework. -- 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] custom fonts not working in Chrome
Might be your @font-face. Try this: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax On Tuesday, October 7, 2014, Stuff @ arnoenzerink.com st...@arnoenzerink.com wrote: Hi list, I made a new website in which I used custom fonts. It works in Firefox, Opera and IE, but in Chrome the fonts default to the standard webfont. Not sure if I'm missing something. Website: http://www.reconnectdiscover.com CSS: http://www.reconnectdiscover.com/css/styles.css Any pointers would be greatly appreciated! Arno __ 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] Grid Columns and Frustrations
Just gonna throw this out here for FYI/Reference purposes, just in case: http://sudheerdev.github.io/Foundation5CheatSheet/ -- 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] Dropdown menu not working on Safari
.responsive_menu in anse_style_combined.css, line 47, has
overflow:hidden; disabling that in Safari Inspector allowed the menus
to show.
HTH
On Thu, Oct 9, 2014 at 11:28 AM, GJim jarne...@wyomerc.com wrote:
Howdy Yasha,
~~~
Thursday, October 9, 2014, 11:20:58 AM (USA 'Somewhere on-the-road
time-zone'),
you wrote the message that appears below.
My reply appears here and/or interspersed within your message.
~~~
On Firefox, Chrome, and all other browsers, the drop down menu works fine
however on Safari, for some reason the drop down menu displays behind the
slider and is therefore unclickable and can’t even be seen. I can’t seem to
find a fix for this, do you know of anything that could work?
Are you using the Apple version, or the Windows version, of Safari?
If Windows, that version of Safari is out-dated and no further development
will
take place (AFAIK).
I no longer test against Safari, although I do have an associate who uses an
Apple machine and can test.
G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com
Savvy ponderable:
A man who confesses to small faults hopes you will think he has no big ones.
---
This email is free from viruses and malware because avast! Antivirus
protection is active.
http://www.avast.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] Sizing for different viewers/devices
On Mon, Oct 13, 2014 at 3:47 PM, Del Wegener d...@delweg.com wrote: Good Day; I would like to size a body element so that it takes up about 20% of the viewport on a 22in monitor and takes up about 99% of the viewport on a cellphone. Look at http://www.drdelmath.com/study_aids/flash_cards/flash_card_presenter.html Aside from having to deal with layout issues on a phone/small table as it is, you could have the flashcard's container have width: 95%; (or whatever you need) as a base style (mobile-first), then within a media query for your large widths, add a max-width: 600px; (or whatever you need). HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com #663399 __ 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] Sizing for different viewers/devices
On Tue, Oct 14, 2014 at 4:05 PM, Del Wegener d...@delweg.com wrote: Tom I think I am started on the road you suggested. It has been 2 or 3 years since I have had the opportunity to develop a website. I am rusty and there have been significant changes in CSS, HTML, and JavaScript. So I am a bit behind the curve right now. Will someone take a look at http://www.drdelmath.com/study_aids/flash_cards_revisons/flash_card_presenter.html (The colors are to help me trace the divs.) How does it look on small devices? It presents reasonably well on my Galaxy S4. My ultimate goal is a page that looks like http://www.drdelmath.com/study_aids/flash_cards/flash_card_presenter.html on all devices. Del, It appears you are missing this: meta name=viewport content=width=device-width, initial-scale=1.0 which will render the page as I think you wish on devices. Take a look at it on your small device with and without this line. Here's reference: http://www.quirksmode.org/mobile/metaviewport/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com #663399 __ 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] Sizing for different viewers/devices
On Thu, Oct 16, 2014 at 10:03 AM, Del Wegener d...@delweg.com wrote: All; Please take a look at http://www.drdelmath.com/study_aids/flash_cards_revisons/flash_card_presenter.html (The colors are to help me trace the divs.) Does it work okay? What breaks it? In what way does it break? I have followed Tom and Phillip's advice and that helped. Thanks. Is this a good candidate for HTML5? Del; If, by asking if this is a good candidate for HTML5 you're really asking if this should be done in something like Flash, I'll say yes, it is a *good* candidate for HTML5. There's very little on the web, IMHO, that shouldn't be done with responsive HTML. With the prevalence of mobile devices - especially with younger people - web pages should be responsive HTML (or, if warranted, a native app). Your page is looking much better here - provided flash card content will work in a mobile portrait orientation. Scrolling card content works on my iPhone but a scroll bar is not visible for me. This might cause users to not know scrolling is possible. HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com #663399 __ 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] Grid System
Gutters are there to space out items that are in adjacent columns. Two vertical columns of text for example. You wouldn't want those to columns to touch each other. On Saturday, October 18, 2014, Crest Christopher crestchristop...@gmail.com wrote: I have a css grid question, using this image http://www.webdesignerwall. com/wp-content/uploads/2010/09/978-grid.gif as an example. The 12 columns, including the gutters is a row correct ? I understand that you can span your content, or images, which must never have a width, XX number of columns for page layout. In the example image, there are 54px columns and 30px gutters, if everything I've mentioned so far is correct ? What I don't understand is, what is the purpose of gutters, or must a grid system have gutters either way, if you remove them or not, they must be there ? Thanks Christopher __ 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 | medialogic.com #663399 __ 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] Grid System
I have to agree with Philip here. If you don't know context you can use the formula you referenced. That, I believe, is his point. Viewport width is not something you will know. If, for example, you know your content will be a max-width of 960px, then you can work off of that in the formula. Also, I'd recommend not mixing units as you could be creating a small annoying mess. Gutters can be small percentages as well, figured out with that same formula. No, I'm not a troll. On Monday, October 20, 2014, Philip Taylor p.tay...@rhul.ac.uk wrote: MiB wrote: You clearly [...] want to waste my time and the readers of this email discussion list. On the contrary, I want to challenge your assertion that you can translate from px sizing to percentages for all but the most trivial of cases. If /everything/ was originally expressed in pixels, then of course you can translate from px sizing to percentages (a child of five would know how to do that), but if some elements of the original design were expressed in less tangible units (percent, ems, rems, etc), then it should be patently obvious to you that you can NOT translate from px sizing to percentages. Philip Taylor __ 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 | medialogic.com #663399 __ 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/
