Re: [css-d] Two Phones one problem
On Mon, Feb 16, 2015 at 9:54 PM, Crest Christopher crestchristop...@gmail.com wrote: There is a bit of a conundrum. When I view the page using Chromes device emulation tools, specifically the Samsung Galaxy Tab 7.7,8.9,10.1. The page looks fine in landscape, horrible in portrait, viewing the page on my Lumia 1520 the page looks fine in portrait, horrible in landscape. Reversing the MQ has the possibility of reversing this problem, as it appears it's the only problem I face with the page, with regards to styling. Christopher Put the page 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 | 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/
Re: [css-d] Two Phones one problem
On Tue, Feb 17, 2015 at 7:28 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Here is the page
http://www.thecreativesheep.ca/wdp/wip/cs_regular_tutorial_WIP_2.htm.
Christopher
On line numbers 334-341 try changing this:
/* Media {Landscape}*/
@media (max-height:600px) and (orientation:landscape) {
#wrap {
width:100%;
background:#b7b7b7;
margin:auto;
}
To read this:
/* Media {Landscape}*/
@media only screen and (min-width:0px) and (max-width:600px){
#wrap {
width:100%;
background:#b7b7b7;
margin:auto;
}
On line numbers 363-370 try changing this:
p.imgbox {
position:relative; /*containg block for AP paperclip*/
width:300px; /*BG image width*/
height:350px; /*BG image height*/
background: url(images/background.gif) no-repeat;
border:5px dashed red;
right:-75px;
}
To read this:
p.imgbox {
position:relative; /*containg block for AP paperclip*/
width:300px; /*BG image width*/
height:350px; /*BG image height*/
background: url(images/background.gif) no-repeat;
border:5px dashed red;
/* right:-75px; delete*/
}
Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
I cannot help but feel that the current need, apparently experienced by many, to attempt to cope with an exponentially increasing number of smart'phone and tablet variants by writing ever-more-complex media queries, is essentially analogous to the need to flagellate oneself with nettles, brambles and similar as experienced by mystics and others in previous centuries. The pleasure to be experienced when you finally have the sense to stop will surely far outweigh the anguish and pain that you are currently experiencing ... Philip Taylor Good point. And that point is probably when the primary content is of sufficient contrast and at least at user default,so as to be readable and legible by children of all ages in phone portrait mode. 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/
Re: [css-d] Two Phones one problem
On Mon, Feb 16, 2015 at 12:18 AM, Crest Christopher crestchristop...@gmail.com wrote: I've run into an odd problem with a MQ between two different phones that have the same width when in landscape mode which is 480px. Those two phones are iPhone 4 and my Lumia 1520, the page I'm working on looks, for the most part, fine, when viewed on a iPhone 5, when I preview on my Lumia, the page breaks and I don't understand why ? Christopher The specs for the screen size of the three phones you listed are: 1/ iPhone/4 3.5 inches corner-to-corner 2/ iPhone/5 4 inches corner-to-corner 3/ Nokia Lumina 1520 6 inches corner-to-corner Try revising your mq break-point to accommodate the wider Nokia Lumina screen? 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/
Re: [css-d] Close to Accurate Retina Display of Graphics Preview ?
On Wed, Jan 28, 2015 at 11:09 PM, Crest Christopher crestchristop...@gmail.com wrote: I need to preview retina display graphics on a PC in comparison to non-retina, the browser hacks, brought forth by Chrome or FireFox in my opinion do a lack luster Job, showing me a page at 200% really doesn't do a whole lot of good, so does not owning a iPad or iPhone but I won't add an Apple product to my workbench, thanks, but no thanks. Can anyone offer any suggestions ? Christopher sigh url? -- 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/
Re: [css-d] Close to Accurate Retina Display of Graphics Preview ?
On Thu, Jan 29, 2015 at 12:51 AM, Crest Christopher crestchristop...@gmail.com wrote: I didn't supply a URL because I want to know how I can go about this ? Christopher Complicated and difficult topic. Try searching coding retina images. -- 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/
Re: [css-d] Floats
On Sat, Jan 17, 2015 at 11:01 PM, Crest Christopher crestchristop...@gmail.com wrote: Updated [Link http://jsfiddle.net/0kmbr4cq/5/] I want to know what I'm doing wrong why Pseudo-element:after with a clearing of floats is not working for the orange box ? In this version all four blocks float left. There is nothing to clear. Works in most browsers and mobile phones. Open in a full width window and drag to small-screen rendering [or view in your mobile phone]. Please see: http://ccstudi.com/chris2.html Best, David Laakso __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats
On Sun, Jan 18, 2015 at 4:46 PM, Crest Christopher crestchristop...@gmail.com wrote: Updated [Link http://jsfiddle.net/0kmbr4cq/13/] shouldn't the orange box be below the blue boxes, as in; Blue Box Blue Box Blue Box Orange Box Is this what you had in mind? http://ccstudi.com/chris3.html 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/
Re: [css-d] Floats
On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher crestchristop...@gmail.com wrote: How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] Not sure I understand what you are attempting to do-- maybe something like this? http://ccstudi.com/chris.html 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/
Re: [css-d] Floats
On Sat, Jan 17, 2015 at 10:27 AM, David Laakso laakso.davi...@gmail.com wrote: On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher crestchristop...@gmail.com wrote: How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] Not sure I understand what you are attempting to do-- maybe something like this? http://ccstudi.com/chris.html As above with generated content .box1:before and .box1:after added... http://ccstudi.com/chris1.html 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/
Re: [css-d] rendering of Open Sans on my project site vs. Typekit
On Mon, Jan 5, 2015 at 10:36 AM, Debbie Campbell d...@redkitecreative.com wrote: Looking at the 700-weight (bold) Open Sans in the ul in this page (starting with Drill Pad Construction), can you see how the lowercase a's have the counter at the top filled in? I'm looking in Chrome, FF, IE11 on Windows 7: http://www.oilfield-construction.com/NEW_SWD/ Debbie Try setting font-size:110% on the ul. 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/
Re: [css-d] Fwd: Drop Menu failing on most Mobile Phones
Fwiw, a simple CSS drop-down menu that collapses in iPhone/5s. No attempt at animation. http://ccstudi.com/site/playpen/rz/index-v4.html 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/
Re: [css-d] Drop Menu failing on most Mobile Phones
On Fri, Nov 28, 2014 at 10:58 AM, Crest Christopher crestchristop...@gmail.com wrote: Hi, the following effect http://cssdeck.com/labs/navigation-dropdown-with-flip-effect is not collapsing on iPhone and it's not opening or collapsing on WP8.x. I can't say whether it works on Android as I didn't test on Android ? Christopher You may need js [off-topic for this list] for that to collapse in mobile. And even with js transitions can be problematic for Android. This is a CSS only method that may? work for you with transitions and max-height: http://ccstudi.com/site/playpen/nav-1.html 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/
Re: [css-d] Don't miss a space
On Tue, Nov 25, 2014 at 9:59 AM, Crest Christopher crestchristop...@gmail.com 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 | 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/
Re: [css-d] Don't miss a space
On Sun, Nov 23, 2014 at 5:31 AM, Philip Taylor p.tay...@rhul.ac.uk 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, and it appeared in my browser window which occupied the right half of my screen (your message appears on the left); all is visibly not very well ... https://www.dropbox.com/s/8qfsk1qhoipekyw/Screenshot%202014-11-23%2010.28.53.png?dl=0 Philip Taylor No issue seen this end Windows SeaMonkey/2.30. 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/
Re: [css-d] Don't miss a space
On Sun, Nov 23, 2014 at 6:52 AM, Philip Taylor p.tay...@rhul.ac.uk 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 the same artifacts. My point was not that all viewers will see the artifacts that I did, but that others /might/, and therefore an investigation into what triggers that particular aberrant behaviour might be worthwhile. I find it trivial to replicate by starting with my browser full-screen and then slowly narrowing it until the panels start to overlap. ** Phil. Granted. Cruel and unusual punishment, though. Just getting Drupal to work at default is enough to tax even Leonardo... 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/
Re: [css-d] Mobile Design Mockup Critique ?
On Wednesday, November 12, 2014, Crest Christopher crestchristop...@gmail.com wrote: I'm near completing my mobile design ... URL ? -- Chelsea Creek Studio http:// ccstudi.com desktop | laptop | tablet | mobile Sent from iPhone 5s __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.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 ?
On Wed, Nov 12, 2014 at 1:46 PM, Crest Christopher crestchristop...@gmail.com wrote: Here is the link http://i.imgur.com/pkZpfZr.jpg. Christopher That is a link to an image. This is a CSS list. If you seek comments and a critique, you'll need to point to the markup and CSS of the site in question. 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/
Re: [css-d] Mobile Design Mockup Critique ?
[trimmed] It depends... For example, a simple layout at 4, 3, 2, 1 column[s]. http://ccstudi.com/site/playpen/rz/index-v4.html 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/
Re: [css-d] Why is child wider than parent?
On Thu, Nov 6, 2014 at 5:29 PM, Angela French afre...@sbctc.edu wrote:
Hello,
Can anyone please tell me why the child (#band) is wider than the boundary of
its parent (#outcontainer)? I set width:100% on the child to make sure it
took up the entire width of the parent, but it went wider. Can't figure out
what I'm missing here. It may be the concurrent use of display:table but I'm
not sure why setting width still wouldn't work. If I set the width to 98% it
almost fits inside the parent.
http://www.sbctc.edu/OAAInstruction.html
Angela,
Try
#band {height: 52px;
background-color:#013E7D;padding-right:/*20px*/4%;text-align:right;vertical-align:middle;display:table;width:96%;/*100%*/}
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/
Re: [css-d] Responsive Images
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. 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/
[css-d] site makeover
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/
Re: [css-d] site makeover
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. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.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:12 AM, Rod Castello rodcastel...@gmail.com wrote: Hi David, Aesthetically very nice. Good design. Love the larger fonts. The only thing I would like is not having to go back to the Paintings tab to select the next painting. I would prefer you have buttons on top, like in the Photography sub-navs, or have Next and Previous buttons or arrows. Same thing on the responsive view of Paintings. I'd like to see arrows on right and left and tap those, or just finger swipe to the next painting. Going back by using the back arrow to select next painting is cumbersome. Rod Castello Next Page and Previous Page links are already on-board for all sections. Thus avoiding the need to return to the section Table of Contents. Best, David -- 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/
Re: [css-d] site makeover
On Thu, Oct 30, 2014 at 11:33 AM, Barney Carroll barney.carr...@gmail.com wrote: From a semantic level, I was confused by the black arrows in active menu items on smaller viewports: on a large viewport it's clear they're indicating the content, but on smaller screens when the layout collapses to linear, they look like calls to action to indicate nested content (subsections, or something). Might be worth hiding them on the smaller media queries? Regards, Barney Carroll Thanks. I will consider hiding the nav arrows in SSR[small-screen rendering].\ Best, David -- 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/
Re: [css-d] Responsive HTML5/CSS3 Only Template Resource
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 Try: 1/ http://bradfrost.github.io/this-is-responsive/patterns.html 2/ http://bradfrost.com/blog/web/responsive-nav-patterns/ 3/ http://www.responsivegridsystem.com/ 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/
Re: [css-d] Slides JS behavior due to CSS? (OT?)
On Fri, Oct 24, 2014 at 10:49 PM, J.C. Berry jcharlesbe...@gmail.com wrote: Hello all, Feel free to tell me that this is not a CSS issue, but I thought I'd ask: We have a sliding banner on our main site homepage http://www.xifin.com And our radiology microsite homepage http://www.xifin.com/radiology But you will notice on the main site that there is a jump in the image at the end of each transition. Do you think this is due to a CSS problem? The script is the same on both sites, so I am stumped. -- J.C. Berry, M.A. No jump seen in the image at the end of each transition at http://www.xifin.com OX Yosemite -- FF, Chrome, Safari, or Opera. 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/
Re: [css-d] Grid System
On Sat, Oct 18, 2014 at 6:28 PM, Crest Christopher crestchristop...@gmail.com wrote: I have a css grid question..[trimmed] Thanks Christopher Christopher, This does not answer your specific questions. It is simply a coded example of a three column responsive grid layout. Variations of column widths and their respective gutters/margins within the same layout is possible. Percent is used for the fluid columns and the margins [gutters]. Open in a full window and drag to a 480px mobile window. It is a spin on this method: responsivegridsystem.com Good luck. 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/
Re: [css-d] Grid System
On Mon, Oct 20, 2014 at 6:39 AM, David Laakso laakso.davi...@gmail.com wrote: On Sat, Oct 18, 2014 at 6:28 PM, Crest Christopher crestchristop...@gmail.com wrote: I have a css grid question..[trimmed] Thanks Christopher Christopher, This does not answer your specific questions. It is simply a coded example of a three column responsive grid layout. Variations of column widths and their respective gutters/margins within the same layout is possible. Percent is used for the fluid columns and the margins [gutters]. Open in a full window and drag to a 480px mobile window. It is a spin on this method: responsivegridsystem.com Sorry. The uri is http://ccstudi.com/site/playpen/layouts/grid.html Good luck. Best, David Laakso Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile -- 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/
Re: [css-d] Styling a menu
On Wed, Oct 15, 2014 at 1:04 PM, Peredur pere...@peredur.net wrote: I imagine that this will turn out to be a very simple question, but never one to avoid displaying my own ignorance, here goes... I'm trying to create a layout for a website that is in dire need of attention and this (URL below) is a mockup of something approaching what I'm aiming for: http://peredur.net/unidirectory/ The only thing that I really don't like about it is that the navigation menu is over to the left and so looks a bit odd. In the tutorial from which I got most of the code (http://demo.ourtuts.com/menu/), the menu is centered, but I'd rather not do that if I don't have to - especially as it would mean, I think, giving the menu a fixed width, which I'm not keen on doing as it might mess up the display on mobile devices. What I think I'd prefer to do is to put a full-width background the same width as the #wrapper div and the same height as the menu, and the same colour as the footer background, behind the menu. As yet, though, I've failed to find a way to do that. I imagine that the problem is because the menu is floated and so any block element I put around it has no height, but I've no idea what to do to get around this. Giving a surrounding div a height does not seem an option since it would have to correspond to something like 20px plus the height of the box containing the menu item text and I'm not sure how to do that - or if it would even work. Thanks in advance Peter Peter, One way to do that is to put the nav after the footer in the markup. And then absolute position the nav into a block [article] of padding. Once you get to the media queries, the amount of padding needed can be tweaked-- less needed at desktop, and more needed at mobile. A fast and dirty example without media queries: http://ccstudi.com/school.html 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/
Re: [css-d] shake
On Sun, Sep 21, 2014 at 10:50 PM, Georg ge...@gunlaug.com wrote:
Den 22.09.2014 03:36, skrev David Laakso:
On this page, http://ccstudi.com/site/colophon/cp.php , the links
within the right-column text-block shake on hover.
You can simply add...
.cp article p a.offsite:hover,
.cp article p a.offsite:focus,
.cp article a.offsite:active {display: inline;}
...to override the (other) link styles that now turn those links into
'display: block' on hover.
regards
Georg
Problem resolved. Thanks to Georg and Philippe.
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/
[css-d] shake
Greetings, On this page, http://ccstudi.com/site/colophon/cp.php , the links within the right-column text-block shake on hover. css http://ccstudi.com/site/css/sisu.css What to do? 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/
Re: [css-d] Can't vertically center image
On Sat, Sep 20, 2014 at 4:39 PM, Kim Brooks Wei kimi@kimbwei.com wrote:
Hi. At http://madresporobama.org/, I'm trying to center the left image
vertically. What am I doing wrong, or more importantly, how do I accomplish
this?
Best,
Kimi
Kim,
Try?
.container img{border:1px dotted red;margin-top:2.5em;}/*--tweak*/
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/
Re: [css-d] iFrame Tag Error in Validation
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 Dunno. Need page markup. Try: !doctype html html lang=en-us head meta charset=utf-8 titlestuff/title /head body iframe class=c1 src=c2.png div/div /iframe /body /html 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/
Re: [css-d] how to locate un-used CSS?
On Thursday, September 11, 2014, John j...@coffeeonmars.com wrote: Is there a way to determine which CSS are not being used .. . John, Try dust me selectors an add-on from Firefox. Best, David Laakso -- Chelsea Creek Studio http:// ccstudi.com desktop | laptop | tablet | mobile Sent from iPhone 5s __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.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 drop-down menu issues
On Sat, Aug 16, 2014 at 8:11 PM, John j...@coffeeonmars.com wrote: At this link, http://www.coffeeonmars.com/screenshots/menu-prob/product.php I am having issues with the header nav in that I feel I’ve done a lot of kludges to get it to behave correctly and not explode the page.. ...such as giving a white 1px border to the nav (else everything below it disappears!) I know that some floats are necessary to make the child menu items behave correctly, but I’ve had to float the menu itself or else the sub nav at the left (also floated left) shoots over to the right. My question: can anyone suggest how I might better construct this header nav? it basically looks the way it needs to; would prefer fewer kludges to get it that way. Fewer kludges tells me fewer things to bite me down the road. Thank you! John John, Compare your page in FF, Chrome, and Opera. First place to start is to validate the markup. . 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/
Re: [css-d] Google map link won't open in iPhone - is this a css issue?
On Fri, Aug 8, 2014 at 4:30 PM, bho...@aol.com wrote: Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm The link sent me to the map in gmail on iPhone 5s. asideI needed a magnifying glass to find it in portrait mode/aside Best, Davd 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/
Re: [css-d] Web fonts
On Wed, Jul 30, 2014 at 10:20 PM, Stuart King zinlo...@gmail.com wrote: Hi CSSer's: I cannot figure out why the web font does not work for the body text. I an using Century Gothic. I got the fonts to work with the different sub headers and the footer. I have tried tech support from myfonts.com - they were worthless and now from monotype, also worthless. Help. http://younglighteducate.com/pages/ccss_students.html Thank you. Stuart MyFonts are linked to the document from the head of each page-- something like this: link rel=stylesheet href=whateverfont/whateverfont.css http://ccstudi.com/museoslab900/museoslab900.css type=text/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/
Re: [css-d] FireFox issues displaying height of div
On Fri, Jul 25, 2014 at 3:13 PM, Richard Wendrock Forum fo...@thehomepagestore.com wrote: Does anyone know of an issue with FireFox not displaying the height of a div properly? The column on the right with the blue background appears correct in IE and Chrome. For some reason the column does not extend below the link. http://advres.thehomepagestore.com/consulting_unconventional_resources.php Thanks, Richard Richard, I see no difference in the blue column height in the current versions of Chrome and Firefox in OS X 10.9.4. 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/
Re: [css-d] why are ems rendering large?
On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher crestchristop...@gmail.com wrote: Now you confused me ? . An em is the same as the font-size; if your font-size is 120%, an em will be 20% larger than in a block where the font-size is 100%. Christopher, I think your question has been answered. Without knowing the above some of us who have visual orientation, simply adjust em until it looks right. 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/
Re: [css-d] Struggle to type in Email Input Field
On Mon, Jul 7, 2014 at 10:31 PM, Crest Christopher crestchristop...@gmail.com wrote: Hi, I can't solve why a struggle is required to get the cursor into the input email field area. You have to scroll down to the bottom of the page. Placing the cursor in the Name input field works fluid, placing the cursor in the Email field is a struggle. I moved the Email Label by 2px to the right assuming it was interfering with the input field, that assumption was wrong ? [Link http://www.thecreativesheep.ca/webdesignprojects/largeprojects/CreativeSheep/cs_site.html] Forms are the bane of most every web designers existence particularly in moble. But since your site is currently for desktop, and if you are on an Apache server, you may find this well written article very helpful in creating a secure form with an html or php page extension: http://pageaffairs.com/notebook/php-contact-formhttp://pageaffairs.com/notebook/php-contact-form Best, David Laakso __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Jun 20, 2014, at 14:42, Tom Livingston tom...@gmail.com wrote: List, We've had a report of a rendering issue on this site: http://www.mlmic.com The user saw a blank, blue screen ( a brand color) in current Chrome and Opera (Mac, I believe). Also, Google Webmaster Tools Fetch As Google also renders it blank blue. We have not been able to recreate the issue except for in Google Webmaster Tools and that doesn't give much help in troubleshooting it. Do any of you see this issue, and if so, can you help track it down? Thanks in advance... -- Tom Livingston | Senior Front-End Developer | Media Logic | Not seen current version Opera nor in current version Chrome: OS X 10.9.3 . Best, David Laakso __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
On Thu, Jun 12, 2014 at 5:42 PM, Richard Wendrock Forum
fo...@thehomepagestore.com wrote:
It appears there is an optical illusion when using font-variant:small-caps;
The first letter of each word appears more bold than the other letters in
the word.
.fonttext23 {
font-size: medium;
font-family:Arial;
text-align:left;
font-variant:small-caps;
font-weight:bold;
}
I cannot find a way to make all letters uppercase and have the same bold
weight.
Can you solve this problem?
Not using Arial. The property font-variant is used to choose between
normal or small-caps variants of a font. Arial does not have a
small-caps variants.
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/
Re: [css-d] Mega drop down menu
On Sat, Jun 7, 2014 at 3:24 AM, Peter SHILLA peter.shi...@gmail.com wrote: Am new to mailing list and web development too. Could anyone link to CSS material for creating mega drop down menu using CSS, right from first principle ? regards//Peter Theory http://www.smashingmagazine.com/2013/03/27/navigation-mega-sites/ One practical CSS/JS solution http://www.cssplay.co.uk/menus/cssplay-mega-menu.html#url 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/
[css-d] Falstaff weds Frutiger.
Constructive comments and suggestions on this site are always appreciated. html http://ccstudi.com css http://ccstudi.com/site/css/sisu.css Best, David Laakso -- 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/
Re: [css-d] Falstaff weds Frutiger.
On Fri, Jun 6, 2014 at 6:22 PM, Georg ge...@gunlaug.com wrote: Only comment I have is that I feel the external link icon on the social icons in the footer are unnecessary. Otherwise, very nice. Me think so too - social icons are self-explaining. Otherwise good overall balance, and looking good. regards Georg I agree. Correction is on my server. Thanks. 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/
Re: [css-d] dealing with media breaks
On Tue, Mar 25, 2014 at 9:16 PM, John j...@coffeeonmars.com wrote: Are there best practices in dealing with setting up and modifying media breaks and the CSS for each? John John. There are a number of methods. You will find the one that works best for you and your clients. As with anything else on the Web, there is no such animal as too much testing before you let the horses out of the gate. Best, David Laakso __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.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/11
On Sun, Mar 16, 2014 at 8:15 PM, David Laakso laakso.davi...@gmail.com wrote: In the footer ie/11 is chopping-off the crossbar of the numerical digit 4. What to do? Thanks to all who replied both on and off-list. Re-set css for the containing blocks and re-set the generated content. letter-spacing to .175em. The footer proper needs more work in all browsers: but, at least, the revised letter-spacing seems to resolve the specific clipping issue I wrote about in IE/11. html http://ccstudi.com/ Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] footer ul li has same attributes as header nav ul li?
On Sat, Mar 15, 2014 at 8:30 PM, John j...@coffeeonmars.com wrote: I could swear that I adequately differentiated my header nav from my footer nav, but the browsers are telling me differntly.. Here is the link, if you could kindly take a peek: http://coffeeonmars.com/W200/test/DTake_Index.html The issue is the links at the bottom, which appear to be spilling out of the red area, have the same color, background-color, etc as the nav menu links..I'm just not seeing why..maybe need to step away for a bit.. Thank you! John Dunno John. Start with the obvious. Correct the CSS parse errors and validate the html. Best, David Laakso __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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/11
In the footer ie/11 is chopping-off the crossbar of the numerical
digit 4. What to do?
html
http://ccstudi.com/
css
http://ccstudi.com/site/css/sisu.css
footer::after{
border:1px dotted red;
content:'14;
color:rgb(218,165,32);
font:1250% 'falstaffMTStd';
letter-spacing:-.25em;
margin:0;
padding:0;
position:absolute;
top:-30px;
left:0;
width:40%;
text-shadow:2px 2px 5px rgb(100,100,100)}
Thank you.
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] Start at the bottom! (was Front page breaking in IE8, maybe 9 too)
On Wed, Oct 9, 2013 at 12:59 PM, Chris Rockwell ch...@chrisrockwell.com wrote: I'm not the one to make the decision, but I'm pretty sure this is off-topic - I wasn't going to respond because of this, and that I interpreted the tone as overtly confrontational from the get go. However, I have a feeling that, if an official policy were to be put into place, this conversation may influence it, so I'd like to give my two cents. I reply at the top because I feel it is easier to read, not only during the conversation, but in the archived format. It is not user friendly, in my opinion, to do a google search for a question and, upon finding an archived list response, having to scroll down through a quoted reply to find the response - I prefer to see the responses at the top of their respective blocks. It is this that most strongly influenced my decision to *always* reply in this way (not just on discussion lists, but in my personal and work emails as well). Now, that being said, if there are specific points that are being addressed in a reply, I can certainly see the benefit to quoting those in your reply (replying inline is what I believe this is called). Moving forward, absent an official policy, I will do my best to remember to reply inline when appropriate. On Wed, Oct 9, 2013 at 12:45 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: MiB wrote: I guess it's your kind of common courtesy to repost private email correspondence that you initiated offlist yourself. Why not respond to the similar posts I made to the list instead? Very strange. Out of respect for list policies (Avoid[ing] Personal Conflict on Mailing Lists.), I will not respond to this on-list. 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/ -- Chris Rockwell __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Chelsea Creek Studio http://ccstudi.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] Start at the bottom! (was Front page breaking in IE8, maybe 9 too)
Apology for the noise. The list policies are here: http://www.css-discuss.org/policies.html Best, David Laakso On Wed, Oct 9, 2013 at 2:14 PM, David Laakso laakso.davi...@gmail.com wrote: On Wed, Oct 9, 2013 at 12:59 PM, Chris Rockwell ch...@chrisrockwell.com wrote: I'm not the one to make the decision, but I'm pretty sure this is off-topic - I wasn't going to respond because of this, and that I interpreted the tone as overtly confrontational from the get go. However, I have a feeling that, if an official policy were to be put into place, this conversation may influence it, so I'd like to give my two cents. I reply at the top because I feel it is easier to read, not only during the conversation, but in the archived format. It is not user friendly, in my opinion, to do a google search for a question and, upon finding an archived list response, having to scroll down through a quoted reply to find the response - I prefer to see the responses at the top of their respective blocks. It is this that most strongly influenced my decision to *always* reply in this way (not just on discussion lists, but in my personal and work emails as well). Now, that being said, if there are specific points that are being addressed in a reply, I can certainly see the benefit to quoting those in your reply (replying inline is what I believe this is called). Moving forward, absent an official policy, I will do my best to remember to reply inline when appropriate. On Wed, Oct 9, 2013 at 12:45 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: MiB wrote: I guess it's your kind of common courtesy to repost private email correspondence that you initiated offlist yourself. Why not respond to the similar posts I made to the list instead? Very strange. Out of respect for list policies (Avoid[ing] Personal Conflict on Mailing Lists.), I will not respond to this on-list. 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/ -- Chris Rockwell __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Chelsea Creek Studio http://ccstudi.com -- Chelsea Creek Studio http://ccstudi.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] Container Div
On Tue, Oct 1, 2013 at 5:25 AM, Karl DeSaulniers k...@designdrumm.com wrote: Can anyone help me? I am looking to create a DIV that is centered horizontally and vertically in the window and inside this div I have images and text and the like. I want the images and the text to stay inside this div. How can I go about this? Karl DeSaulniers Many moons ago Georg Sortun developed this method that still does the trick. I would pay particular attention to the first sentence of his article. http://www.gunlaug.no/contents/wd_additions_20.html Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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:hover: size of Background-color?
On Thu, Sep 19, 2013 at 6:43 PM, John j...@coffeeonmars.com wrote:
What attribute governs the size (H x W) of background-color for the hover
state? I have background-color as rgb black, which appears on hover, but
only just around the text. I'd like the background color to cover a larger
area, as delineated by the red border (which will go away) in the top left
menu. I know this has got to be something incredibly simple.
thank you!
John
Try:
nav ul li a:hover{
display:block;
color:red;
background-color:rgb(0,0,0);
}
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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 can I use position fixed in IE?
On Fri, Aug 30, 2013 at 5:50 AM,
marie-ange.demeulemees...@bnpparibasfortis.com wrote:
Tom,Thank you for you code
I have a bad feeling. This will not work in Quirks mode.
Regards,
MarieAnge
.
On Thu, Aug 29, 2013 at 11:26 AM, Eric e...@minerbits.com wrote:
Hello Again,
It works in IE10 also.
Eric
On August 29, 2013 at 10:43 AM
marie-ange.demeulemees...@bnpparibasfortis.com
wrote:
Hi,
How can I use position fixed in IE 8+ without changing the doctype:
!DOCTYPE
html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN , and without
using
jQuery?
This code doesn't work:
.test{
z-index:2147483647;
position:fixed;
bottom:0;
left:0;
}
Thanks a lot.
Regards,
Marie-Ange
==
BNP Paribas Fortis disclaimer:
http://www.bnpparibasfortis.com/e-mail-disclaimer.html
BNP Paribas Fortis privacy policy:
http://www.bnpparibasfortis.com/privacy-policy.html
==
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
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/
--
Chelsea Creek Studio
http://ccstudi.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 can I use position fixed in IE?
On Fri, Aug 30, 2013 at 5:50 AM, marie-ange.demeulemees...@bnpparibasfortis.com wrote: Tom,Thank you for you code This will not work in Quirks mode. Post a link to the site or a test page of it. Best, David Laakso PS Apology for the noise... __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] navigate site
On Tue, Jul 16, 2013 at 10:06 PM, Karl DeSaulniers k...@designdrumm.com wrote: I personally don't like the navigation, no offense. None taken, Karl. I received this suggestion from Philippe Wittenbergh that I have decided to run with: Dunno. The original version feels easier to use, and more obvious for keyboard users or users depending on assistive technology (VoiceOver,…). Although I would consider making the 3 buttons less 'heavy'. How about, for small screens only, putting the navigation at the bottom? (with a button linking to it?), This is the original version Philippe mentions above http://ccstudi.com/rum/ And this is a fast and dirty attempt to make what he suggests happen in desktop, tablet, and mobile. Cursory checked thus far only in Windows 7 and Android/2.3.6. http://ccstudi.com/rum/ No javascript or jQuery necessary. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] navigate site [error correction]
Link corrected: And this is a fast and dirty attempt to make what he suggests happen in desktop, tablet, and mobile. Cursory checked thus far only in Windows 7 and Android/2.3.6. http://ccstudi.com/russell/ No javascript or jQuery necessary. David Laakso -- Chelsea Creek Studio http://ccstudi.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] navigate site
Seeking constructive comments and suggestions on the method used to navigate a responsive [desktop, tablet, and mobile] site. html http://ccstudi.com/russ/ css http://ccstudi.com/russ/r/r.css Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] site review: hydrogeologist
On Thu, Jul 11, 2013 at 10:37 AM, Greg Gamble ggam...@sbctc.edu wrote: And what is Western text embedded inside CJK text? Greg Chinese, Japanese, and Korean. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] site review: hydrogeologist
Constructive comments and suggestions on this responsive layout appreciated. http://ccstudi.com/rum/ css http://ccstudi.com/rum/r/r.css Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] site review: hydrogeologist
On Tue, Jul 9, 2013 at 3:46 PM, Karl DeSaulniers k...@designdrumm.com wrote: Take a look at it on a phone browser. I have an iPhone 5 using safari. View portrait first then rotate to landscape. The top nav (for me) is overlapping the header text. Best, Karl http://ccstudi.com/rum/ css http://ccstudi.com/rum/r/r.css Karl, overlap not seen [behaves as intended] when rotating from portrait to landscape in this particular iPhone 5 simulator http://iphone5simulator.com/ . However, what one gets on a simulator dose not always match what one sees on an actual device. Anyone else see the problem Karl wrote about on iPhone 5 and/or have a fix for same? Note that the nav is the last item in the html source and is absolute positioned in the css to the top of the page; consequently, there may in fact be some overlap in some small screen devices. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] site review: hydrogeologist
On Tue, Jul 9, 2013 at 5:35 PM, Karl DeSaulniers k...@designdrumm.com wrote: Take a look.. http://designdrumm.com/IMG_0164.PNG HTH, Best, Karl DeSaulniers re: http://ccstudi.com/rum/ Thanks for the screen shots. I have modified the CSS. Please open in iPhone 5 portrait mode. Rotate to landscape. Reload the device or tap any of the three bunched up links. Does iPhone 5 landscape recover, now? Thanks Karl. Best, David Laakso __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.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 review: hydrogeologist
On Tue, Jul 9, 2013 at 6:36 PM, Greg Gamble ggam...@sbctc.edu wrote: Curious on why you placed the Navigation at the bottom of the page? I believe content is king and should precede navigation in the html. Also, why are you using all of the soft hyphens ... #x00ad; ? Not all of them are necessary but primarily because font-scaling in mobile hand-sets causes long words to break the outermost containing block [producing horizontal page wiggle ]. In plain English one has to scroll both horizontally and vertically to read the text. And using -moz-hyphens:auto;-ms-hyphens:auto;-o;webkit-hyphens:auto;hyphens:auto; is not even close to being ready for prime-time. Best, David Laakso __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.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 review: hydrogeologist
On Tue, Jul 9, 2013 at 10:57 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 10 juil. 2013 à 04:46, Karl DeSaulniers k...@designdrumm.com a écrit : Take a look at it on a phone browser. I have an iPhone 5 using safari. View portrait first then rotate to landscape. The top nav (for me) is overlapping the header text. It is a bug in Safari 6.0x and the equivalent Mobile Safari on iOS 6.x (and maybe older versions of Safari, haven't tested). That is fixed in Safari.next. I think toggling between 'block' and 'inline-block' on the li instead of the b and a kids will work better. Keep the latter two as 'block' the whole time. Philippe re: http://ccstudi.com/rum/ Bingo! That's the ticket to ride. Thank you, Philippe. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Google Chrome height issue
On Sat, Jul 6, 2013 at 1:47 PM, Rod Castello rodcastel...@gmail.com wrote: Hi List, On this site: http://pedroastudillo.com/char_color1.php the thumbnails in the left side container were or are stretching out vertically. Works fine in FF and Safari - not sure on IE. But Chrome was stretched out. I changed the css height declaration from percentage to height in pixels. The fix seems to have worked on my Google Chrome browser, but the artist said it's still broken (stretched vertically) when he views it. Can someone else do a check of it and let me know how it's working in Chrome for you? And, if it's still stretched out, what I might do to fix it. Thanks in advance, Rod Castello Rod, The thumbnails seem alright this end in Windows 7 current ver Chrome, FF, Opera Next, and IE/10. Best, David Laako -- Chelsea Creek Studio http://ccstudi.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] what should go in html{ } ?
On Wed, Jun 26, 2013 at 5:29 PM, COM j...@coffeeonmars.com wrote: my css all begin like what's pasted below. I have no idea what things ought to be inside the html selector. Any thoughts on what the best practices are? Thank you! John aside Hang in there, John.. Handling the html conundrum and making content readable and legible on landing is not a rocket-science and an advanced degree in physics is not needed to make it happen on the Web. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] background image AND background color?
On Wed, Jun 19, 2013 at 10:58 AM, COM j...@coffeeonmars.com wrote: On Jun 18, 2013, at 6:38 PM, David Laakso laakso.davi...@gmail.com wrote: Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Thank you..this is good to hear. Let me make sure I expressed my request clearly when I say on top..picture a header 960x100px which has a background image. imagine that same header with a color applied to the entire 960x100px dimension as opposed to: a header with a background image and a background color above it in the sense of closer to the top edge of the view port. I fiddled yesterday and got nothing other than I can vary the opacity of my color but not so that the background image's color is affected by that of the color above it (above it in z-space) Thank you! JOhn John, For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. Transparency is determined by the code but it is dependent on the hue, saturation, value of the elements proper-- their z-index, the type of monitor used to view the page, ambient light when viewed... and god only knows what else. For what its worth this is a site in progress that uses various combinations of svg images, linear-gradients, and rgba-transparency in the header, navigation, sidebar, and footer: http://ccstudi.com/ Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] background image AND background color?
On Wed, Jun 19, 2013 at 11:51 AM, COM j...@coffeeonmars.com wrote:
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote:
For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.
A link to the page in question is here:
http://coffeeonmars.com/test/flextest/flextest.html
the part I'm talking about is at top, where it says heading one and
heading two; behind them in the header is a jpg of what looks like some
light texture. in the css is also a background color for that element: a red
at 0.4 alpha.
my goal is to have the texture image's color influenced by that background
color, IOW, by varying the opacity of the color, the image would have more
or less of a reddish cast to it.
Thank you!
John
John,
rgba coding error...
Change this:
header{
background-color:rgba(240,0,0 0.4);
}
to this:
header{
background-color:rgba(240,0,0,.04);
}
or this:
header{
background-color:rgba(240,0,0,.4);
}
Note the last comma.
Not tested.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] background image AND background color?
On Wed, Jun 19, 2013 at 1:46 PM, COM j...@coffeeonmars.com wrote: confirmed…here's what worked for me./.. To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html John The red-like color is opaque: no texture whatsoever seen in Windows 7 any browser. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] background image AND background color?
On Tue, Jun 18, 2013 at 8:22 PM, COM j...@coffeeonmars.com wrote: Fiddling with trying to combine a background image with background color applied to the same element and hoping to vary either one or both opacity. Is this possible to do…I guess what I'm looking for is to do with CSS, images and color what you can do with Photoshop layers. Thank you! John Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] weirdest wrapping issue
On Fri, Jun 14, 2013 at 6:38 PM, Angela French afre...@sbctc.edu wrote: I've got the weirdest wrapping issue going on at this page: http://168.156.9.250:8080/academy05-06.aspx . Currently it is rendering fine, but if I swap out the code blocks for Mari and Randy (put Randy in position 5) the last photo in the group will not render in the left most position. I know that sounds very weird, but I experimented to kingdom come with this thing and it all seems to boil down to randy. I can't figure out why. This page is one of many made from the same template and this is the only page on which I experienced this strange issue. The only reason I discovered this is because I'd like to put the people in alpha order which puts Randy in the 5th position. I had to swap him out with Mary Ellen to get it to work correctly. Angela French It boggles the mind. And then some. Does correcting any of the CSS parse errors relevant to that particular page make any difference? Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] Unresponsive images
On Mon, Jun 10, 2013 at 7:37 PM, David Hucklesby huckle...@gmail.com wrote:
Coming late to the party, I'm attempting my first mobile first design.
Having
trouble with this code for images on iPad:
.col div img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
Here's what I see on my iPad:
https://dl.dropboxusercontent.com/u/36859227/images/iPad-flowers-land.jpg
She is doing much better than your iPad image in Win 7 Firefox/21.0
[resizeview responsive layoutsTablet portrait (768x1024)].
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] tbnt
Greetings, I'd like to make the space between the digits 2 and 8 tight but not touching [tbnt] without the numeral 28 overlapping the ochre-like color border above it. So far I am not having much luck... anyone care to share the secret to make it happen? test case http://ccstudi.com/test39.html Thanks, David Laakso -- Chelsea Creek Studio http://ccstudi.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] tbnt
On Mon, May 27, 2013 at 12:26 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
Le 27 mai 2013 à 12:09, David Laakso laakso.davi...@gmail.com a écrit :
I'd like to make the space between the digits 2 and 8 tight but not
touching [tbnt] without the numeral 28 overlapping the ochre-like
color border above it. So far I am not having much luck... anyone care
to share the secret to make it happen?
test case http://ccstudi.com/test39.html
Have you tried
div::before { letter-spacing: -.07em; }
?
Philippe
Corrected to server. Thanks!
Dummy this end had one test with letter-spacing at .05em but neglected
to put in the all important minus sign -- so much for trying anything
when too tired to think straight...
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] Supporting Retina Images
On Fri, May 24, 2013 at 3:00 PM, Tom Livingston tom...@gmail.com wrote: List, Does anyone have any good resources on supporting 2x images (Retina)? A 'how-to' would be good as well as I have not yet done this. Also, DO YOU support Retina/2x images in your web work?? Thanks! Dunno, Tom. My understanding is that SVGs offer inherent scaling ability... in other words they adapt to any pixel density. Try making one and see what you think? Inkscape http://inkscape.org/ is an open source vector graphics editor. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] Containers and height
On Wed, May 22, 2013 at 2:29 PM, r...@thedesignedge.com r...@thedesignedge.com wrote: In a non responsive page I am wondering if anyone has any advice on getting a container div to expand to the content within. Thanks, - Rick Ranum Try adding overflow:hidden; to the container div. aside: a clickable link to the page in question is always an advantage... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 2:37 PM, Micky Hulse mickyhulse.li...@gmail.com wrote:
Howdy,
I'm in a situation where I would like to use @media all { ... } and
@media screen { ... } around blocks of CSS in a large collection of
style sheets.
Test page using @media all { ... }:
http://jsbin.com/alugiv/1
Test page using @media screen { ... }:
http://jsbin.com/alugiv/2
I've tested in IE6-8 and it appears that those browsers ignore the
media queries (or, they follow the rules) and load all styles found
within the MQ blocks (and, the cascade does not appear to be
affected).
Question: My test page is simple, so maybe I'm missing something
obvious (or some sort of corner case) ... Is what I'm seeing actually
true? Do old IEs not mind @media screen/all { ... } syntax?
Where would I go to find official docs that state weather or not this
is the case? I'd like to use this on a production site, but I kinda
want to confirm that what I'm seeing in my tests is really going to
work for me via a live site. :)
Can anyone confirm or shed light on official documentation somewhere?
Thanks!
M
IE 6/7/8 do not support media queries. See scripting work-around here:
http://12412.org/2012/01/media-queries-ie/
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] external link image
This is a site in progress.
On this page http://ccstudi.com/site/playpen/index.php there is a list.
The external link image needs to be removed from all items in the list.
In the right column of the footer the external link item needs to
remain for this text link: Some rights reserved
CSS embedded
a.ext-own::after,a::after{content:url(../img/extlink.png);
position:relative;
top:-.4em;right:-4px;
margin:0 .45em 0 -2px;
padding:0;
display:inline;
vertical-align:baseline}
a:not([href*=http]):not([class*=ext-own])::after{display:none}
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] Left sidebar aligned with a centered block
On Tue, Apr 30, 2013 at 12:23 PM, Zaia Z zigaew...@gmail.com wrote: Thanks for the demos! (http://ccstudi.com/x.html and http://jsbin.com/asozay/1/) -- they were very helpful, and sorry for the late response as I was probing through the nuances of the code. Zaia Zaia, Dunno if this will meet your requirements. Open in a full window and slowly drag drag to 480 mobile... http://ccstudi.com/x1.html Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] Left sidebar aligned with a centered block
On Thu, Apr 18, 2013 at 9:21 AM, Zaia Z zigaew...@gmail.com wrote: How should I arrange the CSS for the sidebar such that it always maintains a consistent gap to the left of the centered block? I'd appreciate your advice on this; thanks! Zaia Not sue why you might want to do that? Nevertheless, try setting the blocks in percent-width. The gap will always remain. However, it will become narrower respective to the widths of the blocks as the window width decreases. As the saying goes one picture is worth a thousand words... Fwiw, please see http://ccstudi.com/x.html Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] review wildflower
re: http://ccstudi.com/site/portfolio/z/index.html aside Latin names[faked at the moment] of wildlowers added beneath images in the slideshow all pages... Kudos to Val Nelson-Metlay for this offlist non-css suggestion. /aside Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] review wildflower
Greetings, Comments and suggestions on this desktop, tablet, mobile site appreciated... markup http://ccstudi.com/site/portfolio/z/index.html css http://ccstudi.com/site/portfolio/z/z.css Known issues: 1/ not corrected for ie 6 or 7 as of this writing 2a/ Win7 current stable Opera clips top of drop caps 2b/ Inside pages Win7 current stable Opera unable to find/load the 700 weight slab-serif webfont -- per page reload needed to bring up that font. Note that OperaMobile loads the same font without difficulty on Android/2.3.6. Thanks. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] desktop first tutorial
On Tue, Apr 2, 2013 at 7:41 PM, Micky Hulse mickyhulse.li...@gmail.comwrote:
Actually, my main question:
When designing desktop first MQs, how should the MQs stack?
Thanks!
M
The computation, calculation. and variation is endless...
desktop laptop tablet
#stuff{width:98%;min-width:120px;max-width:68em}
mobile handset
@media screen and (max-device-width:480px),screen and (max-width:480px){
#stuff{width:99%;min-width:99%;max-width:99%}
Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] substitute font for Myriad Pro
On Fri, Mar 22, 2013 at 11:22 AM, Hull, Lauribeth lh...@everettsd.org wrote:
The district I work for has a new logo and the graphic artist has Myriad Pro
as the supporting font. I know I need to have some back-up fonts in my css. I
have found the following options in researching online.
Do any of you ... have a preference or have some other suggestions.
LauriBeth Hull
{font-family: 'MyriadPro', Lucida Grande, Lucida Sans
Unicode, 'Helvetica Neue', Helvetica, Arial, sans-serif} ???
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] substitute font for Myriad Pro
On Fri, Mar 22, 2013 at 2:27 PM, Markus Ernst derer...@gmx.ch wrote: Graphic designers and other people who work in the media business, such as myself, often have old PostScript Type 1 versions of typefaces like Helvetica Neue and Gill Sans installed. They are ok for print, but have awful screen appearances. Thus, a website using those fonts may look bad on my computer. Perhaps print media designers ought to keep their old PostScript Type 1 versions of typefaces installed on another machine? Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] Getting Started
On Tue, Mar 19, 2013 at 12:20 PM, Vladimir vieir...@gmail.com wrote: Hi Guys, I'm getting started with webdevelopment . I know CSS, HTML and begining javascript and Jquery .My question is what's the process you guys use to develop websites and why? Do you develop everything from scratch( notepad++)? Do you use templates (css HTMl, Jquery etc) ex: Bootstraper , Less or other and make changes to style. Do you use Content management systems ( drupal, Word press, etc) or any other way? I'm kind of lost what would be best for me ? and what people are using and why. Let me know any suggestions, Ask 20 people and you are likely to get 17 different answers. As usual, I think it depends... and, more important -- since the mission of this list lies more in the realm of the practical application of CSS.you may have better luck with your question on http://webdesign-l.com/ . aside I am a designer rather than a developer. The all important tools on this end are a sheet of paper and a pencil inorder to do rough draft visual, then directly to html/css for a rough on screen layout... usually, nowadays, a layout that strives from scratch to work from one address in desktop, tablet and mobile handsets. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] desktop tablet mobile [+1]
markup http://ccstudi.com/site/portfolio/x/index.php css http://ccstudi.com/site/portfolio/x/css/x.css The above site was posted a few days ago. Since then these changes and revisions -- among others -- have been made to the server: 1/ The painting images are now 100% rather than 60% of their containing block in desktop, tablet, mobile. 2/ The navigation block remains beneath the primary content block in desktop and tablet but is now positioned immediately below the header at media query 480 mobile and down. 3/ Various color revisions have been made particularly within the navigation links.. Your constructive comments and suggestions are always welcome. Thanks. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] desktop tablet mobile
Constructive comments and suggestions on this simple site gratefully appreciated. markup http://ccstudi.com/site/portfolio/x/index.php css http://ccstudi.com/site/portfolio/x/css/x.css Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] desktop tablet mobile
On Tue, Mar 19, 2013 at 9:37 AM, Philip TAYLOR p.tay...@rhul.ac.uk wrote:
Why does the text move (slightly) up and down when I select
an alternative image via the linked numbers ?
Philip Taylor
David Laakso wrote:
markup
http://ccstudi.com/site/portfolio/x/index.php
Philip, I believe this has been corrected to server: #container{
min-height:330px}
Kudos to Georg Sortun http://www.gunlaug.com/ for an off-list reply
regarding a stability-fix.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] Recommended css font settings
On Sat, Feb 23, 2013 at 5:31 AM, John wasteland.t...@gmail.com wrote: Hi list, I had a break from designing websites for 5 years and I am aware that MANY things have changed since then so I have got a few basic questions regarding fonts/text display. I suppose it depends on your goal. If it can be said that the purpose of typography is to make content readable and legible on the Web-- then a way of achieving this is to set no font smaller than default. Children of all ages -- even those in hand -- will appreciate this... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] Displaying button and checkboxes in a row
On Tue, Feb 19, 2013 at 7:15 PM, Larry Martell larry.mart...@gmail.com wrote: I want to display a button and then next to it 3 checkboxes. Fwiw, please see http://ccstudi.com/fiddle.html Best wishes and good luck. David Laakso -- Chelsea Creek Studio http://ccstudi.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] Let's see if my site breaks badly
On Thu, Feb 14, 2013 at 3:56 PM, Michael Stevens bigm...@bigmikes.org wrote: www.wideopenphotography.com It's my first fully liquid layout Are you just sort of like kinda testing the waters? Or, are you actually seeking practical assistance in making your stuff work in desktop, tablet, and mobile from one address? Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] desktop ie/9 windows 7
On Tue, Feb 12, 2013 at 9:44 PM, David Laakso laakso.davi...@gmail.com wrote: Greetings, There are 3 spheres on the page and all of them are sort of like upside-down in ie/9 when compared with ff, opera, safari, gecko, and chrome. And, yes... the digit[s] should be rotated in all browsers. Now what I'll do? markup http://ccstudi.com/ Best, David Laakso Solution: a compromise based on readability and legibility-- svg sphere deleted and digits rotated in ie/9 and compliant browsers. Thanks to all who replied. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] Safari re-resize problem: floats and media queries
On Fri, Jan 25, 2013 at 4:56 AM, Joergen Lang joergen_l...@gmx.de wrote:
Safari (6.02) appears to have an issue with resizing an image in a floated
list after encountering a media query breakpoint.
http://www.joergen-lang.de/testing/resize.html
Any hints, ideas, workarounds welcome.
Jørgen Lang
Jørgen.
Try...
from:
#slideshow li img{width:100%;max-width:100%}
to:
#slideshow li img dislplay:block;width:100%;max-width:100%}
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.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] New Thread: The REM unit vs. EM's vs. PX's...
On Wed, Jan 23, 2013 at 11:49 PM, Eric e...@minerbits.com wrote: Since I'm still in the process of getting to 'Pro level I can point you to a tree Pro's site if you're interested in see how the REM unit is used: Is Andy Clarke 'pro' enough for you? His calls his site Stuff Nonsense I'm sure you know the name. Eric. re: Stuff Nonsense http://www.stuffandnonsense.co.uk/ Yes, very nice. Thanks. Shame that it is impossible to navigate the site in Android/2.3.6 [tapping the unicode symbol for navigation crashes the site, sending the user back to the phones desktop]; and, employing +1 zoom causes an enormous horizontal wiggle making the page difficult to read. Perhaps these issues will be corrected in future versions...? Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] New Thread: The REM unit vs. EM's vs. PX's...
On Thu, Jan 24, 2013 at 1:54 PM, Eric e...@minerbits.com wrote: I would assume the Andy checked his design and code on all available devices since he's an industry leader in advocating such testing. Eric, re: stuffandnonsense.http://www.stuffandnonsense.co.uk/ Nevertheless, the site -- as previously stated -- has issues [crashing the browser and a massive horizontal-scroll bar at +1] in Android/2.3.6. I made no assertion whatsoever as to either the cause or the cure of these outstanding issues. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] New Thread: The REM unit vs. EM's vs. PX's...
On Fri, Jan 25, 2013 at 12:04 AM, Eric e...@minerbits.com wrote: David, trim So shall we go into more detail on the REM and other relative units or move on to the next topic? Eric Neither. As for myself, I plan on taking in a good movie... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] New Thread: The REM unit vs. EM's vs. PX's...
On Sat, Jan 19, 2013 at 2:49 PM, Eric e...@minerbits.com wrote: I thought for the sake of beginners who might subscribe to this list we ought to discuss this in a new thread. Eric Since the mission of this list is the practical application of CSS, rather than disusing it, how about putting up a simple 2 column test page that shows how a pro would make all this happiness happen... enabling children of all ages to land on a readable and legible site delivered from one address to desktop, laptop, tablet, and mobile devices? Thanks. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On Sun, Jan 13, 2013 at 12:35 PM, Kuzeko Web Design - Matteo
Lissandrini w...@kuzeko.com wrote:
Hi all,
I would like to work on my new project building Responsive layouts making
use of flexible em-based media queries instead of pixel based.
Did you tried this approach, is there anything I should pay attention to?
Kuzeko*
Although I use a different approach, there is nothing wrong with using
em. And as with most any discipline there are many ways to achieve the
goal.
There are a couple of things to keep in mind, among them:
1/ You need a device width meta tag in the head of the document. I
used meta name=viewport content=width=device-width
2/ If you use em then you may want to declare default font-size in
percent on html and use em font-size on selectors
3/ Shoot for the ability to view the site at twice default font-size
[200%] at any device screen width [including on a mobile-device]
/without/ throwing a horizontal scroll bar.
4/ The media query may be px or em-based. I am used @media screen and
(min-width:30em) {#page{width:90%;min-width:90%;max-width:90%}}
Please see source of this simple fast and dirty test page
http://ccstudi.com/site/playpen/layouts/test_37.html
Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
