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/
Re: [css-d] Grid System
Sorry, that should read If you don't know context you CAN'T use the formula... Another victim of auto correct... On Monday, October 20, 2014, Tom Livingston tom...@gmail.com wrote: 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 javascript:_e(%7B%7D,'cvml','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 -- 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
On Monday, October 20, 2014, MiB digital.disc...@gmail.com wrote: okt 20 2014 12:20 Philip Taylor p.tay...@rhul.ac.uk javascript:;: 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. Your challenge is futile. An example was given about grids expressed in pixels. GJim said that percentages were used. That is the context. When I said you can translate from px sizing to percentages” grids is the context for that claim (Specifically the example used). You’re trying the silly exercise to take that sentence out of that context, to imply I meant it in general terms. A child could understand that was not the case. Consider context, not only when translating pixel-expressed designs, but also when reading this list. I'm sorry. I must have missed the context mentioned. I only saw references to fixed width gutters. I'll re-read. -- 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
On Monday, October 20, 2014, Tom Livingston tom...@gmail.com wrote: On Monday, October 20, 2014, MiB digital.disc...@gmail.com javascript:_e(%7B%7D,'cvml','digital.disc...@gmail.com'); wrote: okt 20 2014 12:20 Philip Taylor p.tay...@rhul.ac.uk: 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. Your challenge is futile. An example was given about grids expressed in pixels. GJim said that percentages were used. That is the context. When I said you can translate from px sizing to percentages” grids is the context for that claim (Specifically the example used). You’re trying the silly exercise to take that sentence out of that context, to imply I meant it in general terms. A child could understand that was not the case. Consider context, not only when translating pixel-expressed designs, but also when reading this list. I'll assume that the context is the 978 referenced in the OP in the url. Even given that, mixing units is going to cause issues, especially for those just learning. I recommend using percentage for all, as in David L's example. -- 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
On Monday, October 20, 2014, David Hucklesby huckle...@gmail.com wrote: On 10/20/14, 2:16 AM, MiB wrote: okt 20 2014 11:08 MiB digital.disc...@gmail.com: Grids are not hocus locus. I’m giving this response a Like :) Magic plague ;-) -- 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] Float problems
Actually, in Chrome dev tools, i see .sample-summary div wrapping only the two little paragraphs. And the p wrapping the imgs is 100% width; On Mon, Oct 20, 2014 at 8:43 PM, John j...@coffeeonmars.com wrote: at this link http://www.coffeeonmars.com/category/illustration/, the image of the carburetors is being pushed downward; my goal is to have it top-aligned with the two little paragraphs. both that text and that picture are contained in the same container div which has overflow:hidden; So I’m not getting why the image doesn’t behave according to..what I’m imagining.. maybe my imagining is wrong? :-) 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 | 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] Float problems
.sample-summary is 100% width, and is holding the images down. In Chrome dev tools, I was able to add a style to .sample-summary as so: width: 30%; Float:left; and to the child ps, width: 100%; The images then came up to the top of the green div. On Mon, Oct 20, 2014 at 8:55 PM, John j...@coffeeonmars.com wrote: On Oct 20, 2014, at 5:50 PM, Tom Livingston tom...@gmail.com wrote: Actually, in Chrome dev tools, i see .sample-summary div wrapping only the two little paragraphs. And the p wrapping the imgs is 100% width; Here is with that p with a red line around it.. the container div which I thought was containing text (left) and picture (meant to be to the right) does span 100% but that image isn’t havin’ it.. John -- 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] Float problems
On Mon, Oct 20, 2014 at 9:11 PM, John j...@coffeeonmars.com wrote:
On Oct 20, 2014, at 6:03 PM, Tom Livingston tom...@gmail.com wrote:
.sample-summary is 100% width, and is holding the images down. In
Chrome dev tools, I was able to add a style to .sample-summary as so:
width: 30%; Float:left;
and to the child ps, width: 100%;
The images then came up to the top of the green div.
Sorry, I am really confused..I believe the results of your experiments, but
here is my own css..sample-summary already has 30% width, and both are
contained by sample-and-text…maybe my eyes aren’t seeing it right?
.sample-and-text{
border:1px solid green;
overflow:hidden;
}
#content-left .sample-summary p{
border:1px solid red;
/* float:left; */
margin:1em 0 2em 0;
width:30%;
}
That style says that the ps INSIDE .sample-summary are 30% wide.
and the markup I see in Chrome dev tools is:
div class=sample-summary
p/p
p/p
/div
p [img] /p
This is what is rendered...not the source. Maybe a miss-placed close
tag somewhere?
--
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] Float problems
On Mon, Oct 20, 2014 at 9:22 PM, John j...@coffeeonmars.com wrote: On Oct 20, 2014, at 6:15 PM, Tom Livingston tom...@gmail.com wrote: That style says that the ps INSIDE .sample-summary are 30% wide. and the markup I see in Chrome dev tools is: div class=sample-summary p/p p/p /div p [img] /p This is what is rendered...not the source. Maybe a miss-placed close tag somewhere? No…I had tags closed, but I wasn’t correctly “seeing” my use of the descendent selector. I was so focused on making sure my p text behaved right, I completely ignored the containing div itself! You helped me to see it..and I just was not seeing it. Good learning, this problem… Thank you, Tom! Glad to help! -- 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] site makeover
David, Very nice. Only thing that struck me was the menu background could be a bit more opaque, especially when over busier page contents. On Thu, Oct 30, 2014 at 10:05 AM, David Laakso laakso.davi...@gmail.com wrote: Constructive comments and suggestion on this responsive site are welcome... markup http://ccstudi.com/ css http://ccstudi.com/site/css/sisu.css Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] site makeover
On Thu, Oct 30, 2014 at 11:07 AM, David Laakso laakso.davi...@gmail.com wrote: On Thu, Oct 30, 2014 at 10:29 AM, Tom Livingston tom...@gmail.com wrote: David, Only thing that struck me was the menu background could be a bit more opaque, especially when over busier page contents. Good point. Correction on server. Thanks, David. Better. :-) -- 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] Responsive HTML5/CSS3 Only Template Resource
Seems you'd have more flexibility with your design if you just code your own, no? I've not seen anything other than frameworks. Like foundation.zurb.com. On Thu, Oct 30, 2014 at 1:17 PM, Elli Vizcaino e7f...@gmail.com wrote: Hi CSS Discuss, I'm wondering if anyone knows of a site where I can find free responsive HTML5/CSS3 layout templates that are just code only, so I can theme them with my own design? My Google search just keeps turning up pre-designed responsive themes. Really hoping to find white label layouts. Elli Vizcaino http://www.e7flux.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 | 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/
[css-d] IE 8 issue upon refresh
Hello list, Shocking as this may seem, I'm having an issue with IE8. When I first hit this page it seems to work fine. But after a refresh or two, it goes blank and doesn't recover. Can anyone see what I am not? http://proof.mlinc.com/tl/ie8test/ Thanks in advance. -- 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] IE 8 issue upon refresh
On Tue, Nov 4, 2014 at 2:56 PM, Tom Livingston tom...@gmail.com wrote: Hello list, Shocking as this may seem, I'm having an issue with IE8. When I first hit this page it seems to work fine. But after a refresh or two, it goes blank and doesn't recover. Can anyone see what I am not? http://proof.mlinc.com/tl/ie8test/ Thanks in advance. -- This was solved. It was a JS issue. Unfortunately. Thanks, if you looked. -- 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] why is hover area so large (tall) ?
I'm not able to look right now but based on Philippe's reply it sounds like you
had a ul inside an li. The li has :hover styles applied. Since the ul was not
visible but still present (because there is no such thing as display:hidden;)
the li was actually as tall as its content - which included the invisible ul.
Sent from my iPhone
On Nov 4, 2014, at 7:19 PM, John j...@coffeeonmars.com wrote:
On Nov 4, 2014, at 3:47 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
You have this in your stylesheet for your submenus:
#main_nav ul li ul { ;
/* snip */
/* visibility:hidden; */
display:hidden; /* what is this ? */
opacity:0;
}
The submenu is invisible due to the opacity being set to `0` but fully
present… This expands the hover area of the parent li. I guess you want to
say 'display: none', but I’m not in your head and won’t venture that far…
Philippe; your suggestion fixed the issue, and I thank you…I do not see the
relationship between the nav ul li ul display and the “sensitive area” of ul
li:hover ulisn’t the hover applied to the top-level items in the ul?
Maybe the issue is that I am accustomed to seeing the hover area limited to
the item having :hover applied to it (plus whatever padding) but this
situation was the entire child ul behaving as though IT had :hover applied to
it.
I hope I’m making some sense of my confusion here…channeling Yogi Berra..
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/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Responsive Images
I've been using a polyfill called picturefill. It will serve the necessary image based on media query. Very few people, if any, change browser viewport sizes while browsing like devs do in testing. Only the appropriate image gets served. No crazy amounts of server requests. Sent from my iPhone On Nov 6, 2014, at 12:48 AM, Crest Christopher crestchristop...@gmail.com wrote: Swapping will require more page requests from the server. The other solution mentioned requires by default a 5K image if you go by the highest screen possible, just so you can scale down appropriately without blurred images. I suppose gone are the days I could find an image at 800x600 do photo magic to the image in Photoshop then merge it with the design. Christopher Karl DeSaulniers mailto:k...@designdrumm.com Thursday, November 06, 2014 12:29 AM +1 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/ Norman Fournier mailto:nor...@normanfournier.com Thursday, November 06, 2014 12:24 AM Hello, No, the idea is to swap out higher resolution images for the higher resolution screens so that no visitor ever has to see distorted, pixellated images. Norman __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive Images
Swapping bg images is easy enough with media queries, however, many mobile
device browsers will download images within other mqs. There is an easy way to
stop this in most cases.
For example, my base mobile styles (because you build pages mobile-first,
right?) have a bg img. I'll use that img until I hit a breakpoint of 37em at
which point I'll swap to a larger img. As is, most browsers will download both
imgs needlessly. You can easily stop this by wrapping the base style img in an
mq like:
@media screen and ( max-width: 37em){
Background img here
}
Notice the mq is a max-width of the next breakpoint.
Can't put my finger on the article and research that shows this, but will look
later.
HTH
Sent from my iPhone
On Nov 6, 2014, at 12:48 AM, Crest Christopher crestchristop...@gmail.com
wrote:
Swapping will require more page requests from the server. The other solution
mentioned requires by default a 5K image if you go by the highest screen
possible, just so you can scale down appropriately without blurred images.
I suppose gone are the days I could find an image at 800x600 do photo magic
to the image in Photoshop then merge it with the design.
Christopher
Karl DeSaulniers mailto:k...@designdrumm.com
Thursday, November 06, 2014 12:29 AM
+1
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/
Norman Fournier mailto:nor...@normanfournier.com
Thursday, November 06, 2014 12:24 AM
Hello,
No, the idea is to swap out higher resolution images for the higher
resolution screens so that no visitor ever has to see distorted, pixellated
images.
Norman
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive Images
On Thu, Nov 6, 2014 at 9:43 AM, Crest Christopher crestchristop...@gmail.com wrote: I'd like to read the article, when you find the link. There is only one issue, if I'm doing my own custom design with a smorgasbord of images etc. I have to find the largest, suppose a 5K image, then do my design magic in Photoshop, then scale the design at different resolutions. Question is, how many resolutions, one, three, five... ? Christopher Breakpoints should be based on the needs of the content. Start with phone size, open up your viewport until the content starts to look like it needs work, and add a breakpoint there. Make layout adjustments. Repeat. That said, there are GENERAL breakpoints at 480 (phone landscape), 600, 768 and 960. Add more breakpoints anywhere you need to. Don't use any of these if you don't need to (because the content works fine without an adjustment at these breakpoints). Again, this assumes a mobile-first build (because that's best). Here's the article. Test five is what I am referring to. http://timkadlec.com/2012/04/media-query-asset-downloading-results/ HTH -- 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] Responsive Images
Sent from my iPhone On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com wrote: Why do you recommend building mobile first ? Aside from being best practice, it is much harder and requires more code to achieve a mobile layout from a desktop first build because it requires you to undo a great deal of the desktop layout. It is less code and work to build mobile first as it is a simpler, additive process. I can tell you from experience that desktop first is a nightmare. There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your image Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops / laptops. See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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 is child wider than parent?
Take a look at box-sizing.
http://css-tricks.com/box-sizing/
Adding it in late in the game will cause issues, however...
On Thu, Nov 6, 2014 at 5:43 PM, Angela French afre...@sbctc.edu wrote:
Darn box model!
Thanks.
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
Sent: Thursday, November 06, 2014 2:40 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Why is child wider than parent?
You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
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] Responsive Images
On Thu, Nov 6, 2014 at 7:32 PM, Crest Christopher crestchristop...@gmail.com wrote: That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? No. That was just an example of one image. From base to a 600px breakpoint, I use one image. From 600 to 768, I use a second and from 768 to my max width, I use a third. Depending on your preference and how you style your image you could use less. If you have an image that is nothing more than a background texture - for example - you could have it scale up proportionally and get away with a little pixelation, using background-size: cover; for example. See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. I don't understand ? want to export my image assets perfectly, focus more on markup and styles... What is pixel-perfect in an image editor will not be in code/browser. -- 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] Responsive Images
On Thu, Nov 6, 2014 at 7:32 PM, Crest Christopher crestchristop...@gmail.com wrote: That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? I have used images for 2x displays. I dont worry about it for photographs. Logos mostly. see picturefill.js http://scottjehl.github.io/picturefill/ -- 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] Responsive Images
On Thu, Nov 6, 2014 at 7:42 PM, David Laakso laakso.davi...@gmail.com wrote: On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston tom...@gmail.com wrote: Sent from my iPhone On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com wrote: Why do you recommend building mobile first ? Aside from being best practice [trmmed].. I hope that you mean it happens to be best practice for you. OK, I'll change that to recommended by most... -- 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] Responsive Images
Sent from my iPhone On Nov 6, 2014, at 9:34 PM, Crest Christopher crestchristop...@gmail.com wrote: @media is what you recommend for changing images based on browser size, correct ? Christpher ? Background images, yes. For images coded in the markup, see the polyfill I gave a link to twice before or look up picture element/responsive images. Support is spotty at the moment for the latter. compose-unknown-contact.jpgCrest Christopher Thursday, November 06, 2014 9:11 PM Basically the web is becoming a billboard, if I want to design for 5K I'd need a 5K image, from there I scale it down, or up because I'll be designing for mobile first, then I adjust the page and graphics accordingly for desktop. Christopher postbox-contact.jpgTom Livingston Thursday, November 06, 2014 7:41 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? I have used images for 2x displays. I dont worry about it for photographs. Logos mostly. see picturefill.js http://scottjehl.github.io/picturefill/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 compose-unknown-contact.jpgCrest Christopher Thursday, November 06, 2014 7:32 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. I don't understand ? postbox-contact.jpgTom Livingston Thursday, November 06, 2014 7:17 PM Sent from my iPhone On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com wrote: Why do you recommend building mobile first ? Aside from being best practice, it is much harder and requires more code to achieve a mobile layout from a desktop first build because it requires you to undo a great deal of the desktop layout. It is less code and work to build mobile first as it is a simpler, additive process. I can tell you from experience that desktop first is a nightmare. There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your image Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops / laptops. See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. compose-unknown-contact.jpgCrest Christopher Thursday, November 06, 2014 6:38 PM Why do you recommend building mobile first ? There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your images. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops / laptops. Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http
Re: [css-d] sticky footer position in IE - bottom of window instead of page
Not working in ios8.1 safari either. Just sits at the bottom of the content. Sent from my iPhone On Nov 7, 2014, at 7:59 PM, Debbie Campbell d...@redkitecreative.com wrote: Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer position in IE - bottom of window instead of page
On Fri, Nov 7, 2014 at 7:59 PM, Debbie Campbell d...@redkitecreative.com wrote: Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell Are you working on this? I am not seeing a sticky footer in any browser. -- 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] sticky footer position in IE - bottom of window instead of page
It may just be early here but if the content is deeper than the current
viewport, this will cause problems. Also I don't see how this is sticky.
Sent from my iPhone
On Nov 9, 2014, at 9:49 AM, Colin (Sandy) Pittendrigh
sandy.pittendr...@gmail.com wrote:
Am I right? I'm asking, not proclaiming.
Code like this is perhaps useful because it solves a problem. But it's a
hard-coded hack relying on unintended side effects and more likely than not
to sometime break in the future. More likely than more standard codes that
don't exploit side effects (negative margins and hard-coded pixels etc)
It relies on hard-coding and coupling footer-height in pixels to codes
relating to the page-wrap block, that in a better world would be modular
and independent. And not so tightly coupled. There must be a better way.
I'll have to read through the entire thread to see what other solutions
there are. I do it with fixed positioning on my little (amateur) website.
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
On Sat, Nov 8, 2014 at 5:06 PM, Debbie Campbell d...@redkitecreative.com
wrote:
I stripped out all the sticky footer code and tried a few other methods,
this one worked and tested down to IE8 with no problems:
http://css-tricks.com/snippets/css/sticky-footer/
The footer is now where it should be. Thank you for your input everyone.
http://www.redkitecreative.com/dev/boisson/
Also I fixed the :focus state for links, thanks for that too.
--
Debbie
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
/* Colin (Sandy) Pittendrigh --oO0 */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position discrepancy, browser to browser
On Mon, Nov 10, 2014 at 3:05 PM, John j...@coffeeonmars.com wrote: The search field at the top right at http://www.coffeeonmars.com/contact/ should right-align, or butt up against the padding-right of the parent, which is 1.25rem. This roughly corresponds to the right edge of the “in” icon in the header nav. In Mac FireFox, and on one of my Macs, the search box right-aligns correctly. On another Mac, FF shows it pushed in a bit to the left, and in Chrome and Opera it appears to be pushed in a bit leftward. Using Firebug in FF, I don’t see a reason for this to be happening, so, my guess is a difference in how browsers are interpreting my CSS. Would someone be able to help me see what’s at work in this problem? thank you, John Does the FF that displays correctly have a different font-size setting - either default or scaled up? That's the only thing I can see that might be different. Since nothing seems to be telling the input to be 100% wide, or float right, etc. of the aside, it seems to be doing what I would expect - and that would be to NOT line up with the right edge of the 'in' icon. HTH -- 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] Position discrepancy, browser to browser
On Mon, Nov 10, 2014 at 4:11 PM, John j...@coffeeonmars.com wrote: On Nov 10, 2014, at 1:07 PM, John j...@coffeeonmars.com wrote: I am fairly sure I tried this before, but width 100% float right works now, correctly, in all 4 browsers I had. 3rd time’s the charm, perhaps, but thank you for touching on the area that needed attention, Tom! Actually, I know what happened, and this burns me more often than I’d like….there’s another instance or two of #s in my media queries, and most likely, I adjusted, say, the tablet instance while hoping to see a change in desktop… hope this helps someone.. John Well, unless you override #s in your desktop MQ, you would see a change on desktop if you changed tablet MQ... provided you're building mobile-first... -- 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] Position discrepancy, browser to browser
On Mon, Nov 10, 2014 at 4:59 PM, Tom Livingston tom...@gmail.com wrote: On Mon, Nov 10, 2014 at 4:11 PM, John j...@coffeeonmars.com wrote: On Nov 10, 2014, at 1:07 PM, John j...@coffeeonmars.com wrote: I am fairly sure I tried this before, but width 100% float right works now, correctly, in all 4 browsers I had. 3rd time’s the charm, perhaps, but thank you for touching on the area that needed attention, Tom! Actually, I know what happened, and this burns me more often than I’d like….there’s another instance or two of #s in my media queries, and most likely, I adjusted, say, the tablet instance while hoping to see a change in desktop… hope this helps someone.. John Well, unless you override #s in your desktop MQ, you would see a change on desktop if you changed tablet MQ... provided you're building mobile-first... Well, I guess that's not always true, depending on your MQs, huh?! I tend to use only min-width MQs for the most part. -- 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] Position discrepancy, browser to browser
On Mon, Nov 10, 2014 at 5:00 PM, John j...@coffeeonmars.com wrote: On Nov 10, 2014, at 1:59 PM, Tom Livingston tom...@gmail.com wrote: Well, unless you override #s in your desktop MQ, you would see a change on desktop if you changed tablet MQ... provided you're building mobile-first... Ha..no, I’m going the other way… Next outing, will be mobile first. Thank you! J Yah, that'll do it. ;-) -- 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] Position discrepancy, browser to browser
On Mon, Nov 10, 2014 at 5:04 PM, John j...@coffeeonmars.com wrote: On Nov 10, 2014, at 2:01 PM, Tom Livingston tom...@gmail.com wrote: Well, I guess that's not always true, depending on your MQs, huh?! I tend to use only min-width MQs for the most part. Yeah, most true and these variable strategies are a bit for me to keep track of, tho with experience, it will be old hat.. I am going desktop down and my mq’s are x-width and less. I suppose as long as you can keep it straight and with a consistent method, bob’s yer uncle, but I have really burned myself wrenching on code in one area, thinking I was in another. I could really use a code editor that would let me have a different background for each section..I don’t know if this is a thing people want or use, but I think it would help one keep things straight on the code side. J I've inherited two sites that were desktop down, and they are a nightmare. I use SASS, and with that I take advantage of the improved @import functionality, using a separate sheet for each breakpoint. Easier to keep track of. -- 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/
[css-d] 3 elements side by side
Hello list, What's your favorite, most reliable way to get 3 elements (block or inline-block) side by side (no gap between) to span the full width of their parent? And hopefully not leave a gap at all... I'm struggling to rid myself of a nasty but tiny gap. Sorry, no link. Thanks in advance. -- 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] 3 elements side by side
Thanks guys. I seem to always forget CSS tables... I'll give it a shot. I got some complicated transform hover effects that I need to play nice... On Mon, Nov 10, 2014 at 7:58 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Nov 10, 2014, at 5:09 PM, Tom Livingston tom...@gmail.com wrote: Hello list, What's your favorite, most reliable way to get 3 elements (block or inline-block) side by side (no gap between) to span the full width of their parent? And hopefully not leave a gap at all... I'm struggling to rid myself of a nasty but tiny gap. Here is a few ways I do it Tom. Hopefully one works for you. -- 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] Mobile Design Mockup Critique ?
Link? On Wed, Nov 12, 2014 at 1:23 PM, Crest Christopher crestchristop...@gmail.com wrote: I'm near completing my mobile design and I was hoping someone could take a look and give some CC ? 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] Mobile Design Mockup Critique ?
Your background images will be tricky. Especially being fixed height, assuming you don't want them just stretched to accommodate the tiles stacking ... On Wednesday, November 12, 2014, Crest Christopher crestchristop...@gmail.com wrote: Here is the link http://i.imgur.com/pkZpfZr.jpg. Christopher David Laakso mailto:laakso.davi...@gmail.com Wednesday, November 12, 2014 1:42 PM On Wednesday, November 12, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: URL ? -- Chelsea Creek Studio http:// ccstudi.com http://ccstudi.com desktop | laptop | tablet | mobile Sent from iPhone 5s Crest Christopher mailto:crestchristop...@gmail.com Wednesday, November 12, 2014 1:23 PM I'm near completing my mobile design and I was hoping someone could take a look and give some CC ? 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] Screens overload
Build for any size. Place breakpoints where the content needs them. On Wednesday, November 12, 2014, Crest Christopher crestchristop...@gmail.com wrote: I have a general question, how many screens are there ? There is your mobile phones (Android, Apple, Lumia, BlackBerry), then there is your tablets (iPad, Samsungs etc) followed by TV, XBox, Playstation, Nintendo DS, last but not least Desktop/Laptops, am I missing any ? Want to know is what is the common ground in terms of web browsers do they share, including screen sizes ? 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] Screens overload
On Thu, Nov 13, 2014 at 10:23 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Crest Christopher wrote: Any other device not on this specific list I'm going to forget about, this is quite a list as it stands. :) Might it not be a more productive use of your time if you designed in such a way that your code will render appropriately at /any/ resolution/screen-size/W-H-Y rather than coding for a discrete set of sizes today and having to do a complete re-write tomorrow ? As previously mentioned. -- 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] Screens overload
On Thu, Nov 13, 2014 at 10:18 AM, Crest Christopher crestchristop...@gmail.com wrote: Any other device not on this specific list I'm going to forget about, this is quite a list as it stands. :) If you view pages on a Nintendo DS, sorry ! Christopher A sheet/styles for base styles. No MQ. A sheet/styles that kicks in with an MQ of min-width: 30em to make any necessary tweaks to the content. A sheet/styles that kicks in with an MQ of min-width: 37em to make any necessary tweaks to the content. A sheet/styles that kicks in with an MQ of min-width: 48em to make any necessary tweaks to the content. A sheet/styles that kicks in with an MQ of min-width: 60em to make any necessary tweaks to the content. Add or remove as content dictates... etc.. This approach will allow you to code for basically any device without worrying about slight differences in screen sizes. Trying to code for each one will not be possible. -- 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] Screens overload
On Thu, Nov 13, 2014 at 10:50 AM, MiB digital.disc...@gmail.com wrote: nov 13 2014 16:39 Tom Livingston tom...@gmail.com: A sheet/styles for base styles. No MQ. A sheet/styles that kicks in with an MQ of min-width: 30em to make any necessary tweaks to the content. A sheet/styles that kicks in with an MQ of min-width: 37em to make any necessary tweaks to the content. A sheet/styles that kicks in with an MQ of min-width: 48em to make any necessary tweaks to the content. A sheet/styles that kicks in with an MQ of min-width: 60em to make any necessary tweaks to the content. Add or remove as content dictates... etc.. This approach will allow you to code for basically any device without worrying about slight differences in screen sizes. Trying to code for each one will not be possible. I think it was when I started with this approach that I gave up photoshop comps and started designing directly in the browser. I stil do graphics in Photoshop, but just elements and sprites. Wish I could do that here... :-) -- 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/
[css-d] Position fixed and transforms
Hello list, I am using transform: translate3d(0px, 0px, 0px); on a parent element for off-screen mobile nav. At wider widths, I switch to a typical top nav, and add position:fixed to my header (a child of the aforementioned parent element). After some research, I learned that the transform on the parent of my header will mess up the fixed positioning. My question is how do I turn off/negate/undo the transition at wider widths so my fixed header will work? Sorry, can't post code right now. Thanks in advance. -- 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] Position fixed and transforms
On Mon Nov 17 2014 at 12:18:44 PM Tom Livingston tom...@gmail.com wrote: Hello list, I am using transform: translate3d(0px, 0px, 0px); on a parent element for off-screen mobile nav. At wider widths, I switch to a typical top nav, and add position:fixed to my header (a child of the aforementioned parent element). After some research, I learned that the transform on the parent of my header will mess up the fixed positioning. My question is how do I turn off/negate/undo the transition at wider widths so my fixed header will work? Sorry, can't post code right now. Thanks in advance. So after some messing around, I tried adding the transforms using a class and after a certain point, removing that class with JQ so as to avoid the position:fixed issue I'm having. Turns out the default state of my structure relies on the transforms to display the page normally. Looks like I'm out of luck with this. Guess I'll have to go talk to the designer about Plan B. If you pondered my issue, I thank you. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Position fixed and transforms
I'll try that. From what I read, the fact that transform is on the parent
at all is the problem. I'll reply after I give it a shot.
Thanks
On Mon, Nov 17, 2014 at 8:21 PM Philippe Wittenbergh e...@l-c-n.com wrote:
Le 18 nov. 2014 à 02:18, Tom Livingston tom...@gmail.com a écrit :
I am using transform: translate3d(0px, 0px, 0px); on a parent element
for off-screen mobile nav.
At wider widths, I switch to a typical top nav, and add position:fixed
to my header (a child of the aforementioned parent element). After
some research, I learned that the transform on the parent of my header
will mess up the fixed positioning. My question is how do I turn
off/negate/undo the transition at wider widths so my fixed header
will work?
The initial value for the transform property is `none`
http://dev.w3.org/csswg/css-transforms/#transform-property
So for your wide screen stylesheet, this should do the trick:
E { transform: none; }
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/
Re: [css-d] CSS Particle Transition (Example of Effect)
Please try the webdesign-l list. That example is done with script. This list is for CSS. http://www.webdesign-l.com/ On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher crestchristop...@gmail.com wrote: I want to do an effect similar to this http://andrew-hoyer.com/experiments/rain/, except the div breaks up into particles and transitions to another div. I hope I'm understood ? 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/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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 Particle Transition (Example of Effect)
Neat though ;-) On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher crestchristop...@gmail.com wrote: I want to do an effect similar to this http://andrew-hoyer.com/experiments/rain/, except the div breaks up into particles and transitions to another div. I hope I'm understood ? 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/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries not working
Try:
@media only screen and (min-width : 320px) {
#menupanel {background-color:red;height:400px;width:320px;border:2px;}
}
@media only screen and (min-width : 600px) {
#menupanel {background-color:gray;height:400px;width:500px;}
}
On Thu, Nov 20, 2014 at 8:37 PM Crest Christopher
crestchristop...@gmail.com wrote:
I have the following Media Queries. When the screen size is 320px the
background color for the #menupanel should change to red that is not
happening when it is larger then 320px it should remain gray although
neither is happening !
body {margin:0;padding:0;background-color:blue;}
/* Smartphones (portrait) --- */
@media only screen and (max-width : 320px) {
#menupanel {background-color:red;height:400px;width:320px;border:2px;}
}
#menupanel {background-color:gray;height:400px;width:500px;}
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/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries not working
border of 2px, which is on all 4 sides, adds 2px on the left and 2px on the
right. 4px.
On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher
crestchristop...@gmail.com wrote:
Why is it adding 4px for left and right ? I'm reading up on box-sizing,
I don't see the benefit ?
Christopher
Russ McMullin mailto:r...@catjuggling.com
Thursday, November 20, 2014 9:21 PM
I suspect the scroll bar is from telling #menupanel to be 320px, plus
a border of 2px, which would make it 324px wide, unless you are using
box-sizing:border-box;. That is where I would start looking.
Russ
Chris Rockwell mailto:ch...@chrisrockwell.com
Thursday, November 20, 2014 8:50 PM
Using a media query doesn't contribute to specificity, so your code
would work if you moved the declaration that sets the color to gray
above the media query.
If you wanted to get all mobile first on it, you could do:
#menupanel { background-color: red }
@media (min-width: 321px) { #menupanel { background-color: gray; } }
Chris Rockwell
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 8:46 PM
Try:
@media only screen and (min-width : 320px) {
#menupanel {background-color:red;height:400px;width:320px;border:2px;}
}
@media only screen and (min-width : 600px) {
#menupanel {background-color:gray;height:400px;width:500px;}
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries not working
On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher crestchristop...@gmail.com wrote: Why is it adding 4px for left and right ? I'm reading up on box-sizing, I don't see the benefit ? Without setting box-xizing to border-box, the box model is additive (except in older IE, ironically) which is kinda wrong/bad. 300px box plus 10px padding and 2px border becomes 324px wide. Setting box-sizing: border-box does not become additive. Padding and border are subtracted from the 300px. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries not working
On Thu Nov 20 2014 at 9:54:00 PM Tom Livingston tom...@gmail.com wrote: On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher crestchristop...@gmail.com wrote: Why is it adding 4px for left and right ? I'm reading up on box-sizing, I don't see the benefit ? Without setting box-xizing to border-box, the box model is additive (except in older IE, ironically) which is kinda wrong/bad. 300px box plus 10px padding and 2px border becomes 324px wide. Setting box-sizing: border-box does not become additive. Padding and border are subtracted from the 300px. Or rather, padding and border do not add on to the 300px. 'Subtracted' may be wrong term here. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Don't miss a space
This will be handled by the min-width MQs, as mentioned before. Base styles for small screens like iPhone. Then, for example, the next MQ at 480 for landscape iPhone. The gap between base and 480 will take care of the different width phones. On Sat, Nov 22, 2014 at 7:47 PM Crest Christopher crestchristop...@gmail.com wrote: How do you accommodate most, if not all screen sizes. For example iPhone 3,4,5 are all 320px width, but iPhone6 is 375, then most other smart phones fall in-between, I did not include Phablets, and tablets. I suppose using SASS, although I don't have experience using SASS you could do a condition whereas one MQ could somehow fill in the pixel gaps between an iPhone5 and a Nexus 4, or no ? 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/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Don't miss a space
While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. On Sun, Nov 23, 2014 at 10:50 AM Crest Christopher crestchristop...@gmail.com wrote: I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 7:49 AM On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 12:36 AM I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 12:04 AM On Saturday, November 22, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: I wouldn't even worry about testing on devices at first. Just resize your browser until problems arise then add MQ break points to address those problems. Test on devices based on what information you can glean from site analytics (if you have them) to be sure things are ok on those devices. Otherwise just focus on the most popular devices but be sure your design works well at ANY width. Keep the design as simple as possible and you will have a much easier job. Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 11:53 PM In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:54 PM Get base styles for phone set. Open viewport until layout looks poor and add a breakpoint/MQ at that point and adjust styles to improve layout. Repeat. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Don't miss a space
I don't recommend using all of these 'just because'. Good info though.
On Sun, Nov 23, 2014 at 8:27 PM Karl DeSaulniers k...@designdrumm.com
wrote:
On Nov 23, 2014, at 10:29 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Tom Tim - I forgot about the mobile tools in Chrome, they are pretty
good, I wonder if you can add devices, my phone is not listed.
Christopher
Hi Christopher
With firefox, you can set different screen sizes in their responsive
layout mode. VERY helpful.
One thing I have found to be a good method with images is to make them
width: 100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you can
have size up or down respectfully.
If when resizing the viewport your image gets too big or too small, then
set a MQ with a min-width or max-width;
IMO... NEVER set a max-width on an img itself.
2¢
Here is somthing I got when I went looking on Google for this same info.
CSS-Tricks:
/*CSS @media skeleton by Tirumal - April 28, 2013 -
http://code-tricks.com/css-media-queries-for-common-devices/*/
@charset UTF-8;
/*Most Popular Screen Resolutions
Desktops Laptops
1024×768 and higher
iPhone
5: 1136×640
4S: 640×960
3GS: 320×480
iPad
First second generations: 1024×768
Third generation: 2048×1536
iPad Mini
1024×768
Android Phones Tablets
Most phones are 320px wide or 360px wide, and most tablets are 800px wide.
When designing for them, however, it is typical for developers to break
them
into the following groups based on their Density-independent pixel (dp),
which is the minimum screen size.
Small screens: 426dp x 320dp
Normal screens: 470dp x 320dp
Large screens: 640dp x 480dp
Extra-large screens: 960dp x 720dp*/
/* All Smartphones in portrait and landscape --- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape --- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait --- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/* ANDROID DEVICES */
/* Android 240 X 320 --- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 --- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 --- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 --- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 --- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/* ALL GENERATION IPADS */
/* iPads in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/* Retina IPAD 3 4*/
/* Retina iPad 3 4 in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* IPAD 1 2 (ALSO IPAD MINI)*/
/* iPad 1 2 in portrait and landscape --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 2 in landscape --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 2 in portrait --- */
@media only screen
and (min-device-width : 768px)
and
Re: [css-d] Don't miss a space
On Mon Nov 24 2014 at 9:30:08 AM Crest Christopher
crestchristop...@gmail.com wrote:
What do you mean, make images width:100% like this;
img {width:100%} ?
With regards to the image in a div I assume you mean this;
divimg/img/div
div {width:76%} ?
In other words the image will scale without multiple resolutions of the
same image ?
Use that with caution. Don't deliver a 4000px wide image to a phone and
don't scale a 200px wide image to 960px wide on your desktop.
see picturefill.js http://scottjehl.github.io/picturefill/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Don't miss a space
On Mon Nov 24 2014 at 9:27:25 AM Crest Christopher crestchristop...@gmail.com wrote: as a responsive container/div now turned into an extremely narrow container/div that looks horrible ? Christopher Enter Media Queries stage left and... ACTION! On small screens, you'd have a different layout so as to avoid this. Stack your columns instead of side-by-side. When the viewport is wide enough to support side-by-side columns that aren't ridiculously narrow, add a breakpoint and add styles at that point to reposition the stacked columns to be side-by-side. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
