Re: [css-d] Webkit syntax for stopped linear gradient

2014-09-17 Thread Tim Dawson

On 17/09/2014 01:25, Philippe Wittenbergh wrote:


Do you happen to have a -moz- prefixed rule as well? Check the developer tools 
in Firefox, it
will almost certainly show you that it uses the prefixed one, not the 
un-prefixed, standard
one.

You're right, I've always had a -moz- prefixed rule as well.


Your error in the standard syntax is in the direction keyword. The correct 
syntax requires a
“TO” (or in your case, a top-to-bottom gradient, you can omit the direction 
keyword
altogether, as top-to-bottom is the default). So the correct syntax is:

background-image: linear-gradient(to bottom, #1B91FF 60%, #FEC409 60%, #FEC409 
100%);

That works in IE 10+, Firefox 24+, Safari 6.1+, bink based browsers.

I've not yet got that far in my testing, but it certainly works in Fx32.


http://www.w3.org/TR/css3-images/#linear-gradients

(yeah, the evolution of that syntax for gradients has been a complete mess, and 
ended in
something more complicated and harder to read than should be)
The prefixed versions are certainly simpler to read. In the standard syntax the use of 'to 
bottom' invites the question 'where from ?'. But this is code, not English.


Thanks for your help.

Tim

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

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


Re: [css-d] Webkit syntax for stopped linear gradient

2014-09-17 Thread Tim Dawson

On 17/09/2014 01:25, Philippe Wittenbergh wrote:


Your error in the standard syntax is in the direction keyword. The correct 
syntax requires a
“TO” (or in your case, a top-to-bottom gradient, you can omit the direction 
keyword
altogether, as top-to-bottom is the default). So the correct syntax is:

background-image: linear-gradient(to bottom, #1B91FF 60%, #FEC409 60%, #FEC409 
100%);

That works in IE 10+, Firefox 24+, Safari 6.1+, bink based browsers.

http://www.w3.org/TR/css3-images/#linear-gradients

Given what I read there (4.1.2 Linear Gradient Examples, EXAMPLE 12)

background-image: linear-gradient(#1B91FF 60%, #FEC409 60%, #FEC409 100%);

should work too in any compliant browser. It does work in Fx32 and Chrome37 (so far only tested 
locally, and with all other variants turned off to make certain this time) and is not too 
difficult to read.


Perhaps I should read the standards more often, but the priority to to find what actually works 
cross-browser.


Thanks again,

Tim

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

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


Re: [css-d] Webkit syntax for stopped linear gradient

2014-09-17 Thread Philippe Wittenbergh

Le 17 sept. 2014 à 16:14, Tim Dawson t...@ramasaig.com a écrit :

 Given what I read there (4.1.2 Linear Gradient Examples, EXAMPLE 12)
 
 background-image: linear-gradient(#1B91FF 60%, #FEC409 60%, #FEC409 100%);

Yes, in your case (the gradient goes from top to bottom), as I note in my 
previous message:
 (or in your case, a top-to-bottom gradient, you can omit the direction 
 keyword altogether, as top-to-bottom is the default).

Also,
 Perhaps I should read the standards more often, but the priority to to find 
 what actually works cross-browser.

it is always a good idea to take some time to read the specs!

Although sometimes things can be a little hard to find – case in point, I had 
to search for the spec that specifies the gradient syntax… It used to be in the 
CSS3 border and background module, but has moved to the CSS3 image module. MDN 
(Mozilla) is usually one the best resources for CSS issues and they always 
include a link to the relevant spec, just add ‘MDN’ to a search query in your 
favourite search engine and the relevant MDN page should come up near the top.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





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


[css-d] Style iFrame Scroll Bars

2014-09-17 Thread Crest Christopher
I found these rules for styling an iFrame scroll bar, they are suppose 
to work in all browsers, not only IE.  Unfortunately these rules are not 
working in Chrome ?


1. |html, body {|
2. |scrollbar-face-color: #D9DEE1;|
3. |scrollbar-highlight-color: #D9DEE1;|
4. |scrollbar-shadow-color: #D9DEE1;|
5. |scrollbar-3dlight-color: #D9DEE1;|
6. |scrollbar-arrow-color: #D9DEE1;|
7. |scrollbar-track-color: #D9DEE1;|
8. |scrollbar-darkshadow-color: #D9DEE1;|
9. |}|


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] More ems fun!

2014-09-17 Thread John
I have a situation in which I modified my header logo and tag line to be 
wrapped in an h1 tag and now it seems that my alignment of header elements 
doesn’t respect the left edge they had before, and the value of em seems to be 
way off…I increased my tag line to enable the line not to break by making width 
25ems (400 px) but that box now goes almost the width of the wrapper!

I have divs with colored outlines..can anyone help me to see what is at work 
here?

link:  http://www.coffeeonmars.com/170_su/client/

Thank you.

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


Re: [css-d] More ems fun!

2014-09-17 Thread Tom Livingston
Seems like a compounding issue. I don't really recommend putting your
h2 inside your h1.

On Wed, Sep 17, 2014 at 2:19 PM, John j...@coffeeonmars.com wrote:
 I have a situation in which I modified my header logo and tag line to be 
 wrapped in an h1 tag and now it seems that my alignment of header elements 
 doesn’t respect the left edge they had before, and the value of em seems to 
 be way off…I increased my tag line to enable the line not to break by making 
 width 25ems (400 px) but that box now goes almost the width of the wrapper!

 I have divs with colored outlines..can anyone help me to see what is at work 
 here?

 link:  http://www.coffeeonmars.com/170_su/client/

 Thank you.

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



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] More ems fun!

2014-09-17 Thread Tom Livingston
If not compounding then it's the relation of the width in ems and the
font-sizes. EMs used for things other than font-size (like width or
margin) are relative to the font-size of *the element it is applied
to*.

On Wed, Sep 17, 2014 at 2:19 PM, John j...@coffeeonmars.com wrote:
 I have a situation in which I modified my header logo and tag line to be 
 wrapped in an h1 tag and now it seems that my alignment of header elements 
 doesn’t respect the left edge they had before, and the value of em seems to 
 be way off…I increased my tag line to enable the line not to break by making 
 width 25ems (400 px) but that box now goes almost the width of the wrapper!

 I have divs with colored outlines..can anyone help me to see what is at work 
 here?

 link:  http://www.coffeeonmars.com/170_su/client/

 Thank you.

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



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] rem units and %

2014-09-17 Thread John

On Sep 16, 2014, at 7:35 PM, Eric e...@minerbits.com wrote:

 Did you read on this list that the REM unit is only for type? - It's a 
 relative unit like any other relative unit. I use it for everything except 
 element widths (they get %s) and line-height that should be unitless. 

No, I mean that in my gathering information about proper use of rems, I’m 
looking far and wide (online, people I know) and there is a disagreement as to 
how rem units should be used.

As I take this site responsive, I’m going with % also.

Thank you,

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


Re: [css-d] More ems fun!

2014-09-17 Thread John

On Sep 17, 2014, at 12:41 PM, Crest Christopher crestchristop...@gmail.com 
wrote:

 The H2 in your #taglinebox couldn't that be put in a p tag, it's quite 
 small text ?

Absolutely, it could, and I tried that and suddenly that little tag got 
huge..there’s something going on with that that I need to re-visit but I can’t 
allow to hold up the rest of the site, so I am back-grading to what I had 
before, but I really want to achieve this.

but below is the code that I am trying to emulate, supposed to be better for 
SEO by wrapping logo and text in an h1 tag, and making a span tag to hide the 
text..

Thank you!

J

Image Replacement

When we use a clickable logo image in our header, we also want to include 
machine-readable headline text within our h1 tag for SEO. But we'll want the 
logo, not the text, to display on the screen. Here's how to do it:

h1
  a href=index.php
spanMy Headline Text/span !-- for SEO --
img src=images/logo.jpg id=logo 
  alt=My Headline Text !-- for screen readers -- 
  width=XXX height=YYY /   
  /a
/h1 

h1 span {   
   display:none;
}  
/* h1 text inside the span tag does not visually display, 
but search engines can read it in the HTML code */  

Note that the a tag wraps both the text and the image, and the h1 tag wraps 
everything.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] More ems fun!

2014-09-17 Thread Crest Christopher

Span tags inside an H1 is suppose to help SEO, that would be news to me !

John wrote:

On Sep 17, 2014, at 12:41 PM, Crest Christophercrestchristop...@gmail.com  
wrote:


The H2 in your #taglinebox couldn't that be put in ap  tag, it's quite small 
text ?


Absolutely, it could, and I tried that and suddenly that little tag got 
huge..there’s something going on with that that I need to re-visit but I can’t 
allow to hold up the rest of the site, so I am back-grading to what I had 
before, but I really want to achieve this.

but below is the code that I am trying to emulate, supposed to be better for 
SEO by wrapping logo and text in an h1 tag, and making a span tag to hide the 
text..

Thank you!

J

Image Replacement

When we use a clickable logo image in our header, we also want to include 
machine-readable headline text within our h1 tag for SEO. But we'll want the 
logo, not the text, to display on the screen. Here's how to do it:

h1
   a href=index.php
 spanMy Headline Text/span  !-- for SEO --
 img src=images/logo.jpg id=logo
   alt=My Headline Text!-- for screen readers --
   width=XXX height=YYY /   
   /a
/h1

h1 span {   
display:none;
}
/* h1 text inside the span tag does not visually display,
but search engines can read it in the HTML code */  

Note that thea  tag wraps both the text and the image, and theh1  tag wraps 
everything.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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


Re: [css-d] More ems fun!

2014-09-17 Thread Tom Livingston
On Wed, Sep 17, 2014 at 4:31 PM, Crest Christopher
crestchristop...@gmail.com wrote:
 Span tags inside an H1 is suppose to help SEO, that would be news to me !


 John wrote:

 h1
a href=index.php
  spanMy Headline Text/span  !-- for SEO --
  img src=images/logo.jpg id=logo
alt=My Headline Text!-- for screen readers --
width=XXX height=YYY /
/a
 /h1

 h1 span {
 display:none;
 }
 /* h1 text inside the span tag does not visually display,


It's not the span tag that's good, it's the text it wraps. Though I'm
not sure how much better it is over the alt text of the image. Anyone
know?

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] More ems fun!

2014-09-17 Thread John
On Sep 17, 2014, at 1:31 PM, Crest Christopher crestchristop...@gmail.com 
wrote:

 Span tags inside an H1 is suppose to help SEO, that would be news to me !

Here is the reasoning, as I understand it..I am not an SEO whiz..

You have your logo - in most cases an image, but aside from alt text, nothing 
tells what it is. So, you use an h1 to hold the text, like “Bob’s Hot Dog 
Palace,” but the 

h1 span{
display:none;
}

prevents that from being seen (because the logo presumably says “Bob’s hot dog 
palace”) but since it’s in an h1, you get the benefits of better SEO 
results….that is my understanding of why to use this technique.

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


Re: [css-d] More ems fun!

2014-09-17 Thread Tim Climis
 h1 span{
 display:none;
 }

 prevents that from being seen (because the logo presumably says Bob's hot
dog palace) but since it's in an h1, you get the   benefits of better SEO
results..that is my understanding of why to use this technique.

Why not just h1 {display:none} ?

---Tim


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


Re: [css-d] More ems fun!

2014-09-17 Thread Karl DeSaulniers
On Sep 17, 2014, at 4:28 PM, Tim Climis tim.cli...@gmail.com wrote:

 h1 span{
 display:none;
 }
 
 prevents that from being seen (because the logo presumably says Bob's hot
 dog palace) but since it's in an h1, you get the   benefits of better SEO
 results..that is my understanding of why to use this technique.
 
 Why not just h1 {display:none} ?
 
 ---Tim

Probably so your actual text headers don't disappear while wrapping everything 
else with them. 

Karl

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


Re: [css-d] rem units and %

2014-09-17 Thread Felix Miata
John wrote on 2014-09-17 12:49 (GMT-0700):

 I mean that in my gathering information about proper use of rems, I’m
 looking far and wide (online, people I know) and there is a disagreement
 as to how rem units should be used.

One of the rem unit's important features, if not its most important, is that
size cascade is ignored. IMO it thus exists so that containers, and text, can
be (respectfully) sized *simply*, and *reliably*. Regardless of opinions what
the rem unit should be used for, the absence of cascade on text and
containers sized using rem the avoids the obfuscation font size cascade can
create, which often makes results seem inexplicable (and causes new threads
to start here).

When you set a width in rem, the ratio between base font size and the
container's design width remains constant no matter how many layers deep that
container lives, and no matter what the base font size is. Absent a viewport
contstraint, and absent you overriding the user's personal optimum font size
(his browser's default size setting) WRT that particular container, your e.g.
11 words wide container will hold 11 optimally sized words regardless whether
the user's default is 3mm, 12pt, 73px, 11px, 29px, 43px, etc. IOW, the user
agent's default size is, as it should be to stylists, irrelevant...

 ...responsive...

...a concept fundamental to the very idea of responsive design.
-- 
The wise are known for their understanding, and pleasant
words are persuasive. Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

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


Re: [css-d] More ems fun!

2014-09-17 Thread John E. Cavanaugh
Help! I started getting these email at random - I never signed up, and I don't 
know what this about. How do I get off the mailing list?

John E. Cavanaugh MD.

There's always a wrong way to do the right thing ... Cavanaugh's Law

 On Sep 17, 2014, at 13:19, John j...@coffeeonmars.com wrote:
 
 I have a situation in which I modified my header logo and tag line to be 
 wrapped in an h1 tag and now it seems that my alignment of header elements 
 doesn’t respect the left edge they had before, and the value of em seems to 
 be way off…I increased my tag line to enable the line not to break by making 
 width 25ems (400 px) but that box now goes almost the width of the wrapper!
 
 I have divs with colored outlines..can anyone help me to see what is at work 
 here?
 
 link:  http://www.coffeeonmars.com/170_su/client/
 
 Thank you.
 
 John
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style iFrame Scroll Bars

2014-09-17 Thread Philippe Wittenbergh

Le 18 sept. 2014 à 00:28, Crest Christopher crestchristop...@gmail.com a 
écrit :

 I found these rules for styling an iFrame scroll bar, they are suppose to 
 work in all browsers, not only IE.  Unfortunately these rules are not working 
 in Chrome ?
 
 1. |html, body {|
 2. |scrollbar-face-color: #D9DEE1;|
 3. |scrollbar-highlight-color: #D9DEE1;|
 4. |scrollbar-shadow-color: #D9DEE1;|
 5. |scrollbar-3dlight-color: #D9DEE1;|
 6. |scrollbar-arrow-color: #D9DEE1;|
 7. |scrollbar-track-color: #D9DEE1;|
 8. |scrollbar-darkshadow-color: #D9DEE1;|
 9. |}|

That will only work in IE.

There is a way to style scrollbars in WebKit  Bink based browsers; it is 
completely different syntax than the above though.
There is _no_ way to style scrollbars in Firefox.

(ps - I consider styling scrollbars very user unfriendly…)


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





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


Re: [css-d] Style iFrame Scroll Bars

2014-09-17 Thread Crest Christopher
I wanted to make a flat, simple style color, even you Philippe would 
like the subtle change I would do :-) Since I can't change iFrame Scroll 
bar, and there is no other alternative, I'll have to be happy with the 
defaults !


Philippe Wittenbergh wrote:

Le 18 sept. 2014 à 00:28, Crest Christophercrestchristop...@gmail.com  a 
écrit :


I found these rules for styling an iFrame scroll bar, they are suppose to work 
in all browsers, not only IE.  Unfortunately these rules are not working in 
Chrome ?

1. |html, body {|
2. |scrollbar-face-color: #D9DEE1;|
3. |scrollbar-highlight-color: #D9DEE1;|
4. |scrollbar-shadow-color: #D9DEE1;|
5. |scrollbar-3dlight-color: #D9DEE1;|
6. |scrollbar-arrow-color: #D9DEE1;|
7. |scrollbar-track-color: #D9DEE1;|
8. |scrollbar-darkshadow-color: #D9DEE1;|
9. |}|


That will only work in IE.

There is a way to style scrollbars in WebKit  Bink based browsers; it is 
completely different syntax than the above though.
There is _no_ way to style scrollbars in Firefox.

(ps - I consider styling scrollbars very user unfriendly…)


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






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


Re: [css-d] rem units and %

2014-09-17 Thread Crest Christopher
There needs to be a guideline on EM's  REM's what about using them for 
positioning.  I was helped from someone on this list with that a few 
weeks ago regarding using them as positioning.


This topic re-surfaces quite frequently, there should be some 
guidelines, then if the developer wants to expand on those guidelines 
they can, if not, the guide is more then adequate for any or all web 
page development.


Felix Miata wrote:

John wrote on 2014-09-17 12:49 (GMT-0700):


I mean that in my gathering information about proper use of rems, I’m
looking far and wide (online, people I know) and there is a disagreement
as to how rem units should be used.


One of the rem unit's important features, if not its most important, is that
size cascade is ignored. IMO it thus exists so that containers, and text, can
be (respectfully) sized *simply*, and *reliably*. Regardless of opinions what
the rem unit should be used for, the absence of cascade on text and
containers sized using rem the avoids the obfuscation font size cascade can
create, which often makes results seem inexplicable (and causes new threads
to start here).

When you set a width in rem, the ratio between base font size and the
container's design width remains constant no matter how many layers deep that
container lives, and no matter what the base font size is. Absent a viewport
contstraint, and absent you overriding the user's personal optimum font size
(his browser's default size setting) WRT that particular container, your e.g.
11 words wide container will hold 11 optimally sized words regardless whether
the user's default is 3mm, 12pt, 73px, 11px, 29px, 43px, etc. IOW, the user
agent's default size is, as it should be to stylists, irrelevant...


...responsive...


...a concept fundamental to the very idea of responsive design.

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


[css-d] after pseudo-class and link

2014-09-17 Thread Dave Solko
Is it possible to add a link to the :after?

I'm adding an image via :after, and I want to make it clickable. Is this 
possible?

Using WP, and it's not possible to add the image without hacking the template. 
However, it's easy to add it to the css, that's why the convoluted solution.

Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165



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


Re: [css-d] More ems fun!

2014-09-17 Thread Crest Christopher
The image is suppose to be seen, but it's not seen because the display 
is set to none, but it's in a H1 so it works for SEO, but the image 
doesn't display, hrm ?


Karl DeSaulniers wrote:

On Sep 17, 2014, at 4:28 PM, Tim Climistim.cli...@gmail.com  wrote:


h1 span{
display:none;
}

prevents that from being seen (because the logo presumably says Bob's hot

dog palace) but since it's in an h1, you get thebenefits of better SEO
results..that is my understanding of why to use this technique.

Why not just h1 {display:none} ?

---Tim


Probably so your actual text headers don't disappear while wrapping everything 
else with them.

Karl

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

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