[css-d] how to target an image hotspot

[David Higgs]

At hotspot.higgsy.co.uk/index.html 
the text "Higgs page 1" is a hotspot but I would like to add some visual
indication that it is actually a link. 

The CSS :hover currently works, but for the entire image, which is not what
I want.

I want to trigger the effect for when a user hovers over text/hotspot "Higgs
page 1".  For this I think I would need to target the unique  tag for
the hotspot.  

Currently I am using a class of .mylink, but I can't get it to work when I
target the  tag

I am thinking maybe it is illegal to apply a class or id to that tag?

If so, is there another way to show the invisible hotspot is 'clickable'?

 

Many thanks

Dave

 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] make unbulleted list items align left

[David Hucklesby]

On 8/26/15 10:53 AM, Tom Livingston wrote:

On Wednesday, August 26, 2015, Angela French afre...@sbctc.edu wrote:


Hello,
Usually to create non-bulleted list items that align left I would user
list-style-type:none; padding-left:0;

However, I'm working in a CMS where when I grab the list items it applies
my style to the lis  and not the ul and though there are no bullets
showing, the items are not aligned left.  Is there some other CSS approach
I can take?

Thanks,

Angela French
Internet Specialist



A little more info is needed I think. Is the text in the lis not aligned
left, or is the ul not aligned left with content above and/or below?




Sorry, Angela. The padding-left is applies to the ul - not the list items.
(margin-left in older IE).

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Adaptive Background images ?

[David Hucklesby]

Hello again,
Reply is below thread:

On 8/16/15 1:50 PM, Crest Christopher wrote:

David, your procedure is one extra image I'll have to create :-( I'll already
have an array of images one more set may cause insanity :-)

David Hucklesby wrote:

Response is below:

On 8/16/15 9:09 AM, Tom Livingston wrote:
 Yep. Media queries.

 On Sunday, August 16, 2015, Crest Christopher crestchristop...@gmail.com
 wrote:

 If there was an intelligent method that would only feed the large image;
 when it was between the threshold (small - medium), typically on a
 phablet or tablet device, load it into the browsers cache and the user is
 good, unless there is a change to the image, or the user clears there
 cache, which I know some people are notorious for doing cache cleaning,
 upon browser close, which I do on my desktop browsers but you can't assume
 all, or you have to atleast hope, not all.

 Tom Livingston wrote:

 Don't use a huge image for mobile users just to avoid image degradation.
 There are other ways.



 On Sunday, August 16, 2015, Crest Christopher crestchristop...@gmail.com
 javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com'); wrote:

 I understand sharpening can or will pixelate an image; it sounds as if
 you're saying, that I should display the largest image at the inbetween
 points, as in between, small and large ?

 Another idea that has come to mind is; if retina display requires an
 image double or triple it's actual size, if it was possible to use this
 technique on non-retina devices, basically eliminating pixelation since if
 you take an image and scale it down, you won't loose resolution which will
 retain quality and you still only need one image.

 MiB wrote:

 aug 16 2015 05:23 Crest Christophercrestchristop...@gmail.com:

 The problem is when those images are scaled; when an image is scaled
 between small and medium there is pixelation, how can one sharpen the
 images when, and only when there is a threshold between a small and medium
 image ? I've been searching online and the most I found dealt with the img
 tag, not background images.


 I’m not sure I understand the problem nor why you think some sharpening
 will work, but the problem is interesting. I’m thinking that increased
 sharpening will only make pixelation worse. What you could do is move the
 break points, so that the largest an image is shown is at a stretch level
 where pixelation isn’t very noticeable. The largest image is typically
 beyond your control as you never can control how big display users will
 show your design on, unless you use a max size which I wouldn’t do as a
 designer.


I imagine the pixelation is caused by stretching the image. I suggest using
media queries to prevent that happening. For example, assuming a break point of,
say, min-width: 400px, use an image 400px wide below that break point, and a
larger image when that MQ kicks in.

FWIW I use four sizes of image on my old blog. The WordPress theme has a maximum
container width of 1280px, otherwise I would need additional sizes. Retina was
not considered at the time, or even larger images would be needed.

As for caching the image, the downside is that if you open a page in portrait
mode, then switch to landscape, you get stretching again! :(




Before automated tools like Grunt, Gulp, ImageMagic, etc. came out, I used
IrfanView. It will bulk resize/rename images nicely.

 http://www.irfanview.com

HTH

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Adaptive Background images ?

[David Hucklesby]

Response is below:

On 8/16/15 9:09 AM, Tom Livingston wrote:
 Yep. Media queries.

 On Sunday, August 16, 2015, Crest Christopher crestchristop...@gmail.com
 wrote:

 If there was an intelligent method that would only feed the large image;
 when it was between the threshold (small - medium), typically on a
 phablet or tablet device, load it into the browsers cache and the user is
 good, unless there is a change to the image, or the user clears there
 cache, which I know some people are notorious for doing cache cleaning,
 upon browser close, which I do on my desktop browsers but you can't assume
 all, or you have to atleast hope, not all.

 Tom Livingston wrote:

 Don't use a huge image for mobile users just to avoid image degradation.
 There are other ways.



 On Sunday, August 16, 2015, Crest Christopher crestchristop...@gmail.com
 javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com'); wrote:

 I understand sharpening can or will pixelate an image; it sounds as if
 you're saying, that I should display the largest image at the inbetween
 points, as in between, small and large ?

 Another idea that has come to mind is; if retina display requires an
 image double or triple it's actual size, if it was possible to use this
 technique on non-retina devices, basically eliminating pixelation since if
 you take an image and scale it down, you won't loose resolution which will
 retain quality and you still only need one image.

 MiB wrote:

 aug 16 2015 05:23 Crest Christophercrestchristop...@gmail.com:

 The problem is when those images are scaled; when an image is scaled
 between small and medium there is pixelation, how can one sharpen the
 images when, and only when there is a threshold between a small and medium
 image ? I've been searching online and the most I found dealt with the img
 tag, not background images.


 I’m not sure I understand the problem nor why you think some sharpening
 will work, but the problem is interesting. I’m thinking that increased
 sharpening will only make pixelation worse. What you could do is move the
 break points, so that the largest an image is shown is at a stretch level
 where pixelation isn’t very noticeable. The largest image is typically
 beyond your control as you never can control how big display users will
 show your design on, unless you use a max size which I wouldn’t do as a
 designer.


I imagine the pixelation is caused by stretching the image. I suggest using
media queries to prevent that happening. For example, assuming a break point of,
say, min-width: 400px, use an image 400px wide below that break point, and a
larger image when that MQ kicks in.

FWIW I use four sizes of image on my old blog. The WordPress theme has a maximum
container width of 1280px, otherwise I would need additional sizes. Retina was
not considered at the time, or even larger images would be needed.

As for caching the image, the downside is that if you open a page in portrait
mode, then switch to landscape, you get stretching again! :(
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Variable height divs - How'd they do this?

[David Hucklesby]

On 7/23/15 3:32 PM, Alex M wrote:

Yep, their JS mentions Isotope a fair few times so I can only assume it's using 
that.

http://isotope.metafizzy.co for ref.



Not necessary for a majority of browsers, though:

 http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Sprite repeat-x?

[David Hucklesby]

On 7/21/15 8:46 AM, John D wrote:

Only the background image can be repeated x or y.  Look for:

background-repeat: repeat-x;
background-repeat: repeat-y;


-Original Message- From: J.C. Berry Sent: Tuesday, July 21, 2015 4:18 PM
To: CSS-D Subject: [css-d] Sprite repeat-x?
Hello all, this may be silly but I wanted to know, can a sprite image be
repeated x or y?



I think the poster means can an individual (background-image) sprite be
repeated? I think not.

But I may be mistaken.
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Strategy to Circumvent Incomplete Browser Color Management

[David Hucklesby]

On 7/16/15 2:12 PM, Rick Gordon wrote:

Oh, well.

A test in Chrome v43 (Mac) showed that the color profile -- even if tagged -- is
not recognized in my background-image, regardless of whether the image is saved
as .png or .jpg (and even if background-color is disabled).

Rick Gordon

-
On 7/16/15, 1:41 PM, Rick Gordon wrote:

Color management in browsers is a crap shoot. Only Firefox allows the specific
interpretation of CSS/element color as sRGB (and that's with a non-default
setting); so for the most part, CSS/element color on wide-gamut displays look
hideously oversaturated.

This got me wondering about an alternative approach to setting
background-color: that is, to set background colors with an sRGB-tagged,
one-pixel image set to cover.



Yup! Using this test, Chrome (Mac) does fail the ICC v4 profile test. Safari 8
on my Mac, though, does pass all tests. :)

 http://cameratico.com/tools/web-browser-color-management-test/

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Skipping Landscape ?

[David Hucklesby]

On 7/13/15 2:44 PM, Crest Christopher wrote:

I know it can be up to personal taste, if you create a portrait responsive
page, does it matter if it's not designed for landscape ?



I would think that would depend on what device a visitor uses. Some portable
devices I see people using sit in a cradle, so are always in landscape mode.
In addition, the widths in landscape orientation vs. portrait vary a lot.

Better, I believe, would be to design for any width/height combination, since
you never know what weird combination will be used in a new device that comes
out tomorrow?

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Sidebar height with list filter

[David Hucklesby]

On 7/2/15 1:42 PM, J.C. Berry wrote:

Thanks David, I tried that solution (overflow:hidden to container) and the
right div's still float underneath the sb nav. I did mention that the right
divs (the number of which are variable) are also floated left?



I think you need to put the main section in its own wrapper.

As floats also create a new block-formatting context, you could either float
that wrapper, or else apply one of the other CSS properties that create a
block-formatting context.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Sidebar height with list filter

[David Hucklesby]

On 6/30/15 6:35 PM, J.C. Berry wrote:

thanks guys, but I think I have to clarify my issue. The sidebar content is
always the same; it has the checkbox filters. But the right area divs wrap
down to the left below the sidebar when a lot of them show. The footer
clears fine.



On Tuesday, June 30, 2015, Philippe Wittenbergh e...@l-c-n.com wrote:




Le 1 juil. 2015 à 05:16, J.C. Berry jcharlesbe...@gmail.com a écrit :

I have an issue with a set of checkbox filters in a sidebar that has to
expand it height based on what the user selects.
Here is a simple layout (the site is on dev):

SB   Div1   Div2   Div 3
SB   Div4   Div5   Div 6
SB   Div7
SB
SB
FOOTER   FOOTER  FOOTER



[replies snipped]

If, as you suggest, you have a non-floated main element that wraps below the
float when content is added, there is a simple solution. There is a property
that you can add to the main element, called a new block-formatting context.
For details, check out this article:


http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/#prevent-text-wrapping

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Path style CSS animation

[David Hucklesby]

On 6/19/15 7:45 AM, Crest Christopher wrote:

Is it possible to animate this
http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/exercises/vineMask.php,
 top, right image using CSS animate, or if you know of a method.  And to
answer a question, SVG library animation won't do this effect, I've exhausted
that avenue.



As that image is PHG, I doubt it. However, if you create an SVG, the answer is
yes - there are several possibilities in fact. Check out this article,
particularly relevant is the part about line drawing animation:

 http://blogs.adobe.com/dreamweaver/2015/06/the-state-of-svg-animation.html

HTH
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Path style CSS animation

[David Hucklesby]

On 6/19/15 11:01 AM, Philip Taylor wrote:



David Hucklesby wrote:


As that image is PHG, I doubt it.


Are we seeing the same image at top-right ?  I see :


http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/thumbs/vine.png

Philip Taylor


Sorry. Typo. (Damn these cataracts!)

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[David Hucklesby]

On 5/3/15 7:49 PM, Philippe Wittenbergh wrote:



Le 4 mai 2015 à 03:21, David Hucklesby huckle...@gmail.com a écrit :


What issue (and which old Android) are you seeing? And, you lock out IE
10/11 as well?


http://caniuse.com/#feat=flexbox

I’m looking at canIuse, which notes that Android 4.2−4.3 don’t support
flex-wrap.


But is that always true? I have here an older Sony Xperia phone - very
popular here in Jpn that appears to support flex-wrap (OK, via the shorthand
- `flex-flow: row wrap;`) just fine. According to my son, who got the device
for free and set it up (have to leave all those complicated things to the
younger generation…), it runs the default system + browser (and that thing
can’t seem to access the G.playstore and even less the Docomo system server).
Thing is old enough not to run Android 4.4.



Good news. Thank you. (Sadly, my only mobile device is an iPad.)

P.S. Tell Mr Abe - No Nukes! ;)
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[David Hucklesby]

On 5/2/15 10:18 PM, Philippe Wittenbergh wrote:



Le 3 mai 2015 à 01:02, David Hucklesby huckle...@gmail.com a écrit :

Ah, yes. Did not know about that. Confused by the fact Chrome *does* apply
 the padding.


Yes, Chrome / Blink  (and Webkit) is not spec compliant for this (and many
other things flexbox related). They unprefixed the flexbox code when they
forked from Webkit) in a fit of holier-than-thou mentality.



Some developers can be quite arrogant, sadly.



Actually am applying this on top of inline-blocks via @supports (
flex-wrap: wrap ) to prevent old Android versions using it. So Safari is
locked out anyway.


What issue (and which old Android) are you seeing? And, you lock out IE 10/11
as well?


 http://caniuse.com/#feat=flexbox

I’m looking at canIuse, which notes that Android 4.2−4.3 don’t support
flex-wrap. But I don’t see that as an issue, as I use inline-blocks as a base
(with alignment impossible with floats). But, unless I minimize the HTML, none
of the usual hacks for getting rid of extra gaps seem to work reliably
cross-browser. Hence my interest in using flex-box. :)

BTW: Flex box lets me put fixed padding on the blocks - something that breaks
other solutions. So - problem solved!

Thanks for the feedback.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[David Hucklesby]

Thank you Philippe. Responses below:

On 5/1/15 4:55 PM, Philippe Wittenbergh wrote:



Le 2 mai 2015 à 06:50, David Hucklesby huckle...@gmail.com a écrit :

This is the bare bones of a grid of thumbnails. Works okay in Opera and
Chrome, but the top and bottom padding disappear in Firefox:

http://codepen.io/hucklesby/pen/MwwXWP

FWIW this does not happen in a float or inline-block layout.


The answer is here: https://drafts.csswg.org/css-flexbox/#item-margins

[quote] Percentage margins and paddings on flex items are always resolved
against their respective dimensions; unlike blocks, they do not always
resolve against the inline dimension of their containing block. [/quote]



Ah, yes. Did not know about that. Confused by the fact Chrome *does* apply the
padding.



PS - don’t forget to add the -webkit- prefixed properties / values for
Safari.



Actually am applying this on top of inline-blocks via @supports ( flex-wrap:
wrap ) to prevent old Android versions using it. So Safari is locked out anyway.

BTW inline-blocks work perfectly if you minimize the HTML - no gaps. :)

Thank you, too, for the many insights you have given me with your generous
contributions to this list. Much appreciated.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[David Hucklesby]

On 5/2/15 2:52 PM, Karl DeSaulniers wrote:

Hi David,
Seems a hefty price to pay when you can do the same thing without flex-box and 
regular css2.
Unless I am missing something, this IS just an expanding column of cat 
pictures. Yes?

This pen works in Safari, Chrome and Firefox (on a Mac) with no problems as far 
as I could see.
LMK if different or if I am missing the point of the exercise.  (:  ))

http://codepen.io/designdrumm/pen/qddQpV



Admittedly the motivation was curiosity. But flex-box seems much sturdier - no
inline-block hacks, nor margin hacks to center floats!

This is to display thumbnails for photo galleries.

You are right in that the payoff will only come later, when I can get rid of
legacy code to reduce both code and maintenance. Just thinking ahead ... :)

--
Cordially,
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] Flex items lose some padding in Firefox

[David Hucklesby]

Just learning flexbox, so I am likely doing it wrong.

This is the bare bones of a grid of thumbnails. Works okay in Opera and Chrome,
but the top and bottom padding disappear in Firefox:

 http://codepen.io/hucklesby/pen/MwwXWP

FWIW this does not happen in a float or inline-block layout.

Any clues gratefully received. Thanks.
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Forcing Widows on Paragraph to Right of Floated Image Not to Wrap Under

[David Hucklesby]

On 4/15/15 4:25 PM, Rick Gordon wrote:

I'm wondering if there is a pure-CSS way to force widowed lines in a pargraph to
the right of a floated image which is long enough to have a line or two wrap
underneath the image.

See the bottom couple of posts at http://www.theshelterblog.com/ , where at a
1200+ px window width, the lines wrap that way. (The blog has a post or two per
day, so in time they will migrate up to the second page of posts.) Example posts
that format that way on the home page are titled Yestermorrow School and This
Crop of Women Farmers Is Stepping Up to Sustain the Land.



For the Yestermorrow School article, try adding this rule to your CSS:

.postlistcontent  p {
  overflow: hidden;
}

Explanation: overflow with any value other than visible (the default) gives the
paragraph a new block-formatting context so it does not wrap below the float.

More here:
 http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FOUC on homepage

[David Hucklesby]

Please see below:

On 3/20/15 12:34 PM, Chad Lundgren wrote:

Hi, FOUC is as good a name as any.

The problem is that your slides need to be set to display: none in your
CSS. This issue is happening because the JavaScript must load and be parsed
before it can set the display to none. This takes just long enough for this
flash. CSS, on the other hand, must all be downloaded and parsed before the
page will render, pretty much for this exact reason.
The JavaScript, which is effectively using inline style tags, will have no
problem overriding the display: none.

Thanks, Chad




On Fri, Mar 20, 2015 at 12:09 PM, J.C. Berry jcharlesbe...@gmail.com
wrote:


I was reading and realized that may not be the correct terminology... no
wonder the comments about an older problem. When I said flash of unstyled
content, in my particular case I meant that the homepage banners on these
pages
http://www.xifin.com
http://www.xifin.com/radiology

and the video carousels on these as well
http://xifin.com/resources/success-stories
http://xifin.com/resources/success-stories/Renaissance-RX

all show the images before they are laid out correctly. If the page loads
slower, it takes longer for the positions to be set correctly and for the
animations to start.

What do you call this?



On Fri, Mar 20, 2015 at 10:36 AM, J.C. Berry jcharlesbe...@gmail.com
wrote:


Hello all, can you shed any light on how to fix a FOUC on our homepages?
http://www.xifin.com
http://www.xifin.com/radiology (maybe not bad?)

Thanks in advance!


Yes. This is a JavaScript problem. Basically, you need to check that each image
is loaded before displaying it.

If you have problems with the layout prior to the images loading, do come back
for CSS help.
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] is this possible in RWD?

[David Hucklesby]

[...]

On 2/17/15 1:54 PM, Sara Haradhvala wrote:

Am wondering - is it possible to have a responsive layout that has a
main column and an optional sidebar where text from the main column
flows under the sidebar - but where the sidebar drops under the main
column in mobile view? Not using flexbox (need to support IE8 and
IE9). Is JS necessary?




On Feb 17, 2015, at 6:43 PM, David Hucklesby huckle...@gmail.com
wrote:


Float the sidebar and give it a percent width, with that width set to
100% on narrow windows (via media query) perhaps?


On 2/17/15 4:50 PM, Sara Haradhvala wrote:

doesn't that require the sidebar div to come first in the HTML? If so,
then on mobile, it will also come first. Or is there another option?


You are right of course. To move the sidebar below the main content on
narrow screens, see if this code works for you:

http://codepen.io/hucklesby/pen/VYXWmM


On 2/20/15 7:48 AM, Sara Haradhvala wrote:

Hi David,

Thanks - that's an interesting solution - I would never have thought of
using table-caption for this!  For the moment, I ended up using flexbox -
only on mobile so IE9 didn't really matter. It seems good, but may have
issues on older androids (before 4.4) - if that turns out to be a problem for
us - I'll give this a shot.




Good thinking. The beauty of flexbox is that you can usually combine it with
other methods that work as fallback. Not only does the display value of the
parent use flex in browsers that understand it, but each child becomes a flex
item, no matter its assigned display value.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] is this possible in RWD?

[David Hucklesby]

On 2/17/15 4:50 PM, Sara Haradhvala wrote:

doesn't that require the sidebar div to come first in the HTML? If so,
then on mobile, it will also come first. Or is there another option?
--
Sara Haradhvala
Manager, Harlen Web Consulting LLC
s...@harlenweb.com



On Feb 17, 2015, at 6:43 PM, David Hucklesby huckle...@gmail.com wrote:


On 2/17/15 1:54 PM, Sara Haradhvala wrote:

Am wondering - is it possible to have a responsive layout that has a main
column and an optional sidebar where text from the main column flows under
the sidebar - but where the sidebar drops under the main column in mobile
view? Not using flexbox (need to support IE8 and IE9). Is JS necessary?



Float the sidebar and give it a percent width, with that width set to 100% on
narrow windows (via media query) perhaps?



You are right of course. To move the sidebar below the main content on narrow
screens, see if this code works for you:

 http://codepen.io/hucklesby/pen/VYXWmM

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 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]

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] is this possible in RWD?

[David Hucklesby]

On 2/17/15 1:54 PM, Sara Haradhvala wrote:

Am wondering - is it possible to have a responsive layout that has a main
column and an optional sidebar where text from the main column flows under
the sidebar - but where the sidebar drops under the main column in mobile
view? Not using flexbox (need to support IE8 and IE9). Is JS necessary?



Float the sidebar and give it a percent width, with that width set to 100% on
narrow windows (via media query) perhaps?

Incidentally, I don’t think IE8 and IE9 occur on mobile devices, do they?

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 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
crestchristop...@gmail.com wrote:
 I've run into an odd problem with a MQ between two different phones that
 have the same width when in landscape mode which is 480px.  Those two phones
 are iPhone 4 and my Lumia 1520, the page I'm working on looks, for the most
 part, fine, when viewed on a iPhone 5, when I preview on my Lumia, the page
 breaks and I don't understand why ?

 Christopher


The specs for the screen size of the three phones you listed are:
1/ iPhone/4 3.5 inches corner-to-corner
2/ iPhone/5 4 inches corner-to-corner
3/ Nokia Lumina 1520 6 inches corner-to-corner
Try revising your mq break-point to accommodate the wider Nokia Lumina screen?
Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] coding critique?

[David Postill]

On Tue, 3 Feb 2015 14:41:25 -0800, John wrote:

| Is it within the bounds of this list’s mission to request coding critiques, 
or is that too broad; is the list meant to help with specific 
problems/questions?
| 
| and if not, are there places where one can get a critique of one’s coding?
| 

You could try https://codereview.stackexchange.com/, but please read
https://codereview.stackexchange.com/help/on-topic before asking.
-- 
David Postill
Dance your Life - Biodanza in Alkmaar, Holland - http://www.danceyourlife.eu
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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
crestchristop...@gmail.com wrote:
 I need to preview retina display graphics on a PC in comparison to
 non-retina, the browser hacks, brought forth by Chrome or FireFox in my
 opinion do a lack luster Job, showing me a page at 200% really doesn't do a
 whole lot of good, so does not owning a iPad or iPhone but I won't add an
 Apple product to my workbench, thanks, but no thanks.

 Can anyone offer any suggestions ?

 Christopher


sigh url?

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Close to Accurate Retina Display of Graphics Preview ?

[David Laakso]

On Thu, Jan 29, 2015 at 12:51 AM, Crest Christopher
crestchristop...@gmail.com wrote:

 I didn't supply a URL because I want to know how I can go about this ?

 Christopher


Complicated and difficult topic. Try searching coding retina images.

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floats

[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 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 7:58 AM, Crest Christopher
crestchristop...@gmail.com wrote:
 How come, with or without the pseudo-element of clearing float to the left,
 it doesn't appear to make a difference ? Everything still floats to the
 left, shouldn't some of the class=box be floating to the right, especially
 the orange box ?

 [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/]


Not sure I understand what you are attempting to do-- maybe something like this?

http://ccstudi.com/chris.html

Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floats

[David Laakso]

On Sat, Jan 17, 2015 at 10:27 AM, David Laakso laakso.davi...@gmail.com wrote:
 On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher
 crestchristop...@gmail.com wrote:
 How come, with or without the pseudo-element of clearing float to the left,
 it doesn't appear to make a difference ? Everything still floats to the
 left, shouldn't some of the class=box be floating to the right, especially
 the orange box ?

 [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/]


 Not sure I understand what you are attempting to do-- maybe something like 
 this?

 http://ccstudi.com/chris.html


As above with generated content .box1:before and .box1:after added...

http://ccstudi.com/chris1.html

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] firefox and hyphenation

[L. David Baron]

On Monday 2015-01-05 18:03 -0500, Donna Jones wrote:
 hi everyone:  greetings.  i'm trying to figure out how to tell
 Firefox not to hyphenate and coming up empty.  it seems like there
 was something in css that could be written to keep together but i
 can't find it  in this particular site a name is being
 hyphenated and it just appears weird.  sigh
 
 IE, Chrome and Opera do not do this.

If it's something happening only in Firefox, the most likely cause
seems to be -moz-hyphens: auto in the CSS somewhere, which tells
Firefox to auto-hyphenate.  (Alternatively, there might be
soft-hyphen characters in the text, but I *think* those are
supported in other browsers.)

Firefox doesn't (I think) auto-hyphenate without one of those things
telling it to do so.

-David

-- 
턞   L. David Baron http://dbaron.org/   턂
턢   Mozilla  https://www.mozilla.org/   턂
 Before I built a wall I'd ask to know
 What I was walling in or walling out,
 And to whom I was like to give offense.
   - Robert Frost, Mending Wall (1914)


signature.asc
Description: Digital signature
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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
d...@redkitecreative.com wrote:


 Looking at the 700-weight (bold) Open Sans in the ul in this page
 (starting with Drill Pad Construction), can you see how the
 lowercase a's have the counter at the top filled in? I'm looking in
 Chrome, FF, IE11 on Windows 7:

 http://www.oilfield-construction.com/NEW_SWD/


 Debbie


Try setting font-size:110% on the ul.

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Column height fault/color dropping out

[David Hucklesby]

On 12/12/14, 2:40 PM, J.C. Berry wrote:

Hi all,
Can you help me with a seemingly simple problem with column height issues?
We are using an equal column script, but still not correct heights

http://www.xifin.com/news/coverage
Thanks



That’s on account of this rule in the CSS:

body.page-node-9341 #contentsub2 {
  height: auto !important;
}

(Thus proving the rule that !important should be avoided. :)

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Using ::after pseudo-element !

[David Hucklesby]

On 12/7/14, 11:29 AM, Tom Livingston wrote:

There's no content according to this code. Link?
On Sun, Dec 7, 2014 at 2:28 PM Crest Christopher crestchristop...@gmail.com
wrote:


The following pseudo-element isn't working; I'd like to know what I'm
doing wrong ?

#inner {}
#inner:after {content:url();opacity:0.5;}



Perhaps you mean { content: ; opacity:0.5; } ?

Hard to tell without any context. :\

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 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
crestchristop...@gmail.com wrote:
 Hi, the following effect
 http://cssdeck.com/labs/navigation-dropdown-with-flip-effect is not
 collapsing on iPhone and it's not opening or collapsing on WP8.x.  I can't
 say whether it works on Android as I didn't test on Android ?

 Christopher

You may need js [off-topic for this list] for that to collapse in
mobile. And even with js transitions can be problematic for Android.
This is a CSS only method that may? work for you with transitions and
max-height:
http://ccstudi.com/site/playpen/nav-1.html
Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[David Laakso]

On Tue, Nov 25, 2014 at 9:59 AM, Crest Christopher
crestchristop...@gmail.com wrote:
 I have a question, ...trimmed]

Put the markup and css of the page in question on a public server and
provide a link to it in your post to the list.
Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[David Laakso]

On Sun, Nov 23, 2014 at 5:31 AM, Philip Taylor p.tay...@rhul.ac.uk wrote:

 Tim Arnold wrote:

 This is a fair example of this idea that I recently worked on:
 http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
 work mine, design by others who know better).


 Hmmm.  I followed the link, and it appeared in my browser window which
 occupied the right half of my screen (your message appears on the left);
 all is visibly not very well ...


 https://www.dropbox.com/s/8qfsk1qhoipekyw/Screenshot%202014-11-23%2010.28.53.png?dl=0

 Philip Taylor

No issue seen this end Windows SeaMonkey/2.30.
Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[David Laakso]

On Sun, Nov 23, 2014 at 6:52 AM, Philip Taylor p.tay...@rhul.ac.uk wrote:


 David Laakso wrote:

 No issue seen this end Windows SeaMonkey/2.30.


 Unless your browser  / geometry / font settings / font scaling /  screen
 resolution / a million other possibilities are identical to mine, David, you
 may not see the same artifacts.  My point was not that all viewers will see
 the artifacts that I did, but that others /might/, and therefore an
 investigation into what triggers that particular aberrant behaviour might be
 worthwhile.  I find it trivial to replicate by starting with my browser
 full-screen and then slowly narrowing it until the panels start to overlap.

 ** Phil.

Granted. Cruel and unusual punishment, though. Just getting Drupal to
work at default is enough to tax even Leonardo...
Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Mobile Design Mockup Critique ?

[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] 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]

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

[David Hucklesby]

On 11/5/14, 9:22 PM, Felix Miata wrote:
 Crest Christopher composed on 2014-11-05 23:45 (UTC-0500):

 If I want to use images on a responsive site, the images should be in
 the largest size possible then set the style to {max-width:100%} ? If
 they are not the largest size possible and the page is viewed at 1700px
 by 1450px (fictional resolution, I didn't verify if it is a logical
 resolution) then the obvious result will be a stretched, blurred
 image(s) due to  interpolation, correct ?

 It may or may not appear stretched and/or blurry, depending on a myriad
 of factors that include physical display size, viewing distance, OS/DE
 settings and viewer acuity. It may appear streched or blurry, but in
 practical effect it won't necessarily appear to the visitor's eye any worse
 than being too small. Either way, too small for detail to be discernable, or
 over-enlarged and blurry, is similarly less than satisfactory.

 If you don't limit its size to some arbitrary px value (actual physical
 display resolution available at retail is up to at least 5120x2880 now[1]),
 at least you retain the possibility of the relative placement and size of the
 image within your layout, and possibly the layout itself, being preserved.

 [1] http://support.apple.com/en-us/HT5266



It’s not unlikely I am wet behind the ears, but I thought max-width simply
prevented the image from expanding to its natural size in smaller containers.
AFAIK the image will not stretch.

Correct me if I am wrong.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[David Laakso]

On Thu, Nov 6, 2014 at 5:29 PM, Angela French afre...@sbctc.edu wrote:
 Hello,
 Can anyone please tell me why the child (#band) is wider than the boundary of 
 its parent (#outcontainer)?  I set width:100% on the child to make sure it 
 took up the entire width of the parent, but it went wider.  Can't figure out 
 what I'm missing here. It may be the concurrent use of display:table but I'm 
 not sure why setting width still wouldn't work.  If I set the width to 98% it 
 almost fits inside the parent.

 http://www.sbctc.edu/OAAInstruction.html


Angela,

Try
#band {height: 52px;
background-color:#013E7D;padding-right:/*20px*/4%;text-align:right;vertical-align:middle;display:table;width:96%;/*100%*/}

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responsive Images

[David Laakso]

On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston tom...@gmail.com wrote:
 Sent from my iPhone

 On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com
 wrote:

 Why do you recommend building mobile first ?


 Aside from being best practice [trmmed]..


I hope that you mean it happens to be best practice for you.

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] site makeover

[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] site makeover

[David Laakso]

On Thu, Oct 30, 2014 at 10:29 AM, Tom Livingston tom...@gmail.com wrote:
 David,

 Only thing that struck me was the menu background could be
 a bit more opaque, especially when over busier page contents.


Good point. Correction on server. Thanks, David.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site makeover

[David Laakso]

On Thu, Oct 30, 2014 at 11:12 AM, Rod Castello rodcastel...@gmail.com wrote:
 Hi David,
 Aesthetically very nice. Good design. Love the larger fonts.
 The only thing I would like is not having to go back to the Paintings tab
 to select the next painting. I would prefer you have buttons on top, like in
 the Photography sub-navs, or have Next and Previous buttons or arrows.
 Same thing on the responsive view of Paintings. I'd like to see arrows on
 right and left and tap those, or just finger swipe to the next painting.
 Going back by using the back arrow to select next painting is cumbersome.
 Rod Castello



Next Page and Previous Page links are already on-board for all
sections. Thus avoiding the need to return to the section Table of
Contents.

Best,
David
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site makeover

[David Laakso]

On Thu, Oct 30, 2014 at 11:33 AM, Barney Carroll
barney.carr...@gmail.com wrote:
 From a semantic level, I was confused by the black
 arrows in active menu items on smaller viewports: on a large viewport it's
 clear they're indicating the content, but on smaller screens when the layout
 collapses to linear, they look like calls to action to indicate nested
 content (subsections, or something). Might be worth hiding them on the
 smaller media queries?

 Regards,
 Barney Carroll


Thanks. I will consider hiding the nav arrows in SSR[small-screen rendering].\
Best,
David
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responsive HTML5/CSS3 Only Template Resource

[David Laakso]

On Thu, Oct 30, 2014 at 1:17 PM, Elli Vizcaino e7f...@gmail.com wrote:
 Hi CSS Discuss,

 I'm wondering if anyone knows of a site where I can find free
 responsive HTML5/CSS3 layout templates that are just code only, so I
 can theme them with my own design? My Google search just keeps turning
 up pre-designed responsive themes. Really hoping to find white label
 layouts.


 Elli Vizcaino


Try:
1/ http://bradfrost.github.io/this-is-responsive/patterns.html
2/ http://bradfrost.com/blog/web/responsive-nav-patterns/
3/ http://www.responsivegridsystem.com/
Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Slides JS behavior due to CSS? (OT?)

[David Laakso]

On Fri, Oct 24, 2014 at 10:49 PM, J.C. Berry jcharlesbe...@gmail.com wrote:
 Hello all,
 Feel free to tell me that this is not a CSS issue, but I thought I'd ask:

 We have a sliding banner on our main site homepage
 http://www.xifin.com
 And our radiology microsite homepage
 http://www.xifin.com/radiology

 But you will notice on the main site that there is a jump in the image at
 the end of each transition.

 Do you think this is due to a CSS problem? The script is the same on both
 sites, so I am stumped.

 --
 J.C. Berry, M.A.


No jump seen in the image at the end of each transition at
http://www.xifin.com OX Yosemite -- FF, Chrome, Safari, or Opera.

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid System

[David Laakso]

On Sat, Oct 18, 2014 at 6:28 PM, Crest Christopher
crestchristop...@gmail.com wrote:

 I have a css grid question..[trimmed]
 Thanks
 Christopher

Christopher,

This does not answer your specific questions. It is simply a coded
example of a  three column responsive grid layout. Variations of
column widths and their respective gutters/margins within the same
layout is possible. Percent is used for the fluid columns and the
margins [gutters]. Open in a full window and drag to a 480px mobile
window. It is a spin on this method: responsivegridsystem.com

Good luck.

Best,
David Laakso

Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid System

[David Laakso]

On Mon, Oct 20, 2014 at 6:39 AM, David Laakso laakso.davi...@gmail.com wrote:
 On Sat, Oct 18, 2014 at 6:28 PM, Crest Christopher
 crestchristop...@gmail.com wrote:

 I have a css grid question..[trimmed]
 Thanks
 Christopher

 Christopher,

 This does not answer your specific questions. It is simply a coded
 example of a  three column responsive grid layout. Variations of
 column widths and their respective gutters/margins within the same
 layout is possible. Percent is used for the fluid columns and the
 margins [gutters]. Open in a full window and drag to a 480px mobile
 window. It is a spin on this method: responsivegridsystem.com



Sorry. The uri is http://ccstudi.com/site/playpen/layouts/grid.html


 Good luck.

 Best,
 David Laakso

 Chelsea Creek Studio
 http://ccstudi.com
 desktop | laptop | tablet | mobile



-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Grid System

[David Hucklesby]

On 10/20/14, 2:16 AM, MiB wrote:


okt 20 2014 11:08 MiB digital.disc...@gmail.com:


Grids are not hocus locus.




I’m giving this response a Like :)

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling a menu

[David Laakso]

On Wed, Oct 15, 2014 at 1:04 PM, Peredur pere...@peredur.net wrote:
 I imagine that this will turn out to be a very simple question, but never
 one to avoid displaying my own ignorance, here goes...

 I'm trying to create a layout for a website that is in dire need of
 attention and this (URL below) is a mockup of something approaching what I'm
 aiming for:

 http://peredur.net/unidirectory/

 The only thing that I really don't like about it is that the navigation menu
 is over to the left and so looks a bit odd.  In the tutorial from which I
 got most of the code (http://demo.ourtuts.com/menu/), the menu is centered,
 but I'd rather not do that if I don't have to - especially as it would mean,
 I think, giving the menu a fixed width, which I'm not keen on doing as it
 might mess up the display on mobile devices.

 What I think I'd prefer to do is to put a full-width background the same
 width as the #wrapper div and the same height as the menu, and the same
 colour as the footer background, behind the menu.  As yet, though, I've
 failed to find a way to do that.

 I imagine that the problem is because the menu is floated and so any block
 element I put around it has no height, but I've no idea what to do to get
 around this.  Giving a surrounding div a height does not seem an option
 since it would have to correspond to something like 20px plus the height of
 the box containing the menu item text and I'm not sure how to do that - or
 if it would even work.

 Thanks in advance


 Peter


Peter,

One way to do that is to put the nav after the footer in the markup.
And then absolute position the nav into a block [article] of padding.
Once you get to the media queries, the amount of padding needed can be
tweaked-- less needed at desktop, and more needed at mobile.

A fast and dirty example without media queries: http://ccstudi.com/school.html

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] shake

[David Laakso]

On Sun, Sep 21, 2014 at 10:50 PM, Georg ge...@gunlaug.com wrote:
 Den 22.09.2014 03:36, skrev David Laakso:

 On this page,  http://ccstudi.com/site/colophon/cp.php , the links
 within the right-column text-block shake on hover.


 You can simply add...

 .cp article p a.offsite:hover,
 .cp article p a.offsite:focus,
 .cp article a.offsite:active {display: inline;}

 ...to override the (other) link styles that now turn those links into
 'display: block' on hover.

 regards
 Georg


Problem resolved. Thanks to Georg and Philippe.

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] shake

[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 kimi@kimbwei.com wrote:
 Hi. At http://madresporobama.org/, I'm trying to center the left image
 vertically. What am I doing wrong, or more importantly, how do I accomplish
 this?

 Best,
 Kimi


Kim,

Try?
.container img{border:1px dotted red;margin-top:2.5em;}/*--tweak*/

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] iFrame Tag Error in Validation

[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:
 iframe class= src=div/div/iframe



Dunno. Need page markup. Try:

!doctype html
html lang=en-us
head
meta charset=utf-8
titlestuff/title
/head
body
iframe class=c1 src=c2.png
div/div
/iframe
/body
/html

Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to locate un-used CSS?

[David Laakso]

On Thursday, September 11, 2014, John j...@coffeeonmars.com wrote:

 Is there a way to determine which CSS are not being used .. .


John,

Try  dust me selectors an add-on from Firefox.

Best,
David Laakso





-- 
Chelsea Creek Studio
http:// ccstudi.com
desktop | laptop | tablet | mobile

Sent from iPhone 5s
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering menu items responsively

[David Hucklesby]

On 9/5/14, 15:42, J.C. Berry wrote:

OK don't judge me - well actually do
http://www.xifin.com/solutions/xifin-technology/portals

Not fine-tuned but there it is.


On Fri, Sep 5, 2014 at 3:38 PM, Jon Reece jon.re...@gmail.com wrote:



On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry jcharlesbe...@gmail.com
wrote:


I have 3 menu items that look like this on full width of site

X X X

If I want to reduce to a phone width I get
X
X
X

But what about the in-between (tablet, etc.) alignment? Right now I get:

X X
X

And I want

X X
  X

i.e. Centered second row. How can I?



​Since we can't see your actual code, it's hard to say. But, based on your
diagram - are you floating the menu items? If so, you might want to try display:
inline-block  instead. Then, setting left and right margins to auto
should give you the centering you want. Here's a quick example, this
assumes you are setting a fixed width on the menu items:

http://codepen.io/jreece/pen/EKJrd?editors=110



Indeed, inline-block should work. You need to remove the float declarations
from both the li and the a though. Applying display: inline-block; to the
li via Web Tools works this end.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Understanding How Relative Font-Size Resize Units in Responsive Design

[David Hucklesby]

On 8/24/14, 18:27, Philippe Wittenbergh wrote:


Le 25 août 2014 à 09:51, Elli Vizcaino e7f...@gmail.com a écrit :


Is there anyway to get font sizing to resize proportionately based on
containing element width?


You can eventually use vw, vmin units to specify the font-size. That is
based on the viewport width/height. I assume that your containing element
will resize based on the viewport size. There are a few demos out there, use
your favourite search engine.

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

Philippe


In the meantime, I have used a series of media queries to solve this very
problem. Assuming you are using ems, rems, or percent font-size throughout, this
works out quite well, if a bit messy.

Like Philippe’s suggestion though, this only works for viewport widths. Only
JavaScript will solve it for adjusting to a container element’s width AFAIK.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS drop-down menu issues

[David Laakso]

On Sat, Aug 16, 2014 at 8:11 PM, John j...@coffeeonmars.com wrote:

 At this link,
 http://www.coffeeonmars.com/screenshots/menu-prob/product.php I am having
 issues with the header nav in that I feel I’ve done a lot of kludges to get
 it to behave correctly and not explode the page..

 ...such as giving a white 1px border to the nav (else everything below it
 disappears!)

 I know that some floats are necessary to make the child menu items behave
 correctly, but I’ve had to float the menu itself or else the sub nav at the
 left (also floated left) shoots over to the right.

 My question: can anyone suggest how I might better construct this header
 nav? it basically looks the way it needs to; would prefer fewer kludges to
 get it that way. Fewer kludges tells me fewer things to bite me down the
 road.

 Thank you!

 John



John,

Compare your page in FF, Chrome, and Opera. First place to start is to
validate the markup. .

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div backgound shows below content when it shouldn't

[David Hucklesby]

On 8/14/14, 11:06, Tim Dawson wrote:

I'm coding a new site and am struggling with a 'wrapping' problem in the header.


[...]


It works except that I always get two pixels worth of the div background
showing at the bottom of the images, and I cannot work out why.

You can see it at: http://webadit.co.uk/hminew3/ (site is far from complete)


[...]

Hi Tim,

Instead of this:

 .pananim img {
position: absolute;
top: 0;
left: 0;
margin-top: 48px;
width: 100%;
opacity: 0;
 }


try changing the line top: 0; to bottom: 0;

Not tested thoroughly across browsers though!
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div backgound shows below content when it shouldn't

[David Hucklesby]

On 8/14/14, 16:36, Philippe Wittenbergh wrote:


Le 15 août 2014 à 03:06, Tim Dawson t...@ramasaig.com a écrit :


I have a div containing a CSS animation of five* images which appear
sequentially. The images are absolutely positioned in a stack, except for
the first to load, which has relative positioning. That's done with the
intention of getting  the containing div to wrap the images without having
to set a height.


[...]


It works except that I always get two pixels worth of the div background
showing at the bottom of the images, and I cannot work out why.

You can see it at: http://webadit.co.uk/hminew3/ (site is far from
complete)


your first image is still in-flow and rest of the baseline of the parent div;
that causes the lime background to shine through at the bottom (that is a
nice colour! :-)) – it is the space reserved for descenders.

.pananim img:first-of-type { vertical-align: bottom; } ought to fix it.

Philippe


Interesting. That’s the first thing I tried using Safari (Mac) Web Inspector.
But that did not seem to shift it. ???
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Google map link won't open in iPhone - is this a css issue?

[David Laakso]

 On Fri, Aug 8, 2014 at 4:30 PM,  bho...@aol.com wrote:
  Hi.  I'm not sure if this is a CSS issue, so please forgive me if it's
  not.  My Get Directions link on the right side of the page doesn't
 work  on
  the iPhone, but works fine on my PC.  Is this a CSS issue?
  http://www.sportsmansresource.com/anglercharters/index.htm



The link sent me to the map in gmail on iPhone 5s. asideI needed a
magnifying glass to find it in portrait mode/aside

Best,
Davd Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Web fonts

[David Laakso]

On Wed, Jul 30, 2014 at 10:20 PM, Stuart King zinlo...@gmail.com wrote:

 Hi CSSer's:

 I cannot figure out why the web font does not work for the body text. I an
 using Century Gothic. I got the fonts to work with the different sub
 headers and the footer. I have tried tech support from myfonts.com - they
 were worthless and now from monotype, also worthless.


 Help.

 http://younglighteducate.com/pages/ccss_students.html


 Thank you.

 Stuart





MyFonts are linked to the document from the head of each page-- something
like this:

link rel=stylesheet href=whateverfont/whateverfont.css
http://ccstudi.com/museoslab900/museoslab900.css type=text/css /

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox issues displaying height of div

[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] why are ems rendering large?

[David Hucklesby]

On 7/24/14, 19:53, Tom Livingston wrote:

I believe so.

On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com
wrote:


A font-size of 120% is 19px, is my math correct ?

Tom Livingston wrote:

I don't know about golden, but it equal to the browser default which, if
unchanged, is usually 16px.



On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com
javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com'); wrote:


Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or
rounded down as mentioned 19px, correct ?


Usually 16px - but certainly not always. Don’t forget to test your design with
different text sizes. Most browsers let you change the default size somewhere
in the settings.

--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested li:hover issue

[David Hucklesby]

On 7/10/14, 10:49, John wrote:

at this link:
http://coffeeonmars.com/130su/assignments/asst2a/jj_resp_skeleton.html I
have a CSS menu dropdown for the header nav item named “Class”

Functionally, it behaves correctly, ...


Not really. I don’t know if it works with touch, but it certainly fails when
using a keyboard. You need JavaScript for that. Here’s one suggestion:

 http://www.smartmenus.org

--
Cordially,
David

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Struggle to type in Email Input Field

[David Laakso]

On Mon, Jul 7, 2014 at 10:31 PM, Crest Christopher
crestchristop...@gmail.com wrote:
 Hi, I can't solve why a struggle is required to get the cursor into the
 input email field area.  You have to scroll down to the bottom of the page.
 Placing the cursor in the Name input field works fluid, placing the cursor
 in the Email field is a struggle.  I moved the Email Label by 2px to the
 right assuming it was interfering with the input field, that assumption was
 wrong ?
 [Link
 http://www.thecreativesheep.ca/webdesignprojects/largeprojects/CreativeSheep/cs_site.html]

Forms are the bane of most every web designers existence particularly
in moble. But since your site is currently for desktop, and if you are
on an Apache server, you may find this well written article very
helpful in creating a secure form with an html or php page extension:
http://pageaffairs.com/notebook/php-contact-formhttp://pageaffairs.com/notebook/php-contact-form

Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?

[David Hucklesby]

On 7/3/14, 9:36, Alan Gresley wrote:

On 4/07/2014 1:58 AM, Elli Vizcaino wrote:

On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley a...@css-class.com wrote:

On 3/07/2014 1:19 PM, Elli Vizcaino wrote:


Hello CSS Discuss,

I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.

Please take a look at the

RE
SPON
SIVE

text on the following page:  http://www.e7flux.com/e7flux2014/.html




Hello Elli. The padding is really line-height.

Insert the following into your CSS or something like it (the border is to
help you see).

em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }


And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.


[code removed]


You have a missing /span tag.







Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.

I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.

http://www.e7flux.com/e7flux2014/.html

Elli Vizcaino


Hello Elli,

I believe I know what is happening but I don't know what style is causing it.
Please see this screenshot.

http://css-class.com/test/temp/italic.jpg

It's this font-family.

h1, h1 a.logo {
 font-family: Calluna Sans,Arial,Helvetica,sans-serif;
}

To get that 'Arial italic' fallback when I remove the reset CSS.

http://www.e7flux.com/e7flux2014/css/reset.css

I don't understand why the fallback is Arial italic instead of Arial but I
suspect the italic aspect is the thing that causing the space.



I think you may be looking at the normal letter spacing that occurs between
letters. If you increase the font-size of your test text, you will notice small
gaps there as well.

As this spacing varies by letter and font, I’m sorry I have no good solution.
Playing with the CSS letter-spacing value did not give a useful result. YMMV.
--
Cordially,
David

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Rendering issues

[David Laakso]

On Jun 20, 2014, at 14:42, Tom Livingston tom...@gmail.com wrote:

 List,
 
 We've had a report of a rendering issue on this site:
 
 http://www.mlmic.com
 
 The user saw a blank, blue screen ( a brand color) in current Chrome
 and Opera (Mac, I believe). Also, Google Webmaster Tools Fetch As
 Google also renders it blank blue. We have not been able to recreate
 the issue except for in Google Webmaster Tools and that doesn't give
 much help in troubleshooting it.
 
 Do any of you see this issue, and if so, can you help track it down?
 
 Thanks in advance...
 
 
 -- 
 
 Tom Livingston | Senior Front-End Developer | Media Logic |



Not seen current version Opera nor in current version Chrome:  OS X 10.9.3 .

Best, 
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-variant:small-caps;

[David Hucklesby]

On 6/12/14, 14:42, 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?



Just guessing, but I think the bold characters may actually be upper case in
the original text. Try adding the declaration 'text-transform: lowercase;' to
that rule.

--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-variant:small-caps;

[David Laakso]

On Thu, Jun 12, 2014 at 5:42 PM, Richard Wendrock Forum
fo...@thehomepagestore.com wrote:
 It appears there is an optical illusion when using font-variant:small-caps;



 The first letter of each word appears more bold than the other letters in
 the word.



 .fonttext23 {

  font-size: medium;

  font-family:Arial;

  text-align:left;

   font-variant:small-caps;

   font-weight:bold;

 }



 I cannot find a way to make all letters uppercase and have the same bold
 weight.



 Can you solve this problem?


Not using Arial. The property font-variant is used to choose between
normal or small-caps variants of a font. Arial does not have a
small-caps variants.


Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Mega drop down menu

[David Laakso]

On Sat, Jun 7, 2014 at 3:24 AM, Peter SHILLA peter.shi...@gmail.com wrote:
 Am new to mailing list and web  development too. Could anyone link to CSS 
 material for creating mega drop down menu using CSS, right from first 
 principle ? regards//Peter


Theory
http://www.smashingmagazine.com/2013/03/27/navigation-mega-sites/
One practical CSS/JS solution
http://www.cssplay.co.uk/menus/cssplay-mega-menu.html#url

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Falstaff weds Frutiger.

[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] Falstaff weds Frutiger.

[David Laakso]

On Fri, Jun 6, 2014 at 6:22 PM, Georg ge...@gunlaug.com wrote:
 Only comment I have is that I feel the external link icon on the social
 icons in the footer are unnecessary. Otherwise, very nice.

 Me think so too - social icons are self-explaining.

 Otherwise good overall balance, and looking good.

 regards
 Georg



I agree. Correction is on my server. Thanks. Best, David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Having trouble adding video to web page.

[David Hucklesby]

On 6/4/14, 13:26, Rod Castello wrote:

Hey thanks Colin, Norman, Karl and Tom for the replies and I'll try out
your suggestions. Sorry about it being OT. I got caught up in the rush and
turned to the best list I knew.
Rod




Well, I think the responsive part of your question is on topic. (?)

Here’s a good rundown of both CSS and JavaScript ways of adding video:

 http://css-tricks.com/rundown-of-handling-flexible-media/

(Previous replies are below, for members getting the digest version.)
--
Cordially,
David


On Wed, Jun 4, 2014 at 1:18 PM, Tom Livingston tom...@gmail.com wrote:


On Wed, Jun 4, 2014 at 4:17 PM, Tom Livingston tom...@gmail.com wrote:

On Wed, Jun 4, 2014 at 3:24 PM, Rod Castello rodcastel...@gmail.com

wrote:

Hi All,
Need some quick, real world advice on adding an mp4 video to a web page.
It needs to work in modern versions of major browsers.  I can skip the
iPhone display but would be nice to have that too.
The page is responsive and I would need to be able to control the width

for

various column or screen widths.

Is there a good tutorial on this?
Do I need to request different versions...mp3, webm?
I'm thinking get it on youtube might be an easy fix. Any thoughts on

that?


Any advice would be greatly appreciated.

Here's a link to the video source:


http://delivery.tourdesigncreative.com/clients/BET/BET_PremiumTicketReel_Rev4.mp4


I will be swapping it out with the video on this page:
http://www.axs.com/betexperience

Thanks,

Rod Castello



I recommend videos as well. We usually serve WebM, ogg and mp4 using
html5 element.



Er, that should have been *videojs*... I recommend videojs as well.

http://www.videojs.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] Webkit's wobbly centering

[David Hucklesby]

Making a photo gallery, I want to center a row of thumbnails below the main
photo. My code works well in all browsers *except* for those based on Webkit.
A cut-down version of the code is here:

 http://codepen.io/hucklesby/pen/xjKEL

What am I doing wrong?

Any suggestions gratefully accepted. Thank.
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Webkit's wobbly centering

[David Hucklesby]

On 4/21/14, 11:18 AM, Tom Livingston wrote:

On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby huckle...@gmail.com wrote:

Making a photo gallery, I want to center a row of thumbnails below the main
photo. My code works well in all browsers *except* for those based on
Webkit.
A cut-down version of the code is here:

  http://codepen.io/hucklesby/pen/xjKEL


[...]

__


Turning off the word-spacing on .thumbs in Chrome inspector fixed it,
though the space between thumbnails became less. Maybe that will put
you on the right track...



Brilliant! Thank you Tom.

Adding margin-right to the li instead seems to give me what I want.
--
Cordially,
David

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Sticky Footer Problems

[David Hucklesby]

On 4/21/14, 9:54 AM, Jennifer wrote:

Hello,

I've attempted to change our footer to a sticky version, so that on 
shorter pages, it's always at the bottom of the screen. However, I'm having a 
problem with a gap in the content of a short page just above the footer.

Can someone please tell me what I did wrong?  Here's one of the pages 
that shows the problem:

http://www.superiorshelving.com/info/contact-superior-shelving-systems.php#tab-5


[...]
In addition to Cassandra’s suggestion, I think you’ll find this method probably
the easiest to use. I, too, had many problems with older methods:

http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

I’m assuming you either don’t need to support IE older than version 8, or give
those geriatric browsers a very simple “generic” style sheet.
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Media Queries: How many pixels make an em ?

[David Hucklesby]

On 4/18/14, 2:10 PM, Tom Livingston wrote:

On Fri, Apr 18, 2014 at 4:03 PM, Freelance Traveller
edi...@freelancetraveller.com wrote:

On Fri, 18 Apr 2014 17:53:37 +0100, Tim Dawson t...@ramasaig.com wrote:


I've been following another thread (Phone breaks), and I can see the
advantage of using 'ems' rather than pixels for media queries.



So if I'm using 'px' now but would like to change to 'em', how do I
calculate how many 'em' to allow for my 960px starting point ?




I like using this: http://riddle.pl/emcalc/


As I understand it, there are pixels and there are pixels. Many devices today
have high resolution screens that pack four to nine times the usual number of
pixels onto a display. As this makes pixel sizes *really* small, using these
pixels for CSS sizes makes no sense. Imagine how tiny, say, a 100 pixel wide
image would be on a phone display that’s 1920 pixels wide!

For this reason, a CSS pixel on these screens is computed to be a combination of
four to nine actual pixels so that the displayed image size is closer to what
you’d expect. This is really only a headache for bit-mapped images like PNG or
JPEG, as fonts and other vector graphics scale up nicely - but that’s another
topic for discussion entirely.

For the moment, then, you can continue to use the rough approximation of 16px to
1em. But this equivalence does not always hold, even on a desktop. Which is why
you have to be super careful about mixing ems and pixels.

Hoping this does not confuse you further,
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Equal-length columns - display: table-cell OK?

[David Hucklesby]

On 4/9/14, 8:12 AM, Barney Carroll wrote:

On 9 April 2014 16:00, Freelance Traveller edi...@freelancetraveller.comwrote:


First, is display: table-cell a viable solution for the layout issue?
caniuse suggests that if I don't feel a need to support IE7 or earlier,
I should be OK, but caniuse doesn't always tell the whole story.


[...]


I've built dozens of sites using Stubbornella's OOCSS grids module which
specifically uses display: table-cell with a zoom: 1; fallback to make the
last element of a 'row' occupy the full remaining width. The OOCSS project
is a bit of a mess these days (it never was as popular as it deserved,
probably down to very poor visibility and maintenance) – it requires you to
deploy virtual machines just to build the CSS (!) – but I currently use the
following SCSS extension to achieve the desired effect:

@mixin fill-remaining-width {
   display : table-cell;
   float   : none;
   width   : auto;
   *zoom   : 1;

   :after {
 clear:   both;
 color:   transparent;
 display: block;
 visibility:  hidden;
 overflow:hidden;
 height:  0 !important;
 line-height: 0;
 font-size:   xx-large;
 content: x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x x x x;
   }
}



I like!

That use of the :after content is a clever way of preventing the shrink-
to-fit nature of table cells creating a smaller width box than intended. The
same goes for some other properties that add a new block-formatting context,
such as inline-block.

Thanks. Wish I had thought of that. :)
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] floating thumbnails

[David Hucklesby]

On 3/27/14, 7:19 AM, Colin (Sandy) Pittendrigh wrote:

The following link displays an HTML fragment taken from a (home-brewed)
content management system, stripped down to the relevant block area only:
div id=main-gallery-disp ...stuff.../div

The HTML:
http://fliesfliesflies.com/fragments/Gallery/ttest.html


[...]

In this Gallery page I'd like all thumbnails to float left around the
main display image without making odd, unpredictable white space areas on
the next line after a thumbnail runs off the right side of the display area.

In other words I'd like the thumbnails to float into an orderly table like
arrangement, controlled entirely by the browser, depending on current
viewport width.

is this possible with CSS only?



Not too sure what you are aiming at, but try this:

- Take the float:left out of the h3 above the gallery, allowing it to occupy 
the full width


- Take the float:left and min-height:3em out of p.robonav, replacing them 
with display:inline-block


- You may like to add vertical-align:middle or vertical-align:top to 
p.robonav as well.


Does this give you anything closer to what you want?
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Google font use

[David Hucklesby]

On 3/27/14, 9:34 AM, Tom Livingston wrote:

I was doing this simple test with google fonts (via @import method).

body{
 font-family: $roboto;
}

.bold{
 font-weight: 500;
}

pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p

The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.


[...]

Does this address your problem? -

 http://css-tricks.com/watch-your-font-weight/

--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] floating thumbnails

[David Hucklesby]

On 3/27/14, 9:25 AM, Colin (Sandy) Pittendrigh wrote:

Thank you.

I tried all of the above (hadn't noticed there was inline CSS in the h3, so
I zapped that no matter what).
display:inline-block and vertical-align:top didn't do much in Chrome on
Mint linux.

the min-height: 3em for p.robonav (Tom Livingston's suggestion) did do what
I wanted.


On Thu, Mar 27, 2014 at 10:06 AM, David Hucklesby huckle...@gmail.comwrote:


Not too sure what you are aiming at, but try this:

- Take the float:left out of the h3 above the gallery, allowing it to
occupy the full width

- Take the float:left and min-height:3em out of p.robonav, replacing
them with display:inline-block



Hmm. Sounds like you didn’t take the float:left out of p.robnav. That makes a
whole lot of difference in any browser. :)

FWIW I mostly avoid floats. There are better alternatives, IMHO.
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] dealing with media breaks

[David Laakso]

On Tue, Mar 25, 2014 at 9:16 PM, John j...@coffeeonmars.com wrote:
 Are there best practices in dealing with setting up and modifying media
 breaks and the CSS for each?

 John

John.

There are a number of methods. You will find the one that works best
for you and your clients. As with anything else on the Web, there is
no such animal as too much testing before you let the horses out of
the gate.

Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] ie/11

[David Laakso]

On Sun, Mar 16, 2014 at 8:15 PM, David Laakso laakso.davi...@gmail.com wrote:
 In the footer ie/11 is chopping-off the crossbar of the numerical
 digit 4. What to do?

Thanks to all who replied both on and off-list.

Re-set css for the containing blocks and re-set the generated content.
letter-spacing to .175em. The footer proper needs more work in all
browsers: but, at least, the revised letter-spacing seems to resolve
the specific clipping issue I wrote about in IE/11.

html
http://ccstudi.com/


Best,

David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Subject: Font Size Small in FireFox ?

[David Hucklesby]

On 3/17/14, 7:21 AM, Crest Christopher wrote:

Hi, Tom. You are seeing no difference in Font Sizes between browsers, hrmm
odd. I don't have Scale Text Only enabled within FireFox (27.0.1).

Tom Livingston wrote:

On Mon, Mar 17, 2014 at 8:36 AM, Crest Christopher
crestchristop...@gmail.com  wrote:

I changed my font-size to pixels, yet the fonts still look smaller in
FireFox then Chrome or IE (site
http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site.html),

probably something else wrong ?





[...]



Just a wild guess here, but might you have used FF's font scaling UI (View
Zoom  Scale Text Only) - scaled things down - and maybe left it down?




Another possibility - your Firefox browser is using a different font than your
other browsers? As you have not defined a font-face in your CSS, browsers will
use the one defined in the browser’s settings. There are noticeable differences
in sizes between fonts.

Suggestion: Try defining a font-face in your CSS. (One that exists on your
computer, that is.)
--
Cordially,
David

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] footer ul li has same attributes as header nav ul li?

[David Laakso]

On Sat, Mar 15, 2014 at 8:30 PM, John j...@coffeeonmars.com wrote:
 I could swear that I adequately differentiated my header nav from my footer
 nav, but the browsers are telling me differntly..

 Here is the link, if you could kindly take a peek:
 http://coffeeonmars.com/W200/test/DTake_Index.html

 The issue is the links at the bottom, which appear to be spilling out of the
 red area, have the same color, background-color, etc as the nav menu
 links..I'm just not seeing why..maybe need to step away for a bit..

 Thank you!

 John


Dunno John. Start with the obvious. Correct  the CSS parse errors and
validate the html.

Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] ie/11

[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] Do modern mobile browsers deliberately ignore font size?

[L. David Baron]

[ cc:ing list again, with Ezequiel Garzón's permission ]

On Friday 2014-03-14 10:36 +0100, Ezequiel Garzón wrote:
  Is this font boosting/inflation?
 
  It sounds like it is.
 
 
 Thanks for the feedback, David. I don't mean to extend this thread ad
 infinitum, but it's basically the core of my question to this list.
 Doesn't a feature named font inflation, which basically decides
 what's the best size for a given chunk of text, break CSS badly? If
 this is the industry trend I wouldn't be surprised to see major
 browsers apply font boosting even with the meta tag, etc. What's next?
 Font wisdom, where the browser chooses font family, color, weight,
 etc., ignoring all the styling? I wish browsers spent more time on
 making CSS-free content look better, improving their defaults (tables
 come quickly to mind), instead of ignoring CSS declarations.

The alternative to font inflation is substantially worse.

Mobile browsers give you a viewport in which you can pan and zoom
around a desktop-size viewport of the page.  This feature exists for
compatibility, to allow mobile Web browsers to view Web pages
designed before good mobile Web browsers existed, or designed
without considering them.  If you've considered mobile in your
design, you can use a meta viewport in your page to opt out of
parts or all of this behavior.

Some Web pages contain text that the user wants to read, and to do
this, and in cases where these dual viewports exist, the user needs
to zoom in to make the text a decent size.  If, at that zoom level
where the font is readably large, the user needs to scroll side to
side to reach *each line* of the text, because the width of the
block is wider than the device.  This is a horrible experience.

Font inflation exists to solve only this problem, which is a problem
that fundamentally would make mobile Web browsers unusable.  It
doesn't happen if pages declare a meta viewport that means there's
no viewport scaling involved, and it doesn't happen if all their
blocks are narrow enough to be readable without side-to-side
scrolling for each line.

-David

-- 
턞   L. David Baron http://dbaron.org/   턂
턢   Mozilla  https://www.mozilla.org/   턂
 Before I built a wall I'd ask to know
 What I was walling in or walling out,
 And to whom I was like to give offense.
   - Robert Frost, Mending Wall (1914)


signature.asc
Description: Digital signature
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Do modern mobile browsers deliberately ignore font size?

[L. David Baron]

On Sunday 2014-03-09 21:52 +0100, Ezequiel Garzón wrote:
 Is this font boosting/inflation?

It sounds like it is.

It sounds like the thread has already uncovered some links about the
Chromium implementation.  There's some information about
Gecko's implementation here:
http://www.jwir3.com/blog/2012/07/30/font-inflation-fennec-and-you/
and the start of a spec draft for the behavior here:
http://dev.w3.org/csswg/css-size-adjust/

-David

-- 
턞   L. David Baron http://dbaron.org/   턂
턢   Mozilla  https://www.mozilla.org/   턂
 Before I built a wall I'd ask to know
 What I was walling in or walling out,
 And to whom I was like to give offense.
   - Robert Frost, Mending Wall (1914)


signature.asc
Description: Digital signature
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 CSS3 make these shapes?

[David Hucklesby]

On 3/6/14, 6:54 PM, Philippe Wittenbergh wrote:


Le 7 mars 2014 à 11:23, John j...@coffeeonmars.com a écrit :


.is some kind of css required to show the png on those browsers that won't
handle the svg file? I guess something for IE?


But this reminds me - older Android (2.x and 3 iirc) also doesn't support SVG
at all, and tends to choke when parsing a CSS file that contains references
to SVG images. In this case, you're put of luck with CSS hackery. I use
Modernizr to detect SVG support, and then use the generated class to target
as needed.


 Example
 .nosvg E { background: url(image.png) no-repeat red; } /* — IE  9, old 
android */
 .svg E { background: url(image.svg) no-repeat red; } /* modern browsers, SVG 
file */



You may like to add .no-js as well - just in case. :)

.no-js E,
.no-svg E { background: url(image.png) no-repeat red; }

Also, check out this article:

 http://css-tricks.com/svg-fallbacks/

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help w/CSS and Bootstrap

[David Hucklesby]

On 3/2/14, 11:27 AM, Michael Beaudoin wrote:
[...]


The sample page is located at: http://192.185.4.142/~badoyn/report_test/

Questions are: - In the left sidebar (Choose a Report) I would like the
hover to extend the complete width of the sidebar and midway up/down between
the items. I still can't get this to work. Should I use a more specific style
to target just the left sidebar? I don't want hose all the panel that are
part of bootstrap.



I think you will have more success using Bootstrap’s .nav markup, styled with
.nav-pills and .nav-stacked. The current markup will need some difficult CSS to
resolve, methinks.

(This just from a cursory look at Bootstrap - you may find something better.)



- In the Report Parameters section, I've added some css/javascript that I
found on the web to make a custom drop down list. When I have just one it
works beautifully. When I add more they seem to operate at the same time.
I'm sure it's simple but I can't see it.  ...


Dunno about working beautifully as I can’t even focus them with my keyboard,
let alone having any ARIA to assist screen-readers. Hopefully they do better on
touch screens.

What do you have against select boxes - which would be easier to process
server-side, I would think?
--
Cordially,
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/