Re: [css-d] Two Phones one problem

[David Laakso]

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

[David Laakso]

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

[David Laakso]

> 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

[David Laakso]

On Mon, Feb 16, 2015 at 12:18 AM, Crest Christopher
 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 ?

[David Laakso]

On Thu, Jan 29, 2015 at 12:51 AM, Crest Christopher
 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] Close to Accurate Retina Display of Graphics Preview ?

[David Laakso]

On Wed, Jan 28, 2015 at 11:09 PM, Crest Christopher
 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


 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] rotating divs and text within a wrapper div

[David Laakso]

On Wed, Jan 28, 2015 at 11:34 PM, David Laakso  wrote:
> On Wed, Jan 28, 2015 at 7:58 PM, D Mark Weiss  wrote:
>> Thank you so much.
>>
>>
>> David's example works.
>>
>> Here is an example of the page. Sometimes I have 5 tabs and sometimes I have
>> 3 or 4.
>>
>> The names are the students who have completed that tab.
>>
>> I am trying to put the names so that they all align along the bottom.
>>
>> My concern with assigning "left" is how to calculate that number. I was
>> hoping for an approach that automatically put the divs side by side and also
>> centered them within the div for each tab.
>>
>> Take a look and tell me if I am totally crazy
>>
>> http://itls.usu.edu/~dweiss/example.jpg
>>
>> Thank you for your help so far. I was close, but not quite there.
>>
>> Mark


Given your example, would this [1] meet your need (you can add or
subtract names without modification of the CSS).

[1] <http://ccstudi.com/weiss1.html>

Best,
David Laakso
PS You are not totally crazy
-- 
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] rotating divs and text within a wrapper div

[David Laakso]

On Wed, Jan 28, 2015 at 7:58 PM, D Mark Weiss  wrote:
> Thank you so much.
>
>
> David's example works.
>
> Here is an example of the page. Sometimes I have 5 tabs and sometimes I have
> 3 or 4.
>
> The names are the students who have completed that tab.
>
> I am trying to put the names so that they all align along the bottom.
>
> My concern with assigning "left" is how to calculate that number. I was
> hoping for an approach that automatically put the divs side by side and also
> centered them within the div for each tab.
>
> Take a look and tell me if I am totally crazy
>
> http://itls.usu.edu/~dweiss/example.jpg
>
> Thank you for your help so far. I was close, but not quite there.
>
> Mark
> dmark.we...@usu.edu
>
>
>
>
>
> On Jan 28, 2015, at 2:32 PM, Tom Livingston  wrote:
>
> On Wed, Jan 28, 2015 at 4:31 PM, Tom Livingston  wrote:
>
> http://www.w3.org/1999/xhtml ">
> 
>
>
>.divOuter{
>display:inline;
>text-align:bottom;
>
>
>}
>
>.divInner1, .divInner2, .divInner3, .divInner4{
>-webkit-transform: rotate(-60deg);
>-moz-transform: rotate(-60deg);
>border: 1px dashed;
>float:left;
>width:160px;
>height:20px;
>margin-left:3px;
>margin-right:3px;
>position:relative;
>}
>
> 
> 
>  
>First DIV
>Second DIV
>Third 
> fourth
> 
> 
>
>
>
>
> 
> 
>
>
>
> Using the above code, in Chrome, the angled boxes were side-by-side
> for me (with a wide enough window, of course).
>
>
>
> Though not as close together as David's example...
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
>
>



-- 
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] rotating divs and text within a wrapper div

[David Laakso]

On Wed, Jan 28, 2015 at 12:59 PM, D Mark Weiss  wrote:
>
> I have tried numerous ways to create a wrapper div and rotate a series of 
> divs containing text so that the rotated text always lines up on the bottom 
> of the wrapper div. Whenever I do this, the entire wrapper div rotates too.



trimmed...]

I am not sure I understand your question. Are you trying to do
something like this?

<http://ccstudi.com/weiss.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

[David Laakso]

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

[David Laakso]

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

[David Laakso]

On Sat, Jan 17, 2015 at 10:27 AM, David Laakso  wrote:
> On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher
>  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] Floats

[David Laakso]

On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher
 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] rendering of Open Sans on my project site vs. Typekit

[David Laakso]

On Mon, Jan 5, 2015 at 10:36 AM, Debbie Campbell
 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

[David Laakso]

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

[David Laakso]

On Fri, Nov 28, 2014 at 10:58 AM, Crest Christopher
 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

[David Laakso]

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

[David Laakso]

On Sun, Nov 23, 2014 at 6:52 AM, Philip Taylor  wrote:
>
>
> David Laakso wrote:
>
>> No issue seen this end Windows SeaMonkey/2.30.
>
>
> Unless your browser  / geometry / font settings / font scaling /  screen
> resolution / a million other possibilities are identical to mine, David, you
> may 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] Don't miss a space

[David Laakso]

On Sun, Nov 23, 2014 at 5:31 AM, Philip Taylor  wrote:

> Tim Arnold wrote:
>
>> This is a fair example of this idea that I recently worked on:
>> http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
>> work mine, design by others who know better).
>
>
> Hmmm.  I followed the link, 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] Mobile Design Mockup Critique ?

[David Laakso]

[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] Mobile Design Mockup Critique ?

[David Laakso]

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 ?

[David Laakso]

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] Responsive Images

[David Laakso]

On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston  wrote:
> Sent from my iPhone
>
> On Nov 6, 2014, at 6:38 PM, Crest Christopher 
> 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/

Re: [css-d] Why is child wider than parent?

[David Laakso]

On Thu, Nov 6, 2014 at 5:29 PM, Angela French  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 HTML5/CSS3 Only Template Resource

[David Laakso]

On Thu, Oct 30, 2014 at 1:17 PM, Elli Vizcaino  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] site makeover

[David Laakso]

On Thu, Oct 30, 2014 at 11:33 AM, Barney Carroll
 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] site makeover

[David Laakso]

On Thu, Oct 30, 2014 at 11:12 AM, Rod Castello  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

[David Laakso]

On Thu, Oct 30, 2014 at 10:29 AM, Tom Livingston  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/

[css-d] site makeover

[David Laakso]

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] Slides JS behavior due to CSS? (OT?)

[David Laakso]

On Fri, Oct 24, 2014 at 10:49 PM, J.C. Berry  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

[David Laakso]

On Mon, Oct 20, 2014 at 6:39 AM, David Laakso  wrote:
> On Sat, Oct 18, 2014 at 6:28 PM, Crest Christopher
>  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] Grid System

[David Laakso]

On Sat, Oct 18, 2014 at 6:28 PM, Crest Christopher
 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] Styling a menu

[David Laakso]

On Wed, Oct 15, 2014 at 1:04 PM, Peredur  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

[David Laakso]

On Sun, Sep 21, 2014 at 10:50 PM, Georg  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

[David Laakso]

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

[David Laakso]

On Sat, Sep 20, 2014 at 4:39 PM, Kim Brooks Wei  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

[David Laakso]

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


Dunno. Need page markup. Try:





stuff








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?

[David Laakso]

On Thursday, September 11, 2014, John  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

[David Laakso]

On Sat, Aug 16, 2014 at 8:11 PM, John  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?

[David Laakso]

> On Fri, Aug 8, 2014 at 4:30 PM,   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. I needed a
magnifying glass to find it in portrait mode

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

[David Laakso]

On Wed, Jul 30, 2014 at 10:20 PM, Stuart King  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:

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

[David Laakso]

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?

[David Laakso]

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

[David Laakso]

On Mon, Jul 7, 2014 at 10:31 PM, Crest Christopher
 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

[David Laakso]

On Jun 20, 2014, at 14:42, Tom Livingston  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;

[David Laakso]

On Thu, Jun 12, 2014 at 5:42 PM, Richard Wendrock Forum
 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

[David Laakso]

On Sat, Jun 7, 2014 at 3:24 AM, Peter SHILLA  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/

Re: [css-d] Falstaff weds Frutiger.

[David Laakso]

On Fri, Jun 6, 2014 at 6:22 PM, Georg  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/

[css-d] Falstaff weds Frutiger.

[David Laakso]

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] dealing with media breaks

[David Laakso]

On Tue, Mar 25, 2014 at 9:16 PM, John  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

[David Laakso]

On Sun, Mar 16, 2014 at 8:15 PM, David Laakso  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/

[css-d] ie/11

[David Laakso]

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] footer ul li has same attributes as header nav ul li?

[David Laakso]

On Sat, Mar 15, 2014 at 8:30 PM, John  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/

Re: [css-d] Start at the bottom! (was "Front page breaking in IE8, maybe 9 too")

[David Laakso]

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  wrote:
> On Wed, Oct 9, 2013 at 12:59 PM, Chris Rockwell  
> 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  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] Start at the bottom! (was "Front page breaking in IE8, maybe 9 too")

[David Laakso]

On Wed, Oct 9, 2013 at 12:59 PM, Chris Rockwell  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  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] Container Div

[David Laakso]

On Tue, Oct 1, 2013 at 5:25 AM, Karl DeSaulniers  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?

[David Laakso]

On Thu, Sep 19, 2013 at 6:43 PM, John  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?

[David Laakso]

>
> 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] How can I use position fixed in IE?

[David Laakso]

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  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:
>  >> 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] navigate site [error correction]

[David Laakso]

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/

Re: [css-d] navigate site

[David Laakso]

On Tue, Jul 16, 2013 at 10:06 PM, Karl DeSaulniers  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/

[css-d] navigate site

[David Laakso]

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

[David Laakso]

On Thu, Jul 11, 2013 at 10:37 AM, Greg Gamble  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/

Re: [css-d] site review: hydrogeologist

[David Laakso]

On Tue, Jul 9, 2013 at 10:57 PM, Philippe Wittenbergh  wrote:
>
> Le 10 juil. 2013 à 04:46, Karl DeSaulniers  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  instead of 
> the  and  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] site review: hydrogeologist

[David Laakso]

On Tue, Jul 9, 2013 at 6:36 PM, Greg Gamble  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 ...  "­" ?

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

[David Laakso]

On Tue, Jul 9, 2013 at 5:35 PM, Karl DeSaulniers  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

[David Laakso]

On Tue, Jul 9, 2013 at 3:46 PM, Karl DeSaulniers  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/

[css-d] site review: hydrogeologist

[David Laakso]

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] Google Chrome height issue

[David Laakso]

On Sat, Jul 6, 2013 at 1:47 PM, Rod Castello  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{ } ?

[David Laakso]

On Wed, Jun 26, 2013 at 5:29 PM, 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




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?

[David Laakso]

On Wed, Jun 19, 2013 at 1:46 PM, 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?

[David Laakso]

On Wed, Jun 19, 2013 at 11:51 AM, COM  wrote:
>
> On Jun 19, 2013, at 8:37 AM, David Laakso  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  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?

[David Laakso]

On Wed, Jun 19, 2013 at 10:58 AM, COM  wrote:
>
> On Jun 18, 2013, at 6:38 PM, David Laakso  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  960x100px which has a
> background image. imagine that same  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?

[David Laakso]

On Tue, Jun 18, 2013 at 8:22 PM, 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

[David Laakso]

On Fri, Jun 14, 2013 at 6:38 PM, Angela French  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

[David Laakso]

On Mon, Jun 10, 2013 at 7:37 PM, David Hucklesby  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
[resize>view responsive layouts>Tablet 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/

Re: [css-d] tbnt

[David Laakso]

On Mon, May 27, 2013 at 12:26 AM, Philippe Wittenbergh  wrote:
>
> Le 27 mai 2013 à 12:09, David Laakso  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/

[css-d] tbnt

[David Laakso]

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] Supporting Retina Images

[David Laakso]

On Fri, May 24, 2013 at 3:00 PM, Tom Livingston  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] @media all {} & @media screen {}: Both ignored (or followed) by IE6-8

[David Laakso]

On Wed, May 22, 2013 at 2:37 PM, Micky Hulse  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/

Re: [css-d] Containers and height

[David Laakso]

On Wed, May 22, 2013 at 2:29 PM, 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/

[css-d] external link image

[David Laakso]

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

[David Laakso]

On Tue, Apr 30, 2013 at 12:23 PM, Zaia Z  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

[David Laakso]

On Thu, Apr 18, 2013 at 9:21 AM, Zaia Z  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

[David Laakso]

re:
http://ccstudi.com/site/portfolio/z/index.html


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.


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

[David Laakso]

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

[David Laakso]

On Tue, Apr 2, 2013 at 7:41 PM, Micky Hulse wrote:

> 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

[David Laakso]

On Fri, Mar 22, 2013 at 2:27 PM, Markus Ernst  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] substitute font for Myriad Pro

[David Laakso]

On Fri, Mar 22, 2013 at 11:22 AM, Hull, Lauribeth  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] desktop tablet mobile [+1]

[David Laakso]

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

Re: [css-d] Getting Started

[David Laakso]

On Tue, Mar 19, 2013 at 12:20 PM, Vladimir  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/> .


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

[David Laakso]

On Tue, Mar 19, 2013 at 9:37 AM, Philip TAYLOR  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/

[css-d] desktop tablet mobile

[David Laakso]

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] Recommended css font settings

[David Laakso]

On Sat, Feb 23, 2013 at 5:31 AM, John  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

[David Laakso]

On Tue, Feb 19, 2013 at 7:15 PM, Larry Martell  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

[David Laakso]

On Thu, Feb 14, 2013 at 3:56 PM, Michael Stevens  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

[David Laakso]

On Tue, Feb 12, 2013 at 9:44 PM, David Laakso  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

[David Laakso]

On Fri, Jan 25, 2013 at 4:56 AM, Joergen Lang  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...

[David Laakso]

On Fri, Jan 25, 2013 at 12:04 AM, Eric  wrote:

> David,



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

[David Laakso]

On Thu, Jan 24, 2013 at 1:54 PM, Eric  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/