Re: [css-d] Don't miss a space

Should I use "srcset", "" or "picturefill" for images. I've read if you use "picturefill" as an alternative you can use ? Christopher Tom Livingston Saturday, November 22, 2014 7:50 PM This will be handled by the min-width MQs, as mentioned before. Base styles for

Re: [css-d] Don't miss a space

nov 25 2014 07:38 Karl DeSaulniers : > In regards to what you asked here, If they are using these plugins and > actually fixing any errors they find, then yes I know (without pretension) > their code will be valid. It's the reason these plugins were created. lol So your inference here is that

Re: [css-d] Don't miss a space

On Tue, Nov 25, 2014 at 9:59 AM, Crest Christopher wrote: > I have a question, ...trimmed] > Put the markup and css of the page in question on a public server and provide a link to it in your post to the list. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet

Re: [css-d] Don't miss a space

I have a question, how do I eliminate the white space between the orange box and the red box, I've tried or so I believe I tried nearly everything and it won't disappear ? At first I thought it was padding or margins, so I set either and both red and orange box to {margin-top/bottom:padding:

Re: [css-d] Don't miss a space

On Tue Nov 25 2014 at 7:32:58 AM Philip Taylor wrote: > > > Tom Livingston wrote: > > > Discuss. On webdesign-l. Or off list. As Tim said, this isn't CSS. > > Nonsense. Media queries are a part of the CSS infrastructure, and they > were the subject of my message. And their use (or abuse) certai

Re: [css-d] Don't miss a space

Tom Livingston wrote: Discuss. On webdesign-l. Or off list. As Tim said, this isn't CSS. Nonsense. Media queries are a part of the CSS infrastructure, and they were the subject of my message. And their use (or abuse) certainly requires discussion here if Christopher is not to waste month

Re: [css-d] Don't miss a space

Discuss. On webdesign-l. Or off list. As Tim said, this isn't CSS. On Tue, Nov 25, 2014 at 7:20 AM Philip Taylor wrote: > > > Tim Arnold wrote: > > > Though this discussion is interesting (as it is every 6 months when it > > comes back again) it isn't really on the topic of CSS. Any other > > tho

Re: [css-d] Don't miss a space

Tim Arnold wrote: Though this discussion is interesting (as it is every 6 months when it comes back again) it isn't really on the topic of CSS. Any other thoughts for Christopher about media queries? Media queries are an attempt to pigeon-hole browser geometries into discrete sets. As the

Re: [css-d] Don't miss a space

Though this discussion is interesting (as it is every 6 months when it comes back again) it isn't really on the topic of CSS. Any other thoughts for Christopher about media queries? On Tue, Nov 25, 2014, 6:58 AM Philip Taylor wrote: > I don't seek to excuse such an error for one second, but ther

Re: [css-d] Don't miss a space

I don't seek to excuse such an error for one second, but there is an important difference between the two : the Wordpress site is written in XHTML 1.0 Transitional, a stable specification against which the Validator can check pages accurately; the W3C site, on the other hand, is written in HTML

Re: [css-d] Don't miss a space

nov 25 2014 07:38 Karl DeSaulniers : > However, if your going to be putting together a CMS for others to use and > advertise it as a solid CMS, then I would have to say those Dev's need to be > on top of their game. No room for mistakes. At the very least make sure the > home page has no flaws

Re: [css-d] Don't miss a space

On Nov 24, 2014, at 10:06 PM, MiB wrote: > > nov 25 2014 00:03 Karl DeSaulniers : > >> Laughable maybe, invalid NO. >> Whole reason for my post. > > OK, but I find it a tad pretentious to argue you know the specific code of > hundreds of thousands of web sites built with Word press. You obv

Re: [css-d] Don't miss a space

Not talking about Wordpress itself, I'm talking about pages you build IN Wordpress for your own site. lol. Wordpress itself is a mess. But people who pay the bills use it and want me to edit on it. so these tools have helped me keep error free for the most part. Haven't used it long enough to kno

Re: [css-d] Don't miss a space

nov 25 2014 00:39 Jon Reece : > ​Apparently, even the W3C have trouble keeping all of their pages passing > validation ;) Unless it’s intentional. Maybe they’re just not using Wordpress? __ css-discuss [css-d@lists.css-discuss.o

Re: [css-d] Don't miss a space

nov 25 2014 00:03 Karl DeSaulniers : > Laughable maybe, invalid NO. > Whole reason for my post. OK, but I find it a tad pretentious to argue you know the specific code of hundreds of thousands of web sites built with Word press. You obviously do not know this and neither do I. We just have d

Re: [css-d] Don't miss a space

On Mon, Nov 24, 2014 at 6:20 PM, Philip Taylor wrote: > Karl DeSaulniers wrote: > > Laughable maybe, invalid NO. >> > > http://validator.w3.org/check?uri=https://.wordpress.com/ > > Very first site I tried. > ​Apparently, even the W3C have trouble keeping all of their pages passing validati

Re: [css-d] Don't miss a space

Karl DeSaulniers wrote: Laughable maybe, invalid NO. http://validator.w3.org/check?uri=https://.wordpress.com/ Very first site I tried. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.o

Re: [css-d] Don't miss a space

Laughable maybe, invalid NO. Whole reason for my post. Best, Karl Sent from losPhone > On Nov 24, 2014, at 12:38 PM, MiB wrote: > > > nov 24 2014 12:26 Karl DeSaulniers : > >> Hi Guys, >> Pardon me while I interject, but if your using Wordpress, CSS Javascript >> toolbox (CJT) wont let yo

Re: [css-d] Don't miss a space

nov 24 2014 12:26 Karl DeSaulniers : > Hi Guys, > Pardon me while I interject, but if your using Wordpress, CSS Javascript > toolbox (CJT) wont let you get away with bad code. :) > They even have an advanced theme and plugin editor that will show you if > someone's plugin has bad code and give

Re: [css-d] Don't miss a space

When I divide the a container/div, suppose one of my containers/div which is 360px in width by lets say extremely large 4096px the result is a 11.3% container/div on a 360px width device the container/div is not even a container/div any longer rather a long, slim rectangular box, that is why I

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 diffe

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; > > div {width:76%} ? > > In other words the image will scale without m

Re: [css-d] Don't miss a space

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; div {width:76%} ? In other words the image will scale without multiple resolutions of the same image ? Christopher Hi Christopher With firefox, you can set diff

Re: [css-d] Don't miss a space

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; div {width:76%} ? In other words the image will scale without multiple resolutions of the same image ? Christopher Hi Christopher With firefox, you can set diff

Re: [css-d] Don't miss a space

If I have a 4096 width resolution, I know what are thinking and have said already :-) I divide by a 320px width container that works out to 12.8% my container/div has transformed what previously was working well as a responsive container/div now turned into an extremely narrow container/div tha

Re: [css-d] Don't miss a space

Hi Guys, Pardon me while I interject, but if your using Wordpress, CSS Javascript toolbox (CJT) wont let you get away with bad code. :) They even have an advanced theme and plugin editor that will show you if someone's plugin has bad code and give you descriptions of the error. https://wordpress

Re: [css-d] Don't miss a space

nov 24 2014 07:25 Crest Christopher : > This version of the Developer Tools seems ten times more better then the > version I have in 33.1 (33.1.1) just released, literally at the time of me > writing this message/email. I also like Chrome tools and the Developer Tools add-on for both Chrome an

Re: [css-d] Don't miss a space

nov 24 2014 07:00 MiB : > Are you a man or a mice? I most certainly meant to ask ”Are you a man or a mouse”? My apologies for that grammatical error. You see how easy we mere mortals can make an error like that? A code god like you, Philip, surely would have a field day with me. C’mon now. __

Re: [css-d] Don't miss a space

On Nov 23, 2014, at 8:21 AM, Philip Taylor wrote: > MiB wrote: > >> I think that might be why Perch http://grabaperch.com/ was invented. > > Assuming that Perch was used to generate its own landing page, it would not > be for me : > >> Line 435, Column 7: Stray end tag div. >> >>http

Re: [css-d] Don't miss a space

24 nov 2014 kl. 02:26 skrev Karl DeSaulniers : > With firefox, you can set different screen sizes in their responsive layout > mode. VERY helpful. We have mentioned the new Firefox Developer Edition, right? https://www.mozilla.org/en-US/firefox/developer/ IMHO the Firefox tools is all I need.

Re: [css-d] Don't miss a space

If I have a 4096 width resolution, I know what are thinking and have said already :-) I divide by a 320px width container that works out to 12.8% my container/div has transformed what previously was working well, into an extremely narrow container/div that looks horrible ? Christopher Tom

Re: [css-d] Don't miss a space

I understand, you take the pages max width, whatever that may be then do the math, in your example, you used 960px. Christopher Tom Livingston Sunday, November 23, 2014 12:14 PM Normally what I do is have my page width be 100% of the viewport until I reach my "deskto

Re: [css-d] Don't miss a space

Crest Christopher composed on 2014-11-22 19:46 (UTC-0500): > How do you accommodate most, if not all screen sizes. Let the browser produce its innate functionality at instead of constraining it: 1-Pretend px, pt, cm, mm, in and other non-relative units do not exist in CSS. 2-With one exception

Re: [css-d] Don't miss a space

nov 23 2014 17:58 Crest Christopher : > Target / Context = Result So if your max page width is 960 and your container > is 650 then: 650/960=.677 (x100) so 67.7% > > How do I find my page max width, if the page width can be adjust at any time, > right now I don't know what my page width is so

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 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 > go

Re: [css-d] Don't miss a space

On Nov 23, 2014, at 10:29 AM, Crest Christopher 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

Re: [css-d] Don't miss a space

On Nov 23, 2014, at 8:21 AM, Philip Taylor wrote: > > > MiB wrote: > >> I think that might be why Perch http://grabaperch.com/ was invented. > > Assuming that Perch was used to generate its own landing page, it would not > be for me : > >> Line 435, Column 7: Stray end tag div. >> >>

Re: [css-d] Don't miss a space

Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct perc

Re: [css-d] Don't miss a space

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 Tim Arnold Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, "Tom Livingston" > w

Re: [css-d] Don't miss a space

On Nov 23, 2014 11:01 AM, "Tom Livingston" wrote: > > While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply

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

Re: [css-d] Don't miss a space

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

Re: [css-d] Don't miss a space

MiB wrote: I think that might be why Perch http://grabaperch.com/ was invented. Assuming that Perch was used to generate its own landing page, it would not be for me : Line 435, Column 7: Stray end tag div. Philip Taylor __

Re: [css-d] Don't miss a space

nov 23 2014 13:40 David Laakso : > Just getting Drupal to work at default is enough to tax even Leonardo… I think that might be why Perch http://grabaperch.com/ was invented. __ css-discuss [css-d@lists.css-discuss.org] http:

Re: [css-d] Don't miss a space

On Sunday, November 23, 2014, Crest Christopher wrote: > 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 th

Re: [css-d] Don't miss a space

On Sun, Nov 23, 2014 at 6:52 AM, Philip Taylor wrote: > > > David Laakso wrote: > >> No issue seen this end Windows SeaMonkey/2.30. > > > Unless your browser / geometry / font settings / font scaling / screen > resolution / a million other possibilities are identical to mine, David, you > may no

Re: [css-d] Don't miss a space

On Nov 23, 2014 6:52 AM, "Philip Taylor" wrote: > > > > David Laakso wrote: > >> No issue seen this end Windows SeaMonkey/2.30. > > > Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see th

Re: [css-d] Don't miss a space

David Laakso wrote: No issue seen this end Windows SeaMonkey/2.30. Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see the same artifacts. My point was not that all viewers will

Re: [css-d] Don't miss a space

On Sun, Nov 23, 2014 at 5:31 AM, Philip Taylor wrote: > Tim Arnold wrote: > >> This is a fair example of this idea that I recently worked on: >> http://www.workingamericahealthcare.org/ (Built in Drupal, Front End >> work mine, design by others who know better). > > > Hmmm. I followed the link,

Re: [css-d] Don't miss a space

Tim Arnold wrote: This is a fair example of this idea that I recently worked on: http://www.workingamericahealthcare.org/ (Built in Drupal, Front End work mine, design by others who know better). Hmmm. I followed the link, and it appeared in my browser window which occupied the right half

Re: [css-d] Don't miss a space

23 nov 2014 kl. 03:14 skrev Crest Christopher : > Percentage values scale the width of the viewport unlike pixel values. > > Tom / I assume when you say use max-width you mean; > > img { > max-width: 123px > } > > If so why do that, if you know the image size just give the container the > siz

Re: [css-d] Don't miss a space

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

Re: [css-d] Don't miss a space

On Saturday, November 22, 2014, Crest Christopher < crestchristop...@gmail.com> wrote: > 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

Re: [css-d] Don't miss a space

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 Saturd

Re: [css-d] Don't miss a space

Didn't Steve Martin made an album, news to me ! Tim Arnold Saturday, November 22, 2014 10:11 PM (why the reference to Steve Martin ?) Most likely because it's Saturday night and I am very, very old. But specifically the reference to "getting small" made me

Re: [css-d] Don't miss a space

I'm going to let MQ dictate the images, especially retina ! Tom Livingston Saturday, November 22, 2014 10:02 PM Your better off providing smaller images on the web with links to view larger ones if they want/need to. Crest Christopher

Re: [css-d] Don't miss a space

There are not many, but I'm prepared ! Tom Livingston Saturday, November 22, 2014 10:01 PM How do you know that. How many users of websites are using 4k resolution? Crest Christopher Saturday, November 22, 2014 9:57 PM Well considerin

Re: [css-d] Don't miss a space

What is the best method to pick breakpoints ? Christopher Tom Livingston Saturday, November 22, 2014 9:59 PM You'll never miss some. It just that your content may not look that good at some widths. The content will dictate your breakpoints. Don't pick breakpoints bas

Re: [css-d] Don't miss a space

On Sat, Nov 22, 2014 at 9:51 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > (why the reference to Steve Martin ?) > > Most likely because it's Saturday night and I am very, very old. But specifically the reference to "getting small" made me think of http://en.wikipedia.org/wiki/Let%

Re: [css-d] Don't miss a space

Well considering some of my target audiences may have 4K resolutions, my page will hit 4K approx. Christopher Tom Livingston Saturday, November 22, 2014 9:56 PM That's up to you. How wide do you want your page to get? Tom Livingston Saturday,

Re: [css-d] Don't miss a space

Otherwise I'll need eight MQ that doesn't guarantee I won't miss some, but I'll get the majority ! Tom Livingston Saturday, November 22, 2014 9:52 PM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.

Re: [css-d] Don't miss a space

I hope this isn't going to be a dumb question, how do you find your page width, is it based on the MQ min-width ? Christopher Tom Livingston Saturday, November 22, 2014 9:52 PM Target / Context = Result So if your max page width is 960 and your container is 650 then:

Re: [css-d] Don't miss a space

I know if you give an image {max-width:100%} when the viewport (browser window) scales down the image will get smaller (why the reference to Steve Martin ?) When I said scale the width of the viewport, I meant the /container will fits the exact with of the viewport (browser window) which I don

Re: [css-d] Don't miss a space

Sorry, if you have a 650px (example) width /container, what is the math to calculate the width in percentages ? Christopher Tom Livingston Saturday, November 22, 2014 9:20 PM More like: div{width:75%;} /*example width only*/ div img { max-width:100%; } But use this c

Re: [css-d] Don't miss a space

On Sat, Nov 22, 2014 at 9:14 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > Percentage values scale the width of the viewport unlike pixel values. > > Tom / I assume when you say use max-width you mean; > > img { > max-width: 123px > } > > If so why do that, if you know the image siz

Re: [css-d] Don't miss a space

Percentage values scale the width of the viewport unlike pixel values. Tom / I assume when you say use max-width you mean; img { max-width: 123px } If so why do that, if you know the image size just give the container the size of the image ? Christopher Tim Arnold

Re: [css-d] Don't miss a space

On Sat, Nov 22, 2014 at 8:47 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > Percentages does help make boxes/containers liquid but if you will be > using boxes with images that have a limited width then percentages won't > do, instead I'm left to do multiple MQ, arghh, ah well. > > >

Re: [css-d] Don't miss a space

Percentages does help make boxes/containers liquid but if you will be using boxes with images that have a limited width then percentages won't do, instead I'm left to do multiple MQ, arghh, ah well. Christopher Tim Arnold Saturday, November 22, 2014 8:14 PM I use

Re: [css-d] Don't miss a space

I use percentage widths on all my containers and try to limit MQ usage to just where the layout needs to change to adapt. The breakpoints (whether tied to specific devices, or just informed by how your design behaves in a browser, is up to you) and since I use percentage widths, that accounts for e

Re: [css-d] Don't miss a space

Howdy Christopher, ~~~ Saturday, November 22, 2014, 7:46:33 PM (USA 'Somewhere on-the-road time-zone'), you wrote the message that appears below. My reply appears here and/or interspersed within your message. ~~~ > How do you accommodate most, if not all screen sizes. Percentage, percentage, pe

Re: [css-d] Don't miss a space

I don't understand, I need multiple MQ ? Christopher Tom Livingston Saturday, November 22, 2014 7:50 PM 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 iPho

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 < crest

[css-d] Don't miss a space

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 condi