Re: [css-d] Ham Menus

[Crest Christopher]

I don't follow ?
Why have a ham menu for a site that isn't responsive as the one you 
linked too ?



Al Sparber <mailto:aspar...@roadrunner.com>
Friday, March 31, 2017 10:03 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


You can use both:
http://www.projectseven.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/
Philippe Wittenbergh <mailto:e...@l-c-n.com>
Friday, March 31, 2017 9:44 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


The icon itself (3 horizontal lines) often confuse users…

So, no, you don’t have to use it. Best thing to do: use a text string, 
such as “menu” or “navigation”.


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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Friday, March 31, 2017 9:11 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Hamburger menus. I know nothing in Web Dev is mandatory; but must 
Hamburger menus look like Hamburgers or otherwise will it confuse users ?


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

Re: [css-d] Ham Menus

[Crest Christopher]

I'll think of something that is obviously, then again as you mention; 
text is the best solution. 



Philippe Wittenbergh <mailto:e...@l-c-n.com>
Friday, March 31, 2017 9:44 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


The icon itself (3 horizontal lines) often confuse users…

So, no, you don’t have to use it. Best thing to do: use a text string, 
such as “menu” or “navigation”.


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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Friday, March 31, 2017 9:11 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Hamburger menus. I know nothing in Web Dev is mandatory; but must 
Hamburger menus look like Hamburgers or otherwise will it confuse users ?


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

[Crest Christopher]

Hamburger menus. I know nothing in Web Dev is mandatory; but must 
Hamburger menus look like Hamburgers or otherwise will it confuse users ?

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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

Mi B / MiB
I'm still not understanding the math as to; How do you get 96px from 8vw 
if the viewport width is 1200px ?  



Mi B <mailto:digital.disc...@gmail.com>
Friday, March 31, 2017 8:45 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


I pasted from OpenOffice. Sorry.
(target PX/1vw in PX ) >> target px expressed in vw. The actual size 
of 1vw is determined by 0.01*width.


I think it’s mighty strange to think in PX here though. This makes not 
much sense unless you want to investigate a specific rendering. At 
least one should need to investigate multiple renderings and see if 
they behave as expected.


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Friday, March 31, 2017 7:09 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Your post is sorta jumbled.  You're saying 1vw or (0.01*1200=96px) ?


Mi B <mailto:digital.disc...@gmail.com>
Friday, March 31, 2017 6:57 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

apr. 1 2017 kl. 00:32 Crest Christopher<crestchristop...@gmail.com>:

How do you get 96px from 8vw if the viewport width is 1200px ?


width   1200px
1 vw
=0,01*width
px



target  96  px
exp as  (target/1vw )vw>>  8vw




Tom Livingston<mailto:tom...@gmail.com>
Friday, March 31, 2017 12:24 PMvia 
Postbox<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

https://www.sitepoint.com/css-viewport-units-quick-start/



Karl DeSaulniers<mailto:k...@designdrumm.com>
Wednesday, March 29, 2017 8:18 PMvia 
Postbox<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
@crest,
Instead, why don't you explain what you're trying to accomplish (in as few 
words as possible)
and we can let you know if VW and VH is practical or if you should be using a 
different way to accomplish said task.

My thoughts are that you are trying to make your text size as the window gets 
resized. Am I correct in this assumption?

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher<mailto:crestchristop...@gmail.com>
Wednesday, March 29, 2017 8:20 AMvia 
Postbox<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
​
That is 1000 / 100, how did you get 2.2 from 1000/100 that is 10 ?

Philippe Wittenbergh<mailto:e...@l-c-n.com>
Wednesday, March 29, 2017 1:25 AMvia 
Postbox<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Ok, I assume, given that paragraph above (a quote from somewhere on the 
internets?, source?), I assume you are trying to understand what the following 
means:

.myclass { font-size: calc( 2.2em + 2.2vw); }

1. calc() means: calculate the sum of the following two values.
2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 = 35.2px.
3. 2.2vw - here is where it gets interesting: `vw` stands for viewport width, 
1vw = 1% of the viewport width.
Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 = 2.2 * 
10 = 22px

Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px

3b. Now resize the window, let’s assume the viewport / window is 500px wide; 
2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will be 35.2px + 
11px = 46.2px.

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





Crest Christopher<mailto:crestchristop...@gmail.com>
Tuesday, March 28, 2017 11:24 PMvia 
Postbox<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Your stomach is hurting from the antacids.
I'm only trying to understand.

​
Take my previous example and help me understand.







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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

How do you get 96px from 8vw if the viewport width is 1200px ?


Tom Livingston <mailto:tom...@gmail.com>
Friday, March 31, 2017 12:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


https://www.sitepoint.com/css-viewport-units-quick-start/



Karl DeSaulniers <mailto:k...@designdrumm.com>
Wednesday, March 29, 2017 8:18 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

@crest,
Instead, why don't you explain what you're trying to accomplish (in as 
few words as possible)
and we can let you know if VW and VH is practical or if you should be 
using a different way to accomplish said task.


My thoughts are that you are trying to make your text size as the 
window gets resized. Am I correct in this assumption?


Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Wednesday, March 29, 2017 8:20 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

​
That is 1000 / 100, how did you get 2.2 from 1000/100 that is 10 ?

Philippe Wittenbergh <mailto:e...@l-c-n.com>
Wednesday, March 29, 2017 1:25 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


Ok, I assume, given that paragraph above (a quote from somewhere on 
the internets?, source?), I assume you are trying to understand what 
the following means:


.myclass { font-size: calc( 2.2em + 2.2vw); }

1. calc() means: calculate the sum of the following two values.
2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 = 
35.2px.
3. 2.2vw - here is where it gets interesting: `vw` stands for viewport 
width, 1vw = 1% of the viewport width.
Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 
= 2.2 * 10 = 22px


Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px

3b. Now resize the window, let’s assume the viewport / window is 500px 
wide; 2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will 
be 35.2px + 11px = 46.2px.


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





Crest Christopher <mailto:crestchristop...@gmail.com>
Tuesday, March 28, 2017 11:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Your stomach is hurting from the antacids.
I'm only trying to understand.

​
Take my previous example and help me understand.








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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

If we assume the viewport is 2000px wide with calc(2.3+2.1) then;
2000px (viewport) * 2.3 /100 * 10 = 460px, correct ?

I still don't understand;

   calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px

​






Philippe Wittenbergh <mailto:e...@l-c-n.com>
Wednesday, March 29, 2017 1:25 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


Ok, I assume, given that paragraph above (a quote from somewhere on 
the internets?, source?), I assume you are trying to understand what 
the following means:


.myclass { font-size: calc( 2.2em + 2.2vw); }

1. calc() means: calculate the sum of the following two values.
2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 = 
35.2px.
3. 2.2vw - here is where it gets interesting: `vw` stands for viewport 
width, 1vw = 1% of the viewport width.
Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 
= 2.2 * 10 = 22px


Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px

3b. Now resize the window, let’s assume the viewport / window is 500px 
wide; 2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will 
be 35.2px + 11px = 46.2px.


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





Crest Christopher <mailto:crestchristop...@gmail.com>
Tuesday, March 28, 2017 11:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Your stomach is hurting from the antacids.
I'm only trying to understand.

​
Take my previous example and help me understand.






Karl DeSaulniers <mailto:k...@designdrumm.com>
Tuesday, March 28, 2017 11:00 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Ouch. My stomach hurts.

@crest
Go post that question on Stack Overflow and see what they say.

Best,
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/
Philippe Wittenbergh <mailto:e...@l-c-n.com>
Thursday, March 23, 2017 10:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


Mr Crest,

As others have already said: `em` units and `vw` units have NOTHING, I 
repeat, NOTHING, to do with each other.


(also, if you don’t mind, please take the time to trim your replies to 
this list)



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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:02 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

When using vw/vh em are always going to be doubled ? What about pixels ?

For example; 2em is equal to 4vw. Also

If the default font size is 16 pixels and if |2vw| is 2% of the 
viewport’s width ?





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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

   Let’s assume a 1000px wide viewport / window, then 2.2vw /1000px/100
   = 2.2 / 10 = 22px

   Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px

​
That is 1000 / 100, how did you get 2.2 from 1000/100 that is 10 ?

Philippe Wittenbergh <mailto:e...@l-c-n.com>
Wednesday, March 29, 2017 1:25 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


Ok, I assume, given that paragraph above (a quote from somewhere on 
the internets?, source?), I assume you are trying to understand what 
the following means:


.myclass { font-size: calc( 2.2em + 2.2vw); }

1. calc() means: calculate the sum of the following two values.
2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 = 
35.2px.
3. 2.2vw - here is where it gets interesting: `vw` stands for viewport 
width, 1vw = 1% of the viewport width.
Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 
= 2.2 * 10 = 22px


Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px

3b. Now resize the window, let’s assume the viewport / window is 500px 
wide; 2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will 
be 35.2px + 11px = 46.2px.


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





Crest Christopher <mailto:crestchristop...@gmail.com>
Tuesday, March 28, 2017 11:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Your stomach is hurting from the antacids.
I'm only trying to understand.

​
Take my previous example and help me understand.






Karl DeSaulniers <mailto:k...@designdrumm.com>
Tuesday, March 28, 2017 11:00 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Ouch. My stomach hurts.

@crest
Go post that question on Stack Overflow and see what they say.

Best,
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/
Philippe Wittenbergh <mailto:e...@l-c-n.com>
Thursday, March 23, 2017 10:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


Mr Crest,

As others have already said: `em` units and `vw` units have NOTHING, I 
repeat, NOTHING, to do with each other.


(also, if you don’t mind, please take the time to trim your replies to 
this list)



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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:02 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

When using vw/vh em are always going to be doubled ? What about pixels ?

For example; 2em is equal to 4vw. Also

If the default font size is 16 pixels and if |2vw| is 2% of the 
viewport’s width ?





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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

Your stomach is hurting from the antacids.
I'm only trying to understand.

   In this example, at a viewport width of 0, the font-size would be
   exactly 1em. As the screen >gets larger, the value of 1vw would be
   added to the minimum font size of 1em. But this >technique is not
   always ideal; often we want to set a minimum font size at a screen
   size other >than zero.

​
Take my previous example and help me understand.






Karl DeSaulniers <mailto:k...@designdrumm.com>
Tuesday, March 28, 2017 11:00 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Ouch. My stomach hurts.

@crest
Go post that question on Stack Overflow and see what they say.

Best,
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/
Philippe Wittenbergh <mailto:e...@l-c-n.com>
Thursday, March 23, 2017 10:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


Mr Crest,

As others have already said: `em` units and `vw` units have NOTHING, I 
repeat, NOTHING, to do with each other.


(also, if you don’t mind, please take the time to trim your replies to 
this list)



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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:02 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

When using vw/vh em are always going to be doubled ? What about pixels ?

For example; 2em is equal to 4vw. Also

If the default font size is 16 pixels and if |2vw| is 2% of the 
viewport’s width ?



Mi B <mailto:digital.disc...@gmail.com>
Thursday, March 23, 2017 11:16 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


I haven’t used these new units, but according to 
https://www.w3.org/TR/css3-values/#lengths 'vw’ is "1% of viewport’s 
width and ’vh’ is "1% of viewport’s height”. As ’ems’ are not related 
to the viewport ”size" at all, then I’d say you can never say what you 
suggest with any useful certainty, unless you somehow set the basic 
font size in relation to the viewport size.


Once you’ve set the basic font size for a page, you can use ems or any 
other relative size unit to change the size for a contained element. 
That’s if you’ve reset the element specific relative sizes provided by 
the browser itself somehow. Typically sizes are inherited, but HTML 
elements also have specific relative sizes in most browsers.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:14 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Speaking of which, can someone once again clarify, for example; 2.2em 
would equal 4.4vw ?





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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

As mentioned EM and VW have nothing to do with each other. Therefore the 
following


Correct me if I'm wrong but wouldn't the following be 4.4em if 2.2vw is 
added to the font-size of 2.2em ?


calc( 2.2em + 2.2vw );.

​



Philippe Wittenbergh <mailto:e...@l-c-n.com>
Thursday, March 23, 2017 10:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


Mr Crest,

As others have already said: `em` units and `vw` units have NOTHING, I 
repeat, NOTHING, to do with each other.


(also, if you don’t mind, please take the time to trim your replies to 
this list)



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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:02 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

When using vw/vh em are always going to be doubled ? What about pixels ?

For example; 2em is equal to 4vw. Also

If the default font size is 16 pixels and if |2vw| is 2% of the 
viewport’s width ?



Mi B <mailto:digital.disc...@gmail.com>
Thursday, March 23, 2017 11:16 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


I haven’t used these new units, but according to 
https://www.w3.org/TR/css3-values/#lengths 'vw’ is "1% of viewport’s 
width and ’vh’ is "1% of viewport’s height”. As ’ems’ are not related 
to the viewport ”size" at all, then I’d say you can never say what you 
suggest with any useful certainty, unless you somehow set the basic 
font size in relation to the viewport size.


Once you’ve set the basic font size for a page, you can use ems or any 
other relative size unit to change the size for a contained element. 
That’s if you’ve reset the element specific relative sizes provided by 
the browser itself somehow. Typically sizes are inherited, but HTML 
elements also have specific relative sizes in most browsers.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:14 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Speaking of which, can someone once again clarify, for example; 2.2em 
would equal 4.4vw ?



Tom Livingston <mailto:tom...@gmail.com>
Thursday, March 23, 2017 8:48 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Sorry, that's just the typical way I hear of these types of things.
Newsletters or this list mainly.







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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

When using vw/vh em are always going to be doubled ? What about pixels ?

For example; 2em is equal to 4vw. Also

If the default font size is 16 pixels and if |2vw| is 2% of the 
viewport’s width ?



Mi B <mailto:digital.disc...@gmail.com>
Thursday, March 23, 2017 11:16 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>


I haven’t used these new units, but according to 
https://www.w3.org/TR/css3-values/#lengths 'vw’ is "1% of viewport’s 
width and ’vh’ is "1% of viewport’s height”. As ’ems’ are not related 
to the viewport ”size" at all, then I’d say you can never say what you 
suggest with any useful certainty, unless you somehow set the basic 
font size in relation to the viewport size.


Once you’ve set the basic font size for a page, you can use ems or any 
other relative size unit to change the size for a contained element. 
That’s if you’ve reset the element specific relative sizes provided by 
the browser itself somehow. Typically sizes are inherited, but HTML 
elements also have specific relative sizes in most browsers.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:14 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Speaking of which, can someone once again clarify, for example; 2.2em 
would equal 4.4vw ?



Tom Livingston <mailto:tom...@gmail.com>
Thursday, March 23, 2017 8:48 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Sorry, that's just the typical way I hear of these types of things.
Newsletters or this list mainly.





Philip Taylor <mailto:p.tay...@rhul.ac.uk>
Thursday, March 23, 2017 8:23 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Thank you Tom. I suppose what I had in mind was a W3C-hosted list, but 
if there is no such thing then pointers to derivative lists such as 
these would be a good fallback.

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Tom Livingston <mailto:tom...@gmail.com>
Thursday, March 23, 2017 7:30 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

I subscribe to newsletters such as Frontend Focus, Alistapart (digest),
Versioning (less focused, but good), Responsive Design Weekly, CSS-tricks
and a couple others I can't think of right now. If I dig them up I will
reply again.



On Thu, Mar 23, 2017 at 6:35 AM Philip Taylor <p.tay...@rhul.ac.uk> wrote:

It is only in the last few days that I have learned of the existence of vh
and vw units. I can already see just what an advance they represent, and I
am very sorry that I did not learn of their existence earlier. To which
list should I subscribe if I wish to be regularly and reliably informed of
changes to the CSS specification(s) ?
--

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



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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

What do you mean EM are compound ?

If the browser is set to 16px and the parent is 2.1em and the child is 
set to 1.4em that would be 47.xx vw ?



Tom Livingston <mailto:tom...@gmail.com>
Thursday, March 23, 2017 11:39 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Once again, they are unrelated in the way you are showing here.

vw/vh units are related to the VIEWPORT dimensions. 1vm = 1% of the 
viewport width, *whatever* it may be.


2.2em is a unit relative to a users browser preference setting AND/OR 
the size set on a parent element. If browser preference is set at 16px 
then 1em = 16px. EMs compound, so they can be tricky. So browser is 
set to 16px, parent set to 2em, then child set to 2em will be 
equivalent to 64px (16 x 2 x 2).


REMs, on the other hand, are relative to the root element (HTML) which 
is the browser preference setting. So if the browser preference is 
16px and you set an element to 1rem, NO MATTER WHERE IN THE DOM IT IS, 
it will be equivalent to 16px;









--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com 
<http://medialogic.com>



#663399
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, March 23, 2017 10:14 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Speaking of which, can someone once again clarify, for example; 2.2em 
would equal 4.4vw ?



Tom Livingston <mailto:tom...@gmail.com>
Thursday, March 23, 2017 8:48 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Sorry, that's just the typical way I hear of these types of things.
Newsletters or this list mainly.





Philip Taylor <mailto:p.tay...@rhul.ac.uk>
Thursday, March 23, 2017 8:23 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Thank you Tom. I suppose what I had in mind was a W3C-hosted list, but 
if there is no such thing then pointers to derivative lists such as 
these would be a good fallback.

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Tom Livingston <mailto:tom...@gmail.com>
Thursday, March 23, 2017 7:30 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

I subscribe to newsletters such as Frontend Focus, Alistapart (digest),
Versioning (less focused, but good), Responsive Design Weekly, CSS-tricks
and a couple others I can't think of right now. If I dig them up I will
reply again.



On Thu, Mar 23, 2017 at 6:35 AM Philip Taylor <p.tay...@rhul.ac.uk> wrote:

It is only in the last few days that I have learned of the existence of vh
and vw units. I can already see just what an advance they represent, and I
am very sorry that I did not learn of their existence earlier. To which
list should I subscribe if I wish to be regularly and reliably informed of
changes to the CSS specification(s) ?
--

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



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

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Crest Christopher]

Speaking of which, can someone once again clarify, for example; 2.2em 
would equal 4.4vw ?



Tom Livingston 
Thursday, March 23, 2017 8:48 AMvia Postbox 


Sorry, that's just the typical way I hear of these types of things.
Newsletters or this list mainly.





Philip Taylor 
Thursday, March 23, 2017 8:23 AMvia Postbox 

Thank you Tom. I suppose what I had in mind was a W3C-hosted list, but 
if there is no such thing then pointers to derivative lists such as 
these would be a good fallback.

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Tom Livingston 
Thursday, March 23, 2017 7:30 AMvia Postbox 


I subscribe to newsletters such as Frontend Focus, Alistapart (digest),
Versioning (less focused, but good), Responsive Design Weekly, CSS-tricks
and a couple others I can't think of right now. If I dig them up I will
reply again.



On Thu, Mar 23, 2017 at 6:35 AM Philip Taylor  wrote:

It is only in the last few days that I have learned of the existence of vh
and vw units. I can already see just what an advance they represent, and I
am very sorry that I did not learn of their existence earlier. To which
list should I subscribe if I wish to be regularly and reliably informed of
changes to the CSS specification(s) ?
--

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

Philip Taylor 
Thursday, March 23, 2017 6:34 AMvia Postbox 

It is only in the last few days that I have learned of the existence 
of vh and vw units. I can already see just what an advance they 
represent, and I am very sorry that I did not learn of their existence 
earlier. To which list should I subscribe if I wish to be regularly 
and reliably informed of changes to the CSS specification(s) ?


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 use "radius" if I have no img tag?

[Crest Christopher]

What I was thinking. 


Karl DeSaulniers 
Tuesday, March 21, 2017 4:53 PMvia Postbox 

Put your image inside a div and round the corners on the div, not the 
image with overflow:hidden on the div.


Best,
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/
Michelle Konzack 
Tuesday, March 21, 2017 10:01 AMvia Postbox 


Hello *,

in one of my websites I have on the top left and right two images like



which I make round using

.img_head { border-radius: 50%; }

which works fine, BUT, if I use something like

#pageHeadLeft { background-image: url(/michelle.png); }

then I can not make it round like in the previous version. Now I am
searching allready for hours without finding a solution.

Any suggestions?

Thanks

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

[Crest Christopher]

That answers my question :)


Tom Livingston <mailto:tom...@gmail.com>
Monday, March 20, 2017 7:26 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

As always, the google is your friend.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

On Mon, Mar 20, 2017 at 4:17 PM, Crest Christopher <



Crest Christopher <mailto:crestchristop...@gmail.com>
Monday, March 20, 2017 4:17 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
There is a question. The second statement as you perceive is more of a 
clarification.



Philip Taylor <mailto:p.tay...@rhul.ac.uk>
Monday, March 20, 2017 10:26 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Your habit of phrasing questions as statements does not (IMHO) 
encourage others to try to answer them. If you were to phrase 
questions as questions (/qua/ questions), I believe that you might 
expect more, and more informative, replies.


Philip Taylor
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 11:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

I have a question regarding box sizing.

Box Sizing: Content Box
Doesn't include the height values, only the width values, unlike 
border box ?


Box Sizing: Border Box
Includes the border and padding values into the height and width 
values, allowing you to set the total width of an alement though the 
width property.


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

Re: [css-d] Box Sizing

[Crest Christopher]

There is a question. The second statement as you perceive is more of a 
clarification.



Philip Taylor <mailto:p.tay...@rhul.ac.uk>
Monday, March 20, 2017 10:26 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
Your habit of phrasing questions as statements does not (IMHO) 
encourage others to try to answer them. If you were to phrase 
questions as questions (/qua/ questions), I believe that you might 
expect more, and more informative, replies.


Philip Taylor
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 11:24 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

I have a question regarding box sizing.

Box Sizing: Content Box
Doesn't include the height values, only the width values, unlike 
border box ?


Box Sizing: Border Box
Includes the border and padding values into the height and width 
values, allowing you to set the total width of an alement though the 
width property.


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

[Crest Christopher]

I have a question regarding box sizing.

Box Sizing: Content Box
Doesn't include the height values, only the width values, unlike border 
box ?


Box Sizing: Border Box
Includes the border and padding values into the height and width values, 
allowing you to set the total width of an alement though the width property.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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-sizes & EM

[Crest Christopher]

Your solution is to go from em, then to vw, back to em all depending on 
the view port. Max size desired would be when the viewport width is 
extremely large ?



Tom Livingston <mailto:tom...@gmail.com>
Sunday, March 19, 2017 8:13 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

1vw = 1% of the viewport width. But, in the case of a desktop browser, the
width is variable - hence the beauty of the vw/vh units. Provided the
browser supports these units.

See http://caniuse.com/#feat=viewport-units

It's not that easy though as fonts using vw can quickly become too tiny or
extremely huge depending on the viewport.

When I have tried them, and I have used them sparingly, I set the font in
ems (or rems most likely) for a base (mobile) style, then at a certain
wider breakpoint changed to vw, and then changed back to ems/rems when the
font has gotten to the max size I desired. I have seen SASS mixins that
implement a min/max but it had its limitations.





Tom Livingston <mailto:tom...@gmail.com>
Sunday, March 19, 2017 8:04 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

I see that as if the viewport is 800px wide, then 800px is 100% of the
width.



On Sun, Mar 19, 2017 at 7:56 PM, Crest Christopher <


Tom Livingston <mailto:tom...@gmail.com>
Sunday, March 19, 2017 7:52 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
No. Viewport units are based on the viewport. 1vw = 1% of viewport 
width, 1vh = 1% viewport height.





--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com 
<http://medialogic.com>



#663399
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 7:45 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

What is 1vw, a pixel ?


Tom Livingston <mailto:tom...@gmail.com>
Sunday, March 19, 2017 7:39 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

No.

Viewport units are based on the viewport. 1vw = 1% of viewport width, 
1vh =

1% viewport height.



On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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-sizes & EM

[Crest Christopher]

Therefore, if the viewport width is 800px = 8% of viewport width; if I'm 
doing the math right ?



Tom Livingston <mailto:tom...@gmail.com>
Sunday, March 19, 2017 7:52 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
No. Viewport units are based on the viewport. 1vw = 1% of viewport 
width, 1vh = 1% viewport height.





--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com 
<http://medialogic.com>



#663399
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 7:45 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

What is 1vw, a pixel ?


Tom Livingston <mailto:tom...@gmail.com>
Sunday, March 19, 2017 7:39 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

No.

Viewport units are based on the viewport. 1vw = 1% of viewport width, 
1vh =

1% viewport height.



On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <

Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 6:30 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

If understood correctly based on the article Rainer posted.

1em = 2vw, 4em = 8vw etc ?


Rainer Berthold <mailto:rainer.berth...@gmx.net>
Sunday, March 19, 2017 2:39 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Sorry, can’t follow. Tom’s post may help.

Best, Rainer


Am 19.03.2017 um 16:03 schrieb Crest Christopher 
<crestchristop...@gmail.com>:


Based on what I read in the article; EM are always double in VW ?



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


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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-sizes & EM

[Crest Christopher]

What is 1vw, a pixel ?


Tom Livingston <mailto:tom...@gmail.com>
Sunday, March 19, 2017 7:39 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

No.

Viewport units are based on the viewport. 1vw = 1% of viewport width, 
1vh =

1% viewport height.



On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <

Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 6:30 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

If understood correctly based on the article Rainer posted.

1em = 2vw, 4em = 8vw etc ?


Rainer Berthold <mailto:rainer.berth...@gmx.net>
Sunday, March 19, 2017 2:39 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Sorry, can’t follow. Tom’s post may help.

Best, Rainer


Am 19.03.2017 um 16:03 schrieb Crest Christopher 
<crestchristop...@gmail.com>:


Based on what I read in the article; EM are always double in VW ?



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 11:03 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Based on what I read in the article; EM are always double in VW ?



Rainer Berthold <mailto:rainer.berth...@gmx.net>
Sunday, March 19, 2017 2:12 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Maybe this is an interesting read:
https://www.smashingmagazine.com/2016/05/fluid-typography/

Best, Rainer


Am 19.03.2017 um 04:45 schrieb Crest Christopher 
<crestchristop...@gmail.com>:


I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Font-sizes & EM

[Crest Christopher]

If understood correctly based on the article Rainer posted.

1em = 2vw, 4em = 8vw etc ?


Rainer Berthold <mailto:rainer.berth...@gmx.net>
Sunday, March 19, 2017 2:39 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Sorry, can’t follow. Tom’s post may help.

Best, Rainer


Am 19.03.2017 um 16:03 schrieb Crest Christopher 
<crestchristop...@gmail.com>:


Based on what I read in the article; EM are always double in VW ?



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, March 19, 2017 11:03 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Based on what I read in the article; EM are always double in VW ?



Rainer Berthold <mailto:rainer.berth...@gmx.net>
Sunday, March 19, 2017 2:12 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Maybe this is an interesting read:
https://www.smashingmagazine.com/2016/05/fluid-typography/

Best, Rainer


Am 19.03.2017 um 04:45 schrieb Crest Christopher 
<crestchristop...@gmail.com>:


I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


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

Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, March 18, 2017 11:45 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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-sizes & EM

[Crest Christopher]

Based on what I read in the article; EM are always double in VW ?



Rainer Berthold <mailto:rainer.berth...@gmx.net>
Sunday, March 19, 2017 2:12 AMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>

Maybe this is an interesting read:
https://www.smashingmagazine.com/2016/05/fluid-typography/

Best, Rainer


Am 19.03.2017 um 04:45 schrieb Crest Christopher 
<crestchristop...@gmail.com>:


I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


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

Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, March 18, 2017 11:45 PMvia Postbox 
<https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Font-sizes & EM

[Crest Christopher]

I'm use to using fixed heights for fonts, pixel being the main one. If I 
want to have a font adjust based on screen size, percentages is the best 
route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


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

Re: [css-d] An Example of Gradients for a Curtain

[Crest Christopher]

Eric, the curtain was all CSS ?

If so how did you create the taper effect on the curtains ?


Eric A. Meyer 
Friday, March 17, 2017 3:34 PMvia Postbox 


On 17 Mar 2017, at 15:04, John Beales wrote:


@Eric: That's exactly it. I was also able to turn up the similar part
of your Colors, Backgrounds, & Gradients book from 2015, (maybe it's a
pre-release section of your upcoming book?).


   As a matter of fact, it is!


Do you remember if there's a formula for figuring out the color stops
to use in the gradients, or is sampling a photo of a curtain the best
way? I'd like to be able to change the color of the curtain easily in
a Sass mixin.


   I don't know if there is, to be honest.  The colors I used were 
intentionally chosen to mimic the colors in the original Cicada 
Principle example 
(), so I was 
just working off an existing thing.
   I haven't tried this myself, but my feeling is that you could 
define highlight and shadow gradients using rgba() or hsla(), 
whichever you prefer, and then put a solid background color beneath 
them, which is the thing you change.  So, something similar to this:


background-image: linear-gradient(91deg, transparent, rgba(0,0,0,0.25) 
70%, transparent),
linear-gradient(88deg, rgba(255,255,255,0.1), transparent 90%, 
rgba(255,255,255,0.05);}

background-color: maroon;
background-size: 15px 100%, 23px 100%;
background-repeat: repeat-x;

...except with three or four gradients, and almost certainly 
better-constructed gradients than those, which I basically just made 
up on the spot and didn't check to see how they looked.
   I believe gradients can be animated, but working out how to do that 
in a semi-convincing manner would be a challenge.  I'd love to see 
what you come up with!



--
Eric A. Meyer - http://meyerweb.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/
John Beales 
Friday, March 17, 2017 3:04 PMvia Postbox 


@Eric: That's exactly it. I was also able to turn up the similar part
of your Colors, Backgrounds, & Gradients book from 2015, (maybe it's a
pre-release section of your upcoming book?).

Do you remember if there's a formula for figuring out the color stops
to use in the gradients, or is sampling a photo of a curtain the best
way? I'd like to be able to change the color of the curtain easily in
a Sass mixin.

@Rainer: That last one is pretty great. I'm going to see if I can
combine the motion in it with the lack of extra HTML from Eric's
circadients. I'm not sure if it's possible, bit if it is, I'll figure
it out ;)

Thanks everyone!
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Eric A. Meyer 
Friday, March 17, 2017 2:47 PMvia Postbox 



Sent from my iPhone


You might be thinking of 
http://meyerweb.com/eric/css/tests/circadients.html (almost five years 
old now!).


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
John Beales 
Friday, March 17, 2017 1:16 PMvia Postbox 


I remember seeing some demos a couple of years back of using CSS
gradients to make a curtain/drape, but my Google skills aren't turning
up anything, so I'm hoping the list's collective memory and/or
bookmarks will help.

Does anyone here have or know of any great purely CSS curtain demos,
(as in, something that looks like a curtain or drape, not the
"curtains" design pattern where stuff slides away to reveal something
else at a lower z-index)?

Thanks,

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

[css-d] Styling Inline tag vertically

[Crest Christopher]

I'm strictly having to use inline style sheets. My goal is to reposition
the tag I'm about to mention vertically on the page.

I have a  nested within a , when I try to style the  tag I
can't reposition the contents within the tag using margins.  When I
attempt to style the the  using margins I also can't reposition
the contents within, although I don't want to style the  since
I'll be styling everything within the  as well and I strictly want
to only reposition the  tag ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Inline Anchor failing to work ?

[Crest Christopher]

Karl, yes; I ran this by another non-computer person and they were
shocked; mistakes can happen is all the reply they gave, someone
speaking whom has no experience with computers.

Karl DeSaulniers wrote:
>
> They took you off the project because of a coding error?
>
> Best,
> Karl
>
> Sent from losPhone
>
>>
>> On Feb 22, 2017, at 10:42 AM, Crest Christopher
>> <crestchristop...@gmail.com> wrote:
>>
>> Thanks for the help guys; unfortunately due to a markup error on my part
>> sent to support. The company took me off their software beta list; not
>> very forgiving then again, there support in the past has been not the
>> friendliest.
>>
>>>
>>> Tom Livingston <mailto:tom...@gmail.com>
>>> Wednesday, February 22, 2017 8:39 AM
>>> https://www.w3.org/community/webed/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding#When_margins_alone_aren.E2.80.99t_enough:_padding_properties
>>>
>>>
>>>
>>> Tom Livingston <mailto:tom...@gmail.com>
>>> Wednesday, February 22, 2017 8:37 AM
>>> Negative padding is treated like 0 or none. In padding short hand, I
>>> *think* it will negate the whole padding declaration. You could try
>>> negative margin for the side in question instead.
>>>
>>> On Wed, Feb 22, 2017 at 1:37 AM, Crest Christopher
>>>
>>>
>>>
>>> Crest Christopher <mailto:crestchristop...@gmail.com>
>>> Wednesday, February 22, 2017 1:37 AM
>>> Why can't padding be negative ?
>>>
>>> Karl DeSaulniers <mailto:k...@designdrumm.com>
>>> Wednesday, February 22, 2017 1:29 AM
>>> Hi Crest,
>>> Perhaps try...
>>>
>>> email: >> href="#" style="color:white;">some...@some-email.com
>>>
>>> I have found the ... to be better wrapped than a wrapper.
>>> Meaning, I only put text inside them. No elements.
>>>
>>> Oh and padding can not be negative. I think you were meaning margin?
>>>
>>> HTH,
>>>
>>> Best,
>>>
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.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/
>>> Crest Christopher <mailto:crestchristop...@gmail.com>
>>> Wednesday, February 22, 2017 12:58 AM
>>> I wondering why the anchor this inline style sheet is not working ?
>>> email:>> style="color:white;">#
>>>
>>> Thanks !
>>>
>>>
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- 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/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Inline Anchor failing to work ?

[Crest Christopher]

Thanks for the help guys; unfortunately due to a markup error on my part
sent to support. The company took me off their software beta list; not
very forgiving then again, there support in the past has been not the
friendliest.

> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, February 22, 2017 8:39 AM
> https://www.w3.org/community/webed/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding#When_margins_alone_aren.E2.80.99t_enough:_padding_properties
>
>
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, February 22, 2017 8:37 AM
> Negative padding is treated like 0 or none. In padding short hand, I
> *think* it will negate the whole padding declaration. You could try
> negative margin for the side in question instead.
>
> On Wed, Feb 22, 2017 at 1:37 AM, Crest Christopher
>
>
>
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Wednesday, February 22, 2017 1:37 AM
> Why can't padding be negative ?
>
> Karl DeSaulniers <mailto:k...@designdrumm.com>
> Wednesday, February 22, 2017 1:29 AM
> Hi Crest,
> Perhaps try...
>
> email:  href="#" style="color:white;">some...@some-email.com
>
> I have found the ... to be better wrapped than a wrapper.
> Meaning, I only put text inside them. No elements.
>
> Oh and padding can not be negative. I think you were meaning margin?
>
> HTH,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.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/
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Wednesday, February 22, 2017 12:58 AM
> I wondering why the anchor this inline style sheet is not working ?
> email: style="color:white;">#
>
> Thanks !
>
>

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

Re: [css-d] Inline Anchor failing to work ?

[Crest Christopher]

Why can't padding be negative ?
> Karl DeSaulniers 
> Wednesday, February 22, 2017 1:29 AM
> Hi Crest,
> Perhaps try...
>
> email:  href="#" style="color:white;">some...@some-email.com
>
> I have found the ... to be better wrapped than a wrapper.
> Meaning, I only put text inside them. No elements.
>
> Oh and padding can not be negative. I think you were meaning margin?
>
> HTH,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Inline Anchor failing to work ?

[Crest Christopher]

The email address when given a valid email address doesn't work. 

Philippe Wittenbergh wrote:
>
>>
>> On Feb 22, 2017, at 2:58 PM, Crest Christopher
>> <crestchristop...@gmail.com> wrote:
>>
>> I wondering why the anchor this inline style sheet is not working ?
>> email:> style="color:white;">#
>
>
> What is failing?  Error(s) I see: padding can’t be negative (as set on
> the ``). Maybe other things are interacting with the whole
> construct… Lacks context.
>
> 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] Inline Anchor failing to work ?

[Crest Christopher]

I wondering why the anchor this inline style sheet is not working ?
email:#

Thanks !


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

Re: [css-d] Changing the Color of points

[Crest Christopher]

I have multiple paths with the same class with a style applied to the
class = st0. I don't see a series of blue points ?

Philippe Wittenbergh wrote:
>
>>
>> On Jan 3, 2017, at 12:10 PM, Crest Christopher
>> <crestchristop...@gmail.com> wrote:
>>
>> I've taken a step away from my web development projects to finish other
>> projects and far from done so, bare with me if I forgot a thing or two
>> until the get the motor running :)
>> At this point I want to make the points visible and change the color,
>> they all have the same path class but I don't care about that, yet ;-)
>>
>> I have a SVG which is strictly only the points of the SVG file made up
>> of a series of classes; the SVG points are not visible ?
>>
>> HTML
>>
>> 
>>
>>
>>
>>
>> CSS
>> #Artwork_1_1_ .st0 {
>> color:blue;
>> }
>
>
> It is `path` with only one anchor point. How do you expect anything to
> be visible?
>
> Besides, in SVG, it is `fill` and `stroke`.
>
> 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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Changing the Color of points

[Crest Christopher]

Ah right, nothing is showing blue ?

Do you know off hand if you can change the point size ?

Tom Livingston wrote:
>
>
> On Mon, Jan 2, 2017 at 10:11 PM Crest Christopher
> <crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>> wrote:
>
> I've taken a step away from my web development projects to finish
> other
>
> projects and far from done so, bare with me if I forgot a thing or two
>
> until the get the motor running :)
>
> At this point I want to make the points visible and change the color,
>
> they all have the same path class but I don't care about that, yet ;-)
>
>
>
> I have a SVG which is strictly only the points of the SVG file made up
>
> of a series of classes; the SVG points are not visible ?
>
>
>
> HTML
>
>
>
> 
>
> 
>
> 
>
> 
>
>
>
> CSS
>
> #Artwork_1_1_ .st0 {
>
>   color:blue;
>
> }
>
>
>
>
>
>
> svg uses 'fill' and 'stroke'
>
> #Artwork_1_1_ .st0 {
>
>   fill:blue;
>
> }
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Changing the Color of points

[Crest Christopher]

I've taken a step away from my web development projects to finish other
projects and far from done so, bare with me if I forgot a thing or two
until the get the motor running :)
At this point I want to make the points visible and change the color,
they all have the same path class but I don't care about that, yet ;-)

I have a SVG which is strictly only the points of the SVG file made up
of a series of classes; the SVG points are not visible ?

HTML






CSS
#Artwork_1_1_ .st0 {
  color:blue;
}






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Responsive Grids ?

[Crest Christopher]

Anyone use Grids to create responsive sites, as in; create your design
in Photoshop with grids and columns and have that design translate into
a responsive site ?


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Calculate height from width based on screen width

[Crest Christopher]

Can you calculate what the width of a div would be then calculate the
height of the div proportionally if the div was floating to the right
with nothing on the left ?

I originally though maybe calc() could do this ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] iPad differences

[Crest Christopher]

Anyone one this list use BrowserStack ?

Tom Livingston wrote:
>
> I was speaking desktop vs desktop. I put little stock in emulators.
> Test on
> as many devices as possible and be prepared to tweak as reports of issues
> become known or to get at least a little closer to real, use browserstack
> or similar who use official simulators from the manufacturers.
>
>
>
> On Thursday, August 11, 2016, Crest Christopher
> <crestchristop...@gmail.com>
> wrote:
>
>>
>> It could be the same, remember Safari doesn't emulate based on iOS.
>>
>> Tom Livingston wrote:
>>
>>
>> It most definitely is not the same.
>>
>>
>>
>> On Thursday, August 11, 2016, Crest Christopher
>> <crestchristop...@gmail.com
>> <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');> > crestchristop...@gmail.com
>> <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>>> wrote:
>>
>> That is why I don't use Safari for testing, as I said; it's the
>> same as
>> using Chrome.
>>
>> Mi B wrote:
>> >
>> >>
>> >> aug. 11 2016 07:38 Karl DeSaulniers <k...@designdrumm.com
>> <javascript:_e(%7B%7D,'cvml','k...@designdrumm.com');>
>> <javascript:;>>:
>> >>
>> >> Chrome is built off of Gecko and Webkit anyway. Probably why you
>> >> didn't see m uch difference.
>> >> It "technically" IS Safari under the hood.
>> >
>> >
>> > No, it isn’t.
>> >
>> > "It’s here: Google replaces WebKit version ID with Blink in latest
>> > Chrome build”
>> > Apr 8, 2013
>> >
>> http://thenextweb.com/google/2013/04/08/its-here-google-
>> replaces-webkit-with-blink-in-latest-build-of-chrome/
>> <http://thenextweb.com/google/2013/04/08/its-here-google-
>> replaces-webkit-with-blink-in-latest-build-of-chrome/>
>> >
>>
>> __
>> > css-discuss [css-d@lists.css-discuss.org
>> <javascript:_e(%7B%7D,'cvml','css-d@lists.css-discuss.org');>
>> <javascript:;>]
>> > http://www.css-discuss.org/mailman/listinfo/css -d
>> <http://www.css-discuss.org/mailman/listinfo/css-d>
>> <http://www.css-discuss.org/mailman/listinfo/css-d>
>> > List wiki/FAQ -- http://css-discuss.incutio.com/
>> <http://css-discuss.incutio.com/>
>> > List policies -- http://css-discuss.org/policies.html
>> <http://css-discuss.org/policies.html>
>> > Supported by evolt.org <http://evolt.org> --
>> http://www.evolt.org/help_support_evolt/
>> <http://www.evolt.org/help_support_evolt/>
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org
>> <javascript:_e(%7B%7D,'cvml','css-d@lists.css-discuss.org');>
>> <javascript:;>]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> <http://www.css-discuss.org/mailman/listinfo/css-d>
>> List wiki/FAQ -- http://css-discuss.incutio. com/
>> <http://css-discuss.incutio.com/>
>> List policies -- http://css-discuss.org/policies.html
>> <http://css-discuss.org/policies.html>
>> Supported by evolt.org <http://evolt.org> --
>> http://www.evolt.org/help_support_evolt/
>> <http://www.evolt.org/help_support_evolt/>
>>
>>
>>
>> --
>>
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> <http://medialogic.com>
>>
>>
>> #663399
>>
>>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] iPad differences

[Crest Christopher]

Where I live and whom I know don't own many devices so that is an up
hill battle I can't climb.

Tom Livingston wrote:
>
> I was speaking desktop vs desktop. I put little stock in emulators.
> Test on
> as many devices as possible and be prepared to tweak as reports of issues
> become known or to get at least a little closer to real, use browserstack
> or similar who use official simulators from the manufacturers.
>
>
>
> On Thursday, August 11, 2016, Crest Christopher
> <crestchristop...@gmail.com>
> wrote:
>
>>
>> It could be the same, remember Safari doesn't emulate based on iOS.
>>
>> Tom Livingston wrote:
>>
>>
>> It most definitely is not the same.
>>
>>
>>
>> On Thursday, August 11, 2016, Crest Christopher
>> <crestchristop...@gmail.com
>> <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');> > crestchristop...@gmail.com
>> <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>>> wrote:
>>
>> That is why I don't use Safari for testing, as I said; it's the
>> same as
>> using Chrome.
>>
>> Mi B wrote:
>> >
>> >>
>> >> aug. 11 2016 07:38 Karl DeSaulniers <k...@designdrumm.com
>> <javascript:_e(%7B%7D,'cvml','k...@designdrumm.com');>
>> <javascript:;>>:
>> >>
>> >> Chrome is built off of Gecko and Webkit anyway. Probably why you
>> >> didn't see m uch difference.
>> >> It "technically" IS Safari under the hood.
>> >
>> >
>> > No, it isn’t.
>> >
>> > "It’s here: Google replaces WebKit version ID with Blink in latest
>> > Chrome build”
>> > Apr 8, 2013
>> >
>> http://thenextweb.com/google/2013/04/08/its-here-google-
>> replaces-webkit-with-blink-in-latest-build-of-chrome/
>> <http://thenextweb.com/google/2013/04/08/its-here-google-
>> replaces-webkit-with-blink-in-latest-build-of-chrome/>
>> >
>>
>> __
>> > css-discuss [css-d@lists.css-discuss.org
>> <javascript:_e(%7B%7D,'cvml','css-d@lists.css-discuss.org');>
>> <javascript:;>]
>> > http://www.css-discuss.org/mailman/listinfo/css -d
>> <http://www.css-discuss.org/mailman/listinfo/css-d>
>> <http://www.css-discuss.org/mailman/listinfo/css-d>
>> > List wiki/FAQ -- http://css-discuss.incutio.com/
>> <http://css-discuss.incutio.com/>
>> > List policies -- http://css-discuss.org/policies.html
>> <http://css-discuss.org/policies.html>
>> > Supported by evolt.org <http://evolt.org> --
>> http://www.evolt.org/help_support_evolt/
>> <http://www.evolt.org/help_support_evolt/>
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org
>> <javascript:_e(%7B%7D,'cvml','css-d@lists.css-discuss.org');>
>> <javascript:;>]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> <http://www.css-discuss.org/mailman/listinfo/css-d>
>> List wiki/FAQ -- http://css-discuss.incutio. com/
>> <http://css-discuss.incutio.com/>
>> List policies -- http://css-discuss.org/policies.html
>> <http://css-discuss.org/policies.html>
>> Supported by evolt.org <http://evolt.org> --
>> http://www.evolt.org/help_support_evolt/
>> <http://www.evolt.org/help_support_evolt/>
>>
>>
>>
>> --
>>
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> <http://medialogic.com>
>>
>>
>> #663399
>>
>>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] iPad differences

[Crest Christopher]

It could be the same, remember Safari doesn't emulate based on iOS.

Tom Livingston wrote:
>
> It most definitely is not the same.
>
>
>
> On Thursday, August 11, 2016, Crest Christopher
> <crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>> wrote:
>
> That is why I don't use Safari for testing, as I said; it's the
> same as
> using Chrome.
>
> Mi B wrote:
> >
> >>
> >> aug. 11 2016 07:38 Karl DeSaulniers <k...@designdrumm.com
> <javascript:;>>:
> >>
> >> Chrome is built off of Gecko and Webkit anyway. Probably why you
> >> didn't see much difference.
> >> It "technically" IS Safari under the hood.
> >
> >
> > No, it isn’t.
> >
> > "It’s here: Google replaces WebKit version ID with Blink in latest
> > Chrome build”
> > Apr 8, 2013
> >
>
> http://thenextweb.com/google/2013/04/08/its-here-google-replaces-webkit-with-blink-in-latest-build-of-chrome/
>
> <http://thenextweb.com/google/2013/04/08/its-here-google-replaces-webkit-with-blink-in-latest-build-of-chrome/>
> >
> __
> > css-discuss [css-d@lists.css-discuss.org <javascript:;>]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> <http://www.css-discuss.org/mailman/listinfo/css-d>
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> <http://css-discuss.incutio.com/>
> > List policies -- http://css-discuss.org/policies.html
> <http://css-discuss.org/policies.html>
> > Supported by evolt.org <http://evolt.org> --
> http://www.evolt.org/help_support_evolt/
> <http://www.evolt.org/help_support_evolt/>
> __
> css-discuss [css-d@lists.css-discuss.org <javascript:;>]
> http://www.css-discuss.org/mailman/listinfo/css-d
> <http://www.css-discuss.org/mailman/listinfo/css-d>
> List wiki/FAQ -- http://css-discuss.incutio.com/
> <http://css-discuss.incutio.com/>
> List policies -- http://css-discuss.org/policies.html
> <http://css-discuss.org/policies.html>
> Supported by evolt.org <http://evolt.org> --
> http://www.evolt.org/help_support_evolt/
> <http://www.evolt.org/help_support_evolt/>
>
>
>
> -- 
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> <http://medialogic.com>
>
>
> #663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] iPad differences

[Crest Christopher]

That is why I don't use Safari for testing, as I said; it's the same as
using Chrome. 

Mi B wrote:
>
>>
>> aug. 11 2016 07:38 Karl DeSaulniers :
>>
>> Chrome is built off of Gecko and Webkit anyway. Probably why you
>> didn't see much difference.
>> It "technically" IS Safari under the hood.
>
>
> No, it isn’t.
>
> "It’s here: Google replaces WebKit version ID with Blink in latest
> Chrome build”
> Apr 8, 2013
> http://thenextweb.com/google/2013/04/08/its-here-google-replaces-webkit-with-blink-in-latest-build-of-chrome/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] iPad differences

[Crest Christopher]

The last time I downloaded Safari for Windows, I didn't notice a
difference with the emulated with Retina Devices in Chrome so I removed
Safari.

Karl DeSaulniers wrote:
>
> I have an iPhone still on iOS 7.
> No iPad though.
>
> @crest - you do know you can view inspect element of any iPhone or
> iPad in safari desktop? safari also has a responsive design mode.
> Works best for iPhone and iPad emulation I have found.
>
> Best,
> Karl
>
> Sent from losPhone
>
>>
>> On Aug 10, 2016, at 6:44 PM, Crest Christopher
>> <crestchristop...@gmail.com> wrote:
>>
>> Philippe you have an actual iPad ?
>>
>> Philippe Wittenbergh wrote:
>>>
>>>>
>>>> On Aug 11, 2016, at 8:24 AM, Crest Christopher
>>>> <crestchristop...@gmail.com> wrote:
>>>>
>>>> Although
>>>> the simulator uses iOS 7.1.2 and since I know nothing of iOS, strictly
>>>> Windows but from what may be possible is newer versions of iOS may have
>>>> issues such as this fixed ?
>>>
>>>
>>> Latest iOS version is 9.3.x. Hard to say if your issue is real, a bug
>>> in an older version of iOS or something else.
>>> As always a link to the issue at hand would immensely facilitated the
>>> discussion.
>>>
>>> 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-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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/

[css-d] Element Size with border

[Crest Christopher]

I tent to work with alot of assets and hopefully someone can help me.  I
know the Web Development toolkits that come with all web browsers can
show the element width & height.  Is it possible to add a border to the
element in pixels and include that when analyzing the elements size and
position ? It would be extremely helpful when getting graphics at a
perfect size without guess work. 

Also what is speccing ?



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

Re: [css-d] iPad differences

[Crest Christopher]

Philippe you have an actual iPad ?

Philippe Wittenbergh wrote:
>
>>
>> On Aug 11, 2016, at 8:24 AM, Crest Christopher
>> <crestchristop...@gmail.com> wrote:
>>
>> Although
>> the simulator uses iOS 7.1.2 and since I know nothing of iOS, strictly
>> Windows but from what may be possible is newer versions of iOS may have
>> issues such as this fixed ?
>
>
> Latest iOS version is 9.3.x. Hard to say if your issue is real, a bug
> in an older version of iOS or something else.
> As always a link to the issue at hand would immensely facilitated the
> discussion.
>
> 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] iPad differences

[Crest Christopher]

Unfortunately I have to rely on a emulator \ simulator that will mean
that I may once the page is online encounter issues that will have to be
fixed when those issues arise on whatever device that may be.

In the mean-time, the iPad I'm testing on has a 1024x768 resolution. 
Chrome device emulation shows the element in the position I desire,
while on the simulator the element is in the wrong position.   Although
the simulator uses iOS 7.1.2 and since I know nothing of iOS, strictly
Windows but from what may be possible is newer versions of iOS may have
issues such as this fixed ?

Philippe Wittenbergh wrote:
>
>>
>> On Aug 10, 2016, at 11:37 PM, Crest Christopher
>> <crestchristop...@gmail.com> wrote:
>>
>> TheiPad & iPad mini are both the same CSS width but when previewing both
>> devices; the iPad Mini give me problems with one element. Shouldn't the
>> results be identical ?
>
>
> Are you testing with real world, physical devices? Or with some
> emulator / simulator kind of thing? The latter gives you at best an
> approximation of the real thing (assuming you use an emulation that
> uses the WebKit rendering engine).
>
> 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] iPad differences

[Crest Christopher]

You are referring to the iPad 3,4 & Air.  I meant the iPad 1,2. The iPad
Pro is the largest at 2048 width. I guess I'm going to target these
Apple devices with criteria other then device-width.

Karl DeSaulniers wrote:
>
> They are not the same resolution or size.
>
> The biggest difference between these tablets is screen density.
> The iPad mini's display is 7.9 inches diagonally, with 1024 x 768
> resolution at 163 pixels per inch.
> The iPad with Retina display packs a punch — 9.7 inches, with 2048 x
> 1536 resolution at 264 pixels per inch.
>
> HTH,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
>>
>> On Aug 10, 2016, at 9:37 AM, Crest Christopher
>> <crestchristop...@gmail.com> wrote:
>>
>> TheiPad & iPad mini are both the same CSS width but when previewing both
>> devices; the iPad Mini give me problems with one element. Shouldn't the
>> results be identical ?
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- 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/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] iPad differences

[Crest Christopher]

TheiPad & iPad mini are both the same CSS width but when previewing both
devices; the iPad Mini give me problems with one element. Shouldn't the
results be identical ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] OT: align img tag with inline css

[Crest Christopher]

  




I assume the first image has a inline css of display:inline-block as such;





Correct ?



> Philip Taylor <mailto:p.tay...@rhul.ac.uk>
> Saturday, August 06, 2016 10:21 AM
>
> Crest Christopher wrote:
>> What is the inline css rule I would use so I have the second img tag
>> align horizontally with the first img tag ? I tried display:block for
>> the second img tag unfortunately the second image wouldn't align with
>> the first image ?
>>
>> 
>>
>> 
>>
>> > 
>> src="/servlet/JiveServlet/downloadImage/998019/selectpathspath3dissue.png"
>> style="width: 620px; height: 574px;" />
>>
>> > src="/servlet/JiveServlet/downloadImage/998020/path3dissue.png"
>> style="width: 620px; height: 572px; display: inline;" />
>>
>> 
>>
>> 
>
> Jan von Hausen wrote:
>> Images are inline elements, so they have properties like line-height (!,
>> which could give images extra space below!). I believe
>> display:inline-block; should work here. (Hope I’m following the rules;
>> never answered a question before.)
>>
>> Jan von Hausen
>
> Crest Christopher wrote:
>> The original question didn't get quoted ?
>
> Philip Taylor wrote:
>> Clearly not; whether or not to quote a message to which one is replying is 
>> at the discretion of the person sending the reply.  Eric, in his ground 
>> rules for this list [1], advocates heavy pruning.  Jan has pruned 
>> completely, which the ground rules do not state is unacceptable.  As Eric 
>> notes, "list members can look at the message to which [the respondent] 
>> responded, or check the archive".
>>
>> [1] http://www.css-discuss.org/policies.html
>
> Crest Christopher wrote:
>> I wanted to reply based on the original message !
>
> You can.  Just as I have.  If you do not like the fact that someone
> who is trying to help you has not quoted your original message, you
> are free to re-insert the original message in your reply.  But none of
> this discussion has anything to do with CSS.
>
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Saturday, August 06, 2016 8:06 AM
> I wanted to reply based on the original message !
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> Philip Taylor <mailto:p.tay...@rhul.ac.uk>
> Saturday, August 06, 2016 7:46 AM
> Clearly not; whether or not to quote a message to which one is
> replying is at the discretion of the person sending the reply. Eric,
> in his ground rules for this list [1], advocates heavy pruning. Jan
> has pruned completely, which the ground rules do not state is
> unacceptable. As Eric notes, "list members can look at the message to
> which [the respondent] responded, or check the archive".
>
> [1] http://www.css-discuss.org/policies.html
> 
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Friday, August 05, 2016 10:56 PM
> The original question didn't get quoted ?
>
>
> Jan von Hausen <mailto:j...@polite-websites.com>
> Friday, August 05, 2016 10:07 PM
> Images are inline elements, so they have properties like line-height (!,
> which could give images extra space below!). I believe
> display:inline-block; should work here. (Hope I’m following the rules;
> never answered a question before.)
>
> Jan von Hausen
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] OT: align img tag with inline css

[Crest Christopher]

I wanted to reply based on the original message !

Philip Taylor wrote:
>
> Clearly not; whether or not to quote a message to which one is
> replying is at the discretion of the person sending the reply.  Eric,
> in his ground rules for this list [1], advocates heavy pruning.  Jan
> has pruned completely, which the ground rules do not state is
> unacceptable.  As Eric notes, "list members can look at the message to
> which [the respondent] responded, or check the archive".
>
> [1] http://www.css-discuss.org/policies.html
> 
> Crest Christopher asked :
>>
>> The original question didn't get quoted ?
>
> -- 
>
> Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] align img tag with inline css

[Crest Christopher]

The original question didn't get quoted ?

> Jan von Hausen 
> Friday, August 05, 2016 10:07 PM
> Images are inline elements, so they have properties like line-height (!,
> which could give images extra space below!). I believe
> display:inline-block; should work here. (Hope I’m following the rules;
> never answered a question before.)
>
> Jan von Hausen
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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/

[css-d] align img tag with inline css

[Crest Christopher]

What is the inline css rule I would use so I have the second img tag
align horizontally with the first img tag ? I tried display:block for
the second img tag unfortunately the second image wouldn't align with
the first image ?













__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] [Anyone] on List with Google Nexus 7 Device ?

[Crest Christopher]

Anyone on the list with a Google Nexus 7 running Android 5.0.2 at I
assume the device by default runs at 1200x1920 ? The online device
tester I'm skeptical is showing me the correct image for an element.


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

Re: [css-d] Background images for element within MQ ?

[Crest Christopher]

Yes, knowing that SaSS is the solution ;-)

Tom Livingston wrote:
>
> On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell 
> wrote:
>
>>
>> If I understand you correctly, no.
>>
>> You can do:
>> body {
>>   background-image: url('my300pximage.jpg');
>> }
>> @media and (min-width: 700px) {
>>   body {
>> background-image: url('my700pximage.jpg');
>>   }
>> }
>>
>
>
>
> This accomplishes what you were describing.
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Dev Toolbar debugging hiccup

[Crest Christopher]

FireFox Dev tools was the solution ;-)

Gautam Sathe wrote:
>
> Hard to say without knowing what else might be going on for you.
>
> I just checked on my system, I am able to view up to 1680px width
> without facing any issues.
>
> #1. The most obvious question - is your system actually high res
> enough to view a 12xx pixel screen?
>
> #2. Have you put the chrome dev tools in mobile emulation mode? That
> restricts the size to whatever device you might be emulating.
>
> If you have already considered these points then a screenshot of
> what's happening might help.
>
> Gautam
>
> On Friday 05 August 2016 09:38 AM, Crest Christopher wrote:
>>
>> I need to view a page at 12XX+ pixels but when I enabled Chrome Web Dev
>> Toolbar it shrinks the page to a smaller break point.  When I tear off
>> the web developer toolbar it doesn't make a difference; any
>> suggestions ?
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- 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/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images for element within MQ ?

[Crest Christopher]

I knew probably SaSS could do it although I don't use SaSS atleast I was
right ;-)

Chris Rockwell wrote:
>
> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> With sass you can do this:
> body {
>   background-image: url('my300pximage.jpg');
>   @media and (min-width: 700px) {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher
> <crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>> wrote:
>
> Is it possible to do conditions within a rule for an element;
> similar to
> MQ.  For example, you may have a break point that if the screen is
> 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org
> <mailto:css-d@lists.css-discuss.org>]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org <http://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/

[css-d] Background images for element within MQ ?

[Crest Christopher]

Is it possible to do conditions within a rule for an element; similar to
MQ.  For example, you may have a break point that if the screen is 300px
and 700px then a background image of 300px width or close will be
displayed, otherwise a background image of a 700px width will be
displayed ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Web Dev Toolbar debugging hiccup

[Crest Christopher]

I need to view a page at 12XX+ pixels but when I enabled Chrome Web Dev
Toolbar it shrinks the page to a smaller break point.  When I tear off
the web developer toolbar it doesn't make a difference; any suggestions ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Freestyle measurement for Chrome [Off-Topic List Question]

[Crest Christopher]

Found it, thanks ;-)

Chris Rockwell wrote:
>
> The Web developer toolbar from Chris Pedrick (sp?) does that and much
> more.
>
>
> On Mon, Aug 1, 2016, 12:01 AM Crest Christopher
> <crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>> wrote:
>
> Anyone aware of a simple tool for Chrome which allows me to draw a
> freestyle rectangle and get the dimensions displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org
> <mailto:css-d@lists.css-discuss.org>]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org <http://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/

[css-d] Freestyle measurement for Chrome [Off-Topic List Question]

[Crest Christopher]

Anyone aware of a simple tool for Chrome which allows me to draw a
freestyle rectangle and get the dimensions displayed ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Overwrite one break point earlier break point ?

[Crest Christopher]

I understand what you mean but there doesn't appear, by looking at the
list of MQ that I have much option that are compatible with all browsers ?
Tom Livingston wrote:
>
> Breakpoints are not themselves overwritten by each other. They are
> parameters. The rules inside breakpoints can override previous rules, or
> can be in effect at all widths. If you don't override a base rule, it will
> remain in effect. If you override it in a subsequent rule, that rule is in
> effect - until you override that rule.
>
> On Friday, July 29, 2016, Crest Christopher <crestchristop...@gmail.com>
> wrote:
>
>>
>> Is it safe to assume if I want a break point which is last in the
>> cascade to be overwrote by a break point earlier in the cascade, I need
>> to use LASS or SASS; and that there is no way to do this with regular
>> CSS ?
>> __
>> css-discuss [css-d@lists.css-discuss.org <javascript:;>]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- 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] Cascade Image override ?

[Crest Christopher]

The beginning of the style sheet;

position:relative;
   
background-image:url("l2b_innertop.png"),url("l2b_innerfooter.jpg"),url("background-paper.jpg");

Further down the cascade within a break point
position:relative;
background-image:none,none,url("images/bg_paper.Hi.jpg");
background-repeat:no-repeat,no-repeat,repeat;

At present regardless what break point, background-paper.jpg is always
being used and as you can see it should get overwritten by
bg_paper.Hi.jpg when the break point changes, min-width is larger;
considering the beginning rule for the element for the background-paper
has the background image at the third position, I placed the paper image
for the break-point at the third position as well, with no success ?



> Karl DeSaulniers <mailto:k...@designdrumm.com>
> Thursday, July 28, 2016 1:18 AM
> Have you checked inspect element to see how the browser is handling it?
> That is the first place I would check and test.
>
> Also, are you sure you're clearing the cache on you browser before
> viewing edits?
> I have had this cause issues on edits before. The edits were there,
> but I saw a cache file.
> So I thought the edits didn't work.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.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/
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Wednesday, July 27, 2016 3:31 PM
> Correct me if I'm wrong but shouldn't a rule further down the
> cascading over ride any previous rules before ?
>
> 1st.
> #inner {
> position:relative;
>
> background-image:url("/wdp/wip/images/l2b_innertop.png"),url("/wdp/wip/images/l2b_innerfooter.jpg"),url("/wdp/wip/background-paper.jpg");
> background-repeat:no-repeat,no-repeat,repeat;
> padding-bottom:10%,padding-bottom:0;
> background-size:100%;
> background-position:top,bottom
> }
>
> 2nd (Or further down in the cascade) This rule override the previous
> rule for the same element ? My paths are setup correctly, the image is
> on the server but doesn't load ?
> #inner {
> background-image:url("/wdp/wip/images/bg_paper.Hi.jpg");
> background-repeat:repeat;
> }

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

Re: [css-d] Cascade Image override ?

[Crest Christopher]

I don't see how the method I'm using shouldn't work.

> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 27, 2016 4:02 PM
> On Wed, Jul 27, 2016 at 3:31 PM, Crest Christopher <
>
>
> I just used this in a test:
>
> @media screen and (min-width: 480px){
> .test{
> position: relative;
> background-image: url("img/img1.jpg"), url("img/img2.jpg"),
> url("img/img3.png");
> background-repeat: no-repeat;
> background-position: 0 0, 500px 0, 1000px 0;
> height: 500px;
> width: 5000px;
> }
> }
> @media screen and (min-width: 900px){
> .test{
> background-image: none, url("img/img4.jpg"), none;
>
> }
> }
>
> and what I expected to happen happened, which was that the 3 images were
> replaced with the single 4th image and positioned at img2's position, at
> 900px wide. I think you need to make sure you are accounting for the
> attributes of all three initial images when you override them.
>
> HTH
>
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Wednesday, July 27, 2016 3:31 PM
> Correct me if I'm wrong but shouldn't a rule further down the
> cascading over ride any previous rules before ?
>
> 1st.
> #inner {
> position:relative;
>
> background-image:url("/wdp/wip/images/l2b_innertop.png"),url("/wdp/wip/images/l2b_innerfooter.jpg"),url("/wdp/wip/background-paper.jpg");
> background-repeat:no-repeat,no-repeat,repeat;
> padding-bottom:10%,padding-bottom:0;
> background-size:100%;
> background-position:top,bottom
> }
>
> 2nd (Or further down in the cascade) This rule override the previous
> rule for the same element ? My paths are setup correctly, the image is
> on the server but doesn't load ?
> #inner {
> background-image:url("/wdp/wip/images/bg_paper.Hi.jpg");
> background-repeat:repeat;
> }

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

Re: [css-d] Cascade Image override ?

[Crest Christopher]

Tom Livingston wrote:
>
> On Wed, Jul 27, 2016 at 3:31 PM, Crest Christopher <
> crestchristop...@gmail.com> wrote:
>
>>
>> Correct me if I'm wrong but shouldn't a rule further down the cascading
>> over ride any previous rules before ?
>>
>> 1st.
>> #inner {
>> position:relative;
>>
>>
>> background-image:url("/wdp/wip/images/l2b_innertop.png"),url("/wdp/wip/images/l2b_innerfooter.jpg"),url("/wdp/wip/background-paper.jpg");
>> background-repeat:no-repeat,no-repeat,repeat;
>> padding-bottom:10%,padding-bottom:0;
>> background-size:100%;
>> background-position:top,bottom
>> }
>>
>> 2nd (Or further down in the cascade) This rule override the previous
>> rule for the same element ? My paths are setup correctly, the image is
>> on the server but doesn't load ?
>> #inner {
>> background-image:url("/wdp/wip/images/bg_paper.Hi.jpg");
>> background-repeat:repeat;
>> }
>>
>
>
>
> I just used this in a test:
>
> @media screen and (min-width: 480px){
> .test{
> position: relative;
> background-image: url("img/img1.jpg"), url("img/img2.jpg"),
> url("img/img3.png");
> background-repeat: no-repeat;
> background-position: 0 0, 500px 0, 1000px 0;
> height: 500px;
> width: 5000px;
> }
> }
> @media screen and (min-width: 900px){
> .test{
> background-image: none, url("img/img4.jpg"), none;


You are replacing img3 which is the third background image in the
sequence with img4 which is the second background image in the sequence;
I attempted whereas, in sequence the first rule for the element has the
background image to which I want to replace by cascade is third;
background1,background2,background3.

Cascading down to the same rule except in a different break point in
sequence;
none,none,background-replace-image

Sounds logical keeping with order of sequence for the background property.
>
>
> }
> }
>
> and what I expected to happen happened, which was that the 3 images were
> replaced with the single 4th image and positioned at img2's position, at
> 900px wide. I think you need to make sure you are accounting for the
> attributes of all three initial images when you override them.
>
> HTH
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Cascade Image override ?

[Crest Christopher]

Correct me if I'm wrong but shouldn't a rule further down the cascading
over ride any previous rules before ?

1st.
#inner {
position:relative;
   
background-image:url("/wdp/wip/images/l2b_innertop.png"),url("/wdp/wip/images/l2b_innerfooter.jpg"),url("/wdp/wip/background-paper.jpg");
background-repeat:no-repeat,no-repeat,repeat;
padding-bottom:10%,padding-bottom:0;
background-size:100%;
background-position:top,bottom
}

2nd (Or further down in the cascade) This rule override the previous
rule for the same element ? My paths are setup correctly, the image is
on the server but doesn't load ?
#inner {
background-image:url("/wdp/wip/images/bg_paper.Hi.jpg");
background-repeat:repeat;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

> Crest Christopher <mailto:crestchristop...@gmail.com>
> Thursday, July 14, 2016 10:23 AM
> Following the jQuery method, I assume I can keep the  tag ?
>
> The SVG loads via the  tag, then though the help of the
> script, I stylize the classes within the SVG as such
>
> |#word.pavement .ab {
>  fill:red;
>  rotate(12deg);
> }
> |
> The class .ab is within the SVG file ?
>
>
> Rick Gordon <mailto:li...@rickgordon.com>
> Thursday, July 14, 2016 12:20 AM
> The link that I posted earlier,
> http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css,
> suggests inlining the SVG. Is that a possibility?
>
> Here's a direct link to what was pointed to:
>
> https://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg
>
> Rick Gordon
>
> -
>
>
> ___
> RICK GORDON
> EMERALD VALLEY GRAPHICS AND CONSULTING
> ___
> WWW: http://www.shelterpub.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/
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Wednesday, July 13, 2016 11:01 PM
> Here is an example pen <http://codepen.io/Sheep/pen/QEaLrV>; the SVG
> is being loaded externally, absolute path in this case.  There are
> classes for each path within the SVG, I want to stylize the classes
> individually within the SVG, not just fill the classes with a path. 
>
> Many of you have posted some good links, even if I've read them, none
> appear from my understanding to stylize classes from outside the SVG;
> I hopefully want to keep SVG separate from CSS, not intermix the two
> together within the SVG file.
>
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:55 PM
> Updated again. Sorry. My mistake. Just the class is working.
> (I had left the style embedded inside the svg, so using "circle.st0" was
> just more specific.)
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:50 PM
> Updated to style the circles as well. Have to specify "circle.st0" for
> this
> to work in chrome. Just the class didn't seem to work.
>
>
>

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

Following the jQuery method, I assume I can keep the  tag ?

The SVG loads via the  tag, then though the help of the
script, I stylize the classes within the SVG as such

|#word.pavement .ab {
 fill:red;
 rotate(12deg);
}
|
The class .ab is within the SVG file ?

> Rick Gordon <mailto:li...@rickgordon.com>
> Thursday, July 14, 2016 12:20 AM
> The link that I posted earlier,
> http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css,
> suggests inlining the SVG. Is that a possibility?
>
> Here's a direct link to what was pointed to:
>
> https://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg
>
> Rick Gordon
>
> -
>
>
> ___
> RICK GORDON
> EMERALD VALLEY GRAPHICS AND CONSULTING
> ___
> WWW: http://www.shelterpub.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/
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Wednesday, July 13, 2016 11:01 PM
> Here is an example pen <http://codepen.io/Sheep/pen/QEaLrV>; the SVG
> is being loaded externally, absolute path in this case.  There are
> classes for each path within the SVG, I want to stylize the classes
> individually within the SVG, not just fill the classes with a path. 
>
> Many of you have posted some good links, even if I've read them, none
> appear from my understanding to stylize classes from outside the SVG;
> I hopefully want to keep SVG separate from CSS, not intermix the two
> together within the SVG file.
>
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:55 PM
> Updated again. Sorry. My mistake. Just the class is working.
> (I had left the style embedded inside the svg, so using "circle.st0" was
> just more specific.)
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:50 PM
> Updated to style the circles as well. Have to specify "circle.st0" for
> this
> to work in chrome. Just the class didn't seem to work.
>
>
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:34 PM
> It's pretty easy. Blue is done with css in the head.
>
> http://tomliv.com/svg/
>
>

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

> So to answer your question, can you style a SVGs children via the
> parent documents css that are linked and not embedded, the answer is no.
You can, you answered your own question, what I already found out.
> I think the reason jQuery can do it is because jQuery accesses the
> inline  tag after its been loaded into the DOM.


> Karl DeSaulniers 
> Thursday, July 14, 2016 1:23 AM
> I think the reason jQuery can do it is because jQuery accesses the
> inline  tag after its been loaded into the DOM.
>
> So to answer your question, can you style a SVGs children via the
> parent documents css that are linked and not embedded, the answer is no.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.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/
> Karl DeSaulniers 
> Thursday, July 14, 2016 1:20 AM
> Also, you will need to include the "embed tag" like you do with a
> flash file for it to work on all systems I believe.
> So one suggestion I have is to put your SVG inline code in their own
> separate html and inject them at runtime into your object and embed
> tags with PHP or the like.
> IF you really want to control them with the parent css.
>
> The easiest way seems to be to use the style tag inside the SVG.
> I am not sure how to access that when creating your SVG. Hadn't gone
> that far.
>
> GL!
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.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/
> Karl DeSaulniers 
> Thursday, July 14, 2016 1:13 AM
> Crest,
> Your main css would only have an effect on the content of the SVG if
> the SVG file is included inline in the HTML.
> If you want to keep your SVG in files, the CSS needs to be defined
> inside of the SVG file.
> You can do it with a style tag that is inside the SVG.
>
>
> Otherwise you have to put the code for the svg inside the object tag
> if you want control of styling it via the parent css.
>
> IE:
>
> 
>
> http://www.w3.org/2000/svg; id="Layer_1" data-name="Layer
> 1" viewBox="0 0 600.65 19.96">
> 
>
> 

Re: [css-d] Style Object tag svg

[Crest Christopher]

I did get your link a few posts back. I suppose jQuery is the only
solution, otherwise vanilla css and svg segregated is not possible.

Thanks Rick.

> Rick Gordon <mailto:li...@rickgordon.com>
> Thursday, July 14, 2016 12:20 AM
> The link that I posted earlier,
> http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css,
> suggests inlining the SVG. Is that a possibility?
>
> Here's a direct link to what was pointed to:
>
> https://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg
>
> Rick Gordon
>
> -
>
>
> ___
> RICK GORDON
> EMERALD VALLEY GRAPHICS AND CONSULTING
> ___
> WWW: http://www.shelterpub.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/
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Wednesday, July 13, 2016 11:01 PM
> Here is an example pen <http://codepen.io/Sheep/pen/QEaLrV>; the SVG
> is being loaded externally, absolute path in this case.  There are
> classes for each path within the SVG, I want to stylize the classes
> individually within the SVG, not just fill the classes with a path. 
>
> Many of you have posted some good links, even if I've read them, none
> appear from my understanding to stylize classes from outside the SVG;
> I hopefully want to keep SVG separate from CSS, not intermix the two
> together within the SVG file.
>
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:55 PM
> Updated again. Sorry. My mistake. Just the class is working.
> (I had left the style embedded inside the svg, so using "circle.st0" was
> just more specific.)
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:50 PM
> Updated to style the circles as well. Have to specify "circle.st0" for
> this
> to work in chrome. Just the class didn't seem to work.
>
>
>
> Tom Livingston <mailto:tom...@gmail.com>
> Wednesday, July 13, 2016 4:34 PM
> It's pretty easy. Blue is done with css in the head.
>
> http://tomliv.com/svg/
>
>

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

Here is an example pen <http://codepen.io/Sheep/pen/QEaLrV>; the SVG is 
being loaded externally, absolute path in this case.  There are classes 
for each path within the SVG, I want to stylize the classes individually 
within the SVG, not just fill the classes with a path.


Many of you have posted some good links, even if I've read them, none 
appear from my understanding to stylize classes from outside the SVG; I 
hopefully want to keep SVG separate from CSS, not intermix the two 
together within the SVG file.



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:55 PM
Updated again. Sorry. My mistake. Just the class is working.
(I had left the style embedded inside the svg, so using "circle.st0" was
just more specific.)

Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:50 PM
Updated to style the circles as well. Have to specify "circle.st0" for 
this

to work in chrome. Just the class didn't seem to work.



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:34 PM
It's pretty easy. Blue is done with css in the head.

http://tomliv.com/svg/


Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:18 PM

As opposed to adding an svg using 



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:17 PM
On Wed, Jul 13, 2016 at 3:10 PM, Crest Christopher <

He's loading an svg by putting the svg code in the html and providing a
method of falling back to a png. He is styling the svg with css.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

Anyone know if CodePen can display absolute SVG files, I'm getting a 
parsing error ?



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:55 PM
Updated again. Sorry. My mistake. Just the class is working.
(I had left the style embedded inside the svg, so using "circle.st0" was
just more specific.)

Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:50 PM
Updated to style the circles as well. Have to specify "circle.st0" for 
this

to work in chrome. Just the class didn't seem to work.



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:34 PM
It's pretty easy. Blue is done with css in the head.

http://tomliv.com/svg/


Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:18 PM

As opposed to adding an svg using 



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:17 PM
On Wed, Jul 13, 2016 at 3:10 PM, Crest Christopher <

He's loading an svg by putting the svg code in the html and providing a
method of falling back to a png. He is styling the svg with css.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

It requires the SVG to be embedded into the markup; I suppose id> is my only solution.  I have SVG with too many paths that will add 
too much overhead to the markup.



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:55 PM
Updated again. Sorry. My mistake. Just the class is working.
(I had left the style embedded inside the svg, so using "circle.st0" was
just more specific.)

Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:50 PM
Updated to style the circles as well. Have to specify "circle.st0" for 
this

to work in chrome. Just the class didn't seem to work.



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:34 PM
It's pretty easy. Blue is done with css in the head.

http://tomliv.com/svg/


Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:18 PM

As opposed to adding an svg using 



Tom Livingston <mailto:tom...@gmail.com>
Wednesday, July 13, 2016 4:17 PM
On Wed, Jul 13, 2016 at 3:10 PM, Crest Christopher <

He's loading an svg by putting the svg code in the html and providing a
method of falling back to a png. He is styling the svg with css.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

I have a question regarding this 
<http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website> 
method; there is no SVG being loaded, is it loading in the background 
and simply being stylizing by a style sheet ?



Tom Livingston <mailto:tom...@gmail.com>
Tuesday, July 12, 2016 11:49 PM
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS



On Tuesday, July 12, 2016, Crest Christopher <crestchristop...@gmail.com>


Crest Christopher <mailto:crestchristop...@gmail.com>
Tuesday, July 12, 2016 10:57 PM
I only said, it was a post to make it easier to find I understand it 
meant; likes.


you can only set the properties for the entire symbol with this
method. So, if you have two paths in your symbol and want them to
have different fill colors, this won't work, but if you want all
your paths to be the same, this should work

That is the problem, I cannot independently stylize different paths in 
the SVG file.

Chris Williams <mailto:ch...@clwill.com>
Tuesday, July 12, 2016 2:49 PM
1) That's not "post 16" that's a reply with 16 (now 17) likes.
2) Is explicitly says in the example: 



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Tuesday, July 12, 2016 10:30 AM
Look at, post 16 on stack overflow ?

The example SVG file doesn't have a class called fill-red or 
fill-blue, how is it being stylized ?



Rick Gordon <mailto:li...@rickgordon.com>
Monday, July 11, 2016 8:32 PM
Is this any help?

http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css 



-


___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.co
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, July 09, 2016 11:24 PM
I've been searching on how I can style SVG files embedded in a 
 tag, including CSS animation.


Can someone point me in the direction, how I can stylize a SVG object 
contained in a  tag though CSS; otherwise it appears jQuery 
is the only direction.


Chris Williams <mailto:ch...@clwill.com>
Tuesday, July 12, 2016 2:49 PM
1) That's not "post 16" that's a reply with 16 (now 17) likes.
2) Is explicitly says in the example: 



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Tuesday, July 12, 2016 10:30 AM
Look at, post 16 on stack overflow ?

The example SVG file doesn't have a class called fill-red or 
fill-blue, how is it being stylized ?



Rick Gordon <mailto:li...@rickgordon.com>
Monday, July 11, 2016 8:32 PM
Is this any help?

http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css 



-


___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.co
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 Object tag svg

[Crest Christopher]

I only said, it was a post to make it easier to find I understand it 
meant; likes.


   you can only set the properties for the entire symbol with this
   method. So, if you have two paths in your symbol and want them to
   have different fill colors, this won't work, but if you want all
   your paths to be the same, this should work

That is the problem, I cannot independently stylize different paths in 
the SVG file.

Chris Williams <mailto:ch...@clwill.com>
Tuesday, July 12, 2016 2:49 PM
1) That's not "post 16" that's a reply with 16 (now 17) likes.
2) Is explicitly says in the example: 



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Tuesday, July 12, 2016 10:30 AM
Look at, post 16 on stack overflow ?

The example SVG file doesn't have a class called fill-red or 
fill-blue, how is it being stylized ?



Rick Gordon <mailto:li...@rickgordon.com>
Monday, July 11, 2016 8:32 PM
Is this any help?

http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css 



-


___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.co
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, July 09, 2016 11:24 PM
I've been searching on how I can style SVG files embedded in a 
 tag, including CSS animation.


Can someone point me in the direction, how I can stylize a SVG object 
contained in a  tag though CSS; otherwise it appears jQuery is 
the only direction.


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

Look at, post 16 on stack overflow ?

The example SVG file doesn't have a class called fill-red or fill-blue, 
how is it being stylized ?



Rick Gordon <mailto:li...@rickgordon.com>
Monday, July 11, 2016 8:32 PM
Is this any help?

http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css 



-


___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.co
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, July 09, 2016 11:24 PM
I've been searching on how I can style SVG files embedded in a 
 tag, including CSS animation.


Can someone point me in the direction, how I can stylize a SVG object 
contained in a  tag though CSS; otherwise it appears jQuery is 
the only direction.


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

A condition, what if I don't want to use  strictly just 
style the SVG; it should work ?



Tom Livingston <mailto:tom...@gmail.com>
Monday, July 11, 2016 9:31 PM
On Mon, Jul 11, 2016 at 9:26 PM, Crest Christopher<
crestchristop...@gmail.com>  wrote:


It looks promising until put into use, without using foreignObject as it's
a condition; rather strictly using  then targeting the SVG by
simply

SVG {
color: red /* or */
border: solid 4px red;
}

Nothing happens ?



Might wanna read that stuff again. "foreignObject" was just a way to add a
fallback.





Tom Livingston<tom...@gmail.com>
Monday, July 11, 2016 8:57 PM
Can't the svg code be put on the page without the use of?

I came across this:

http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website

and it mentions putting the svg code inline and that this is how you can
target it with css...
"The first important thing to note is the SVG is inline. If the SVG is not
inline then you can not target it with CSS."
that seems more straight forward and logical to me.


On Mon, Jul 11, 2016 at 7:35 PM, Crest Christopher<


Crest Christopher<crestchristop...@gmail.com>
Monday, July 11, 2016 7:35 PM
.class #svg-object body  ?


Karl DeSaulniers<k...@designdrumm.com>
Sunday, July 10, 2016 10:58 PM
if your talking about styling the contents of the object tag, you would
have include the body tag of the object tag kind of like an iframe.

.styleclass #svgobj body .childelementclass #childelement

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher<crestchristop...@gmail.com>
Sunday, July 10, 2016 10:52 PM
You could stylize the classes within the SVG individually as well ?


Karl DeSaulniers<k...@designdrumm.com>
Sunday, July 10, 2016 10:50 PM
Crest,
I was successful at styling your svg (that isn't loading btw).

Firstly, Your using display inline on everything. When you use
display:inline, width and height do not get computed correctly.
so your object is collapsing to 0px. change to inline-block

Secondly, you have visibility: hidden on the container element. You wont
see any styling if this is set.

I am not going to share my code since you said you wanted to do this
yourself,
but I can tell you for certain your svg object can be styled.

GL!

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/






Tom Livingston <mailto:tom...@gmail.com>
Monday, July 11, 2016 8:57 PM
Can't the svg code be put on the page without the use of ?

I came across this:
http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website

and it mentions putting the svg code inline and that this is how you can
target it with css...
"The first important thing to note is the SVG is inline. If the SVG is not
inline then you can not target it with CSS."
that seems more straight forward and logical to me.


On Mon, Jul 11, 2016 at 7:35 PM, Crest Christopher <


Crest Christopher <mailto:crestchristop...@gmail.com>
Monday, July 11, 2016 7:35 PM
.class #svg-object body  ?


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:58 PM
if your talking about styling the contents of the object tag, you 
would have include the body tag of the object tag kind of like an iframe.


.styleclass #svgobj body .childelementclass #childelement

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 10:52 PM
You could stylize the classes within the SVG individually as well ?




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

It looks promising until put into use, without using foreignObject as 
it's a condition; rather strictly using  then targeting the SVG 
by simply


|SVG {
color: red /* or */
border: solid 4px red;
} |

Nothing happens ?


Tom Livingston <mailto:tom...@gmail.com>
Monday, July 11, 2016 8:57 PM
Can't the svg code be put on the page without the use of ?

I came across this:
http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website

and it mentions putting the svg code inline and that this is how you can
target it with css...
"The first important thing to note is the SVG is inline. If the SVG is not
inline then you can not target it with CSS."
that seems more straight forward and logical to me.


On Mon, Jul 11, 2016 at 7:35 PM, Crest Christopher <


Crest Christopher <mailto:crestchristop...@gmail.com>
Monday, July 11, 2016 7:35 PM
.class #svg-object body  ?


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:58 PM
if your talking about styling the contents of the object tag, you 
would have include the body tag of the object tag kind of like an iframe.


.styleclass #svgobj body .childelementclass #childelement

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 10:52 PM
You could stylize the classes within the SVG individually as well ?


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:50 PM
Crest,
I was successful at styling your svg (that isn't loading btw).

Firstly, Your using display inline on everything. When you use 
display:inline, width and height do not get computed correctly.

so your object is collapsing to 0px. change to inline-block

Secondly, you have visibility: hidden on the container element. You 
wont see any styling if this is set.


I am not going to share my code since you said you wanted to do this 
yourself,

but I can tell you for certain your svg object can be styled.

GL!

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

.class #svg-object body  ?


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:58 PM
if your talking about styling the contents of the object tag, you 
would have include the body tag of the object tag kind of like an iframe.


.styleclass #svgobj body .childelementclass #childelement

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 10:52 PM
You could stylize the classes within the SVG individually as well ?


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:50 PM
Crest,
I was successful at styling your svg (that isn't loading btw).

Firstly, Your using display inline on everything. When you use 
display:inline, width and height do not get computed correctly.

so your object is collapsing to 0px. change to inline-block

Secondly, you have visibility: hidden on the container element. You 
wont see any styling if this is set.


I am not going to share my code since you said you wanted to do this 
yourself,

but I can tell you for certain your svg object can be styled.

GL!

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Chris Williams <mailto:ch...@clwill.com>
Sunday, July 10, 2016 2:35 PM
It's not clear to me exactly what the question is.

Can you style SVG inside divs on a page? Yes, I've done it frequently.

How? Simple, and like every other CSS case: use a debugger (Chrome, 
FF, IE) and look at the object structure, figure out the hierarchy you 
want/need and go for it.


Do I have to use jQuery? No. If you want to get fancy, you might have 
to use JavaScript, but that doesn't mean you have to use jQuery (and 
all it's weight). The JS isn't that complex.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 11:06 AM
Any more suggestions, it's pretty common question but I want to do it, 
hopefully, with strictly CSS; every site I find related to the subject 
either explains a jQuery solution or it's clear, or not clear at all 
on a solution, as I'll be using this, if I can find, solution quite often.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

What container are you referring too ?


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:50 PM
Crest,
I was successful at styling your svg (that isn't loading btw).

Firstly, Your using display inline on everything. When you use 
display:inline, width and height do not get computed correctly.

so your object is collapsing to 0px. change to inline-block

Secondly, you have visibility: hidden on the container element. You 
wont see any styling if this is set.


I am not going to share my code since you said you wanted to do this 
yourself,

but I can tell you for certain your svg object can be styled.

GL!

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Chris Williams <mailto:ch...@clwill.com>
Sunday, July 10, 2016 2:35 PM
It's not clear to me exactly what the question is.

Can you style SVG inside divs on a page? Yes, I've done it frequently.

How? Simple, and like every other CSS case: use a debugger (Chrome, 
FF, IE) and look at the object structure, figure out the hierarchy you 
want/need and go for it.


Do I have to use jQuery? No. If you want to get fancy, you might have 
to use JavaScript, but that doesn't mean you have to use jQuery (and 
all it's weight). The JS isn't that complex.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 11:06 AM
Any more suggestions, it's pretty common question but I want to do it, 
hopefully, with strictly CSS; every site I find related to the subject 
either explains a jQuery solution or it's clear, or not clear at all 
on a solution, as I'll be using this, if I can find, solution quite often.



Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:55 AM
I think a link to a live example would be best here.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 10:51 AM
Tom, I read the second page you linked too as well.

I tried, considering the ID is within a class; .className #svg-object: 
12px solid red. There is no red border around my SVG object.  Even if 
it worked, I want to access the path classes or id within the SVG and 
style outside of the SVG file.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

I'm going to test, now I can.


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:50 PM
Crest,
I was successful at styling your svg (that isn't loading btw).

Firstly, Your using display inline on everything. When you use 
display:inline, width and height do not get computed correctly.

so your object is collapsing to 0px. change to inline-block

Secondly, you have visibility: hidden on the container element. You 
wont see any styling if this is set.


I am not going to share my code since you said you wanted to do this 
yourself,

but I can tell you for certain your svg object can be styled.

GL!

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Chris Williams <mailto:ch...@clwill.com>
Sunday, July 10, 2016 2:35 PM
It's not clear to me exactly what the question is.

Can you style SVG inside divs on a page? Yes, I've done it frequently.

How? Simple, and like every other CSS case: use a debugger (Chrome, 
FF, IE) and look at the object structure, figure out the hierarchy you 
want/need and go for it.


Do I have to use jQuery? No. If you want to get fancy, you might have 
to use JavaScript, but that doesn't mean you have to use jQuery (and 
all it's weight). The JS isn't that complex.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 11:06 AM
Any more suggestions, it's pretty common question but I want to do it, 
hopefully, with strictly CSS; every site I find related to the subject 
either explains a jQuery solution or it's clear, or not clear at all 
on a solution, as I'll be using this, if I can find, solution quite often.



Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:55 AM
I think a link to a live example would be best here.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 10:51 AM
Tom, I read the second page you linked too as well.

I tried, considering the ID is within a class; .className #svg-object: 
12px solid red. There is no red border around my SVG object.  Even if 
it worked, I want to access the path classes or id within the SVG and 
style outside of the SVG file.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

You could stylize the classes within the SVG individually as well ?


Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:50 PM
Crest,
I was successful at styling your svg (that isn't loading btw).

Firstly, Your using display inline on everything. When you use 
display:inline, width and height do not get computed correctly.

so your object is collapsing to 0px. change to inline-block

Secondly, you have visibility: hidden on the container element. You 
wont see any styling if this is set.


I am not going to share my code since you said you wanted to do this 
yourself,

but I can tell you for certain your svg object can be styled.

GL!

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Chris Williams <mailto:ch...@clwill.com>
Sunday, July 10, 2016 2:35 PM
It's not clear to me exactly what the question is.

Can you style SVG inside divs on a page? Yes, I've done it frequently.

How? Simple, and like every other CSS case: use a debugger (Chrome, 
FF, IE) and look at the object structure, figure out the hierarchy you 
want/need and go for it.


Do I have to use jQuery? No. If you want to get fancy, you might have 
to use JavaScript, but that doesn't mean you have to use jQuery (and 
all it's weight). The JS isn't that complex.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 11:06 AM
Any more suggestions, it's pretty common question but I want to do it, 
hopefully, with strictly CSS; every site I find related to the subject 
either explains a jQuery solution or it's clear, or not clear at all 
on a solution, as I'll be using this, if I can find, solution quite often.



Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:55 AM
I think a link to a live example would be best here.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, July 10, 2016 10:51 AM
Tom, I read the second page you linked too as well.

I tried, considering the ID is within a class; .className #svg-object: 
12px solid red. There is no red border around my SVG object.  Even if 
it worked, I want to access the path classes or id within the SVG and 
style outside of the SVG file.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

Any more suggestions, it's pretty common question but I want to do it, 
hopefully, with strictly CSS; every site I find related to the subject 
either explains a jQuery solution or it's clear, or not clear at all on 
a solution, as I'll be using this, if I can find, solution quite often.



Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 10:55 AM
I think a link to a live example would be best here.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 12:26 AM
Hi Crest,
Will this work?

div#svgid object {
border: 1px solid #cfcfcf;
}

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, July 09, 2016 11:24 PM
I've been searching on how I can style SVG files embedded in a 
 tag, including CSS animation.


Can someone point me in the direction, how I can stylize a SVG object 
contained in a  tag though CSS; otherwise it appears jQuery is 
the only direction.


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

Tom, I read the second page you linked too as well.

I tried, considering the ID is within a class; .className #svg-object: 
12px solid red. There is no red border around my SVG object.  Even if it 
worked, I want to access the path classes or id within the SVG and style 
outside of the SVG file.



Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, July 10, 2016 12:26 AM
Hi Crest,
Will this work?

div#svgid object {
border: 1px solid #cfcfcf;
}

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, July 09, 2016 11:24 PM
I've been searching on how I can style SVG files embedded in a 
 tag, including CSS animation.


Can someone point me in the direction, how I can stylize a SVG object 
contained in a  tag though CSS; otherwise it appears jQuery is 
the only direction.


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Object tag svg

[Crest Christopher]

I read the entire one article on SVG and the  tag from Saras 
page; but it doesn't tell me how I can style id or classes by a embedded 
style sheet or external; she goes into viewbox and javascript and data 
tag etc.



Tom Livingston <mailto:tom...@gmail.com>
Saturday, July 09, 2016 11:42 PM
Google Sara Soueidan. She's very knowledgeable on SVG.




On Saturday, July 9, 2016, Crest Christopher <crestchristop...@gmail.com>


Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, July 09, 2016 11:24 PM
I've been searching on how I can style SVG files embedded in a 
 tag, including CSS animation.


Can someone point me in the direction, how I can stylize a SVG object 
contained in a  tag though CSS; otherwise it appears jQuery is 
the only direction.


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 Object tag svg

[Crest Christopher]

I've been searching on how I can style SVG files embedded in a  
tag, including CSS animation.


Can someone point me in the direction, how I can stylize a SVG object 
contained in a  tag though CSS; otherwise it appears jQuery is 
the only direction.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 to read Object id classes & id ?

[Crest Christopher]

Hi, can someone tell me how I can get IE to read classes & id nested 
within a SVG file read by the  tag with the type set to 
image/svg+xml ?

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

Re: [css-d] Stop going to first frame - css animation

[Crest Christopher]

I did what was mentioned on that page, and it didn't work, literally 
four times, now it works.



Tom Livingston <mailto:tom...@gmail.com>
Sunday, May 08, 2016 6:34 PM
Google is amazing:

http://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation



On Sunday, May 8, 2016, Crest Christopher <crestchristop...@gmail.com>


Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, May 08, 2016 6:30 PM
What is the CSS animation property to prevent a element from going 
back to the start.  For example; you apply a keyframe for left;


0%
left: 0

25%
left: 45px;

75%
left: 82px;

100%;
left:100px

When the animation finishes playing, instead of it stuck at keyframe 
100% it reverts back to keyframe 0%; which I don't want ?


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Stop going to first frame - css animation

[Crest Christopher]

What is the CSS animation property to prevent a element from going back 
to the start.  For example; you apply a keyframe for left;


0%
left: 0

25%
left: 45px;

75%
left: 82px;

100%;
left:100px

When the animation finishes playing, instead of it stuck at keyframe 
100% it reverts back to keyframe 0%; which I don't want ?

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

Re: [css-d] Setting Element to original spot in class ?

[Crest Christopher]

Problem solved, class order was wrong :-)


Tom Livingston <mailto:tom...@gmail.com>
Sunday, May 08, 2016 3:22 PM
This does not appear to work in FF. Works in Chrome and Safari.



Tom Livingston <mailto:tom...@gmail.com>
Sunday, May 08, 2016 3:20 PM
https://jsbin.com/cinono/edit?html,css,output



On Sun, May 8, 2016 at 3:19 PM, Crest Christopher



Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, May 08, 2016 3:19 PM
Send me your bin once again.

Tom Livingston wrote:
Tom Livingston <mailto:tom...@gmail.com>
Sunday, May 08, 2016 3:18 PM
My bin is working. And the previous bin worked on the whole school element

On Sunday, May 8, 2016, Crest Christopher <crestchristop...@gmail.com 
<mailto:crestchristop...@gmail.com>> wrote:



--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com 
<http://medialogic.com>



#663399

Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, May 08, 2016 3:17 PM
outline: 2px solid red; doesn't work on SVG elements.

Tom Livingston wrote:


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

Re: [css-d] Setting Element to original spot in class ?

[Crest Christopher]

https://jsbin.com/fepucugejo/edit?html,css,output

Tom, your example shows a red outline, mine on the other hand, no. Then 
again, the path with the class=parttwo should be displaying the red 
outline, not the entire graphic.

Tom Livingston wrote:


https://jsbin.com/bizefowimo/edit?html,css,output

On Sun, May 8, 2016 at 2:34 PM, Tom Livingston<tom...@gmail.com> wrote:


I added the class to the svg element (not sure if that's the best way
or if it is better to add a wrapper, but...), and added an outline
into the style and it looked correct to me. Not sure what the issue
is.


On Sun, May 8, 2016 at 2:20 PM, Chris F.A. 
Johnson<ch...@cfajohnson.com> wrote:


On Sun, 8 May 2016, Crest Christopher wrote:



Even if the style for the class is empty, the element is not in it's
default position as if I completely removed the class, that is what 
I don't

understand.



Are you sure the class is not styled in any CSS file?

Please provide a URL so that we can see the problem.






Tom Livingston<mailto:tom...@gmail.com>
Sunday, May 08, 2016 1:19 PM
Sounds like you are adding a class that has styles associated with it
already.







--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399





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

Re: [css-d] Setting Element to original spot in class ?

[Crest Christopher]

https://jsbin.com/fepucugejo/edit?html,css,output

Tom Livingston wrote:


Link would help

On Sunday, May 8, 2016, Crest Christopher<crestchristop...@gmail.com>
wrote:



Even if the style for the class is empty, the element is not in it's
default position as if I completely removed the class, that is what I 
don't

understand.

Tom Livingston<javascript:_e(%7B%7D,'cvml','tom...@gmail.com');>
Sunday, May 08, 2016 1:19 PM
Sounds like you are adding a class that has styles associated with it
already.

On Sunday, May 8, 2016, Crest Christopher<crestchristop...@gmail.com>
<javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>


Crest Christopher
<javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>
Sunday, May 08, 2016 12:23 PM
When I add a class to an element which otherwise doesn't have a 
class, the

element for which I just added the class repositions its self. How can I
keep the element in the exact same position it was before adding the 
class

?

I've tried margins and positioning but that doesn't set the element back
to it's original spot, the only way I can get it back to it's 
original spot

is by removing the class.






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

Re: [css-d] Setting Element to original spot in class ?

[Crest Christopher]

Even if the style for the class is empty, the element is not in it's 
default position as if I completely removed the class, that is what I 
don't understand.



Tom Livingston <mailto:tom...@gmail.com>
Sunday, May 08, 2016 1:19 PM
Sounds like you are adding a class that has styles associated with it
already.

On Sunday, May 8, 2016, Crest Christopher <crestchristop...@gmail.com>


Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, May 08, 2016 12:23 PM
When I add a class to an element which otherwise doesn't have a class, 
the element for which I just added the class repositions its self.  
How can I keep the element in the exact same position it was before 
adding the class ?


I've tried margins and positioning but that doesn't set the element 
back to it's original spot, the only way I can get it back to it's 
original spot is by removing the class.


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

Re: [css-d] Setting Element to original spot in class ?

[Crest Christopher]

The class had no styles associated with it !


Tom Livingston <mailto:tom...@gmail.com>
Sunday, May 08, 2016 1:19 PM
Sounds like you are adding a class that has styles associated with it
already.

On Sunday, May 8, 2016, Crest Christopher <crestchristop...@gmail.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] Setting Element to original spot in class ?

[Crest Christopher]

When I add a class to an element which otherwise doesn't have a class, 
the element for which I just added the class repositions its self.  How 
can I keep the element in the exact same position it was before adding 
the class ?


I've tried margins and positioning but that doesn't set the element back 
to it's original spot, the only way I can get it back to it's original 
spot is by removing the class.

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

Re: [css-d] Direction Blur

[Crest Christopher]

Hopefully someone can help me find the class=parttwo ?

I could spend forever playing with margins and positioning; all I need 
it is, to be visible in the words "previous" it doesn't matter where it 
is, as long as it's visible, a red border would visually.



Philippe Wittenbergh <mailto:e...@l-c-n.com>
Saturday, May 07, 2016 12:10 AM

But that is still a MS-only filter, and I suspect the same warning as 
my previous message will apply – that is: those filters only work up 
to IE 9 and maybe IE10 & IE11 in some obscure back compete mode. They 
won’t work in Edge.


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/
Karl DeSaulniers <mailto:k...@designdrumm.com>
Friday, May 06, 2016 11:54 PM
I think he is looking for this one.

https://msdn.microsoft.com/en-us/library/ms532866(v=vs.85).aspx


Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.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/
Philippe Wittenbergh <mailto:e...@l-c-n.com>
Friday, May 06, 2016 11:50 PM

On May 7, 2016, at 11:49 AM, Karl DeSaulniers<k...@designdrumm.com>  wrote:

Microsoft filter blur angle


LOL - from the MS page:
https://msdn.microsoft.com/en-us/library/ms532979(v=vs.85).aspx


This topic documents a feature of Visual Filters and Transitions, which is 
deprecated as of Windows Internet Explorer 9

-


On May 7, 2016, at 8:45 AM, Crest Christopher<crestchristop...@gmail.com>  
wrote:

Looking for a way to control the blur direction as in the filter:blur property 
? By default the blur filter applies and even blur, if I could extract the blur 
from filter in the form of a css property I could use skew to do the direction ?


A decent search engine would bring you the relevant MDN and the inevitable 
CSS-tricks articles near the top.
Anyway, the purely CSS filter ( E { filter: blur() }  ) only accepts one 
parameter.
You could try using the SVG filter which accepts 2 parameters (browser support 
is more limited, check caniuse.com). Don’t know what the result would be 
though, I’ve never used it so far.

see:
https://drafts.fxtf.org/filters/#blurEquivalent

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/
Karl DeSaulniers <mailto:k...@designdrumm.com>
Friday, May 06, 2016 10:49 PM
Google

Microsoft filter blur angle

Look for the Microsoft link. Has exactly what your looking for.

It's very limited. I think 3 angles.
90, 45 and 180

Have no time to check myself at the moment so I might be mistaken.

GL

Best,
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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Friday, May 06, 2016 7:45 PM
Looking for a way to control the blur direction as in the filter:blur 
property ? By default the blur filter applies and even blur, if I 
could extract the blur from filter in the form of a css property I 
could use skew to do the direction ?





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

Re: [css-d] Direction Blur

[Crest Christopher]

True, I don't want Microsoft only. I have a plan so far not put into 
motion yet but if that is all the suggestions put forth I'll proceed 
with my plan, hoping it works !


Philippe Wittenbergh wrote:




On May 7, 2016, at 12:54 PM, Karl DeSaulniers 
wrote:


I think he is looking for this one.

https://msdn.microsoft.com/en-us/library/ms532866(v=vs.85).aspx



But that is still a MS-only filter, and I suspect the same warning as 
my previous message will apply – that is: those filters only work up 
to IE 9 and maybe IE10& IE11 in some obscure back compete mode. They 
won’t work in Edge.


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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Direction Blur

[Crest Christopher]

Looking for a way to control the blur direction as in the filter:blur 
property ? By default the blur filter applies and even blur, if I could 
extract the blur from filter in the form of a css property I could use 
skew to do the direction ?



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] SVG and Animation in CSS

[Crest Christopher]

Anyone point me to any help I can get with SVG and CSS Animation ?

Karl you gave your input already on this issue !
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] One SVG to Effect Another SVG CSS Property

[Crest Christopher]

I've been trying to figure out how to have one SVG file translate while 
at the same time effect the opacity of another SVG element?


Using classes

|.SourceSVGElement .TargetSVGElement won't work because it will effect 
both elements, and I tried nesting classes but it didn't seem to work as in;


.SourceSVGElement {
translate:(23 deg);
TargetSVGElement {
opacity:0.5; {
}
}
| Any offerings ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Nesting classes for CSS Animation

[Crest Christopher]

Is it not possible to nest a css class within @keyframes ?

Using a snippet of a CSS keyframe below, when, in this pseudo code, 
class  = animationFrames translates the other element, represented in 
this pseudo code by the name class=elementname translates as well but 
causes the first class (animationFrames) to have an opacity of, once 
again, in this example, 0.95 ?


   @keyframes animationFrames{
  0% {
transform:  translate(-274px,100px)  ;
.elementname {
  opacity: .95;
};
  }
  9% {
transform:  translate(-202px,-39px)  ;
  } 


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Trying to Add Logos to Template Site

[Christopher Akins]

Hi All -

I've been inactive on this list for quite some time due to a forced change
in my job roles which all but removed me from building websites.  So, I'm
rather rusty on some of this stuff and never really got up to speed on
responsive/mobile first techniques.  Now, however, I've been tasked with
moving some logos from the footer of a site up to the header area.  The
site is a bootstrap-based template site, customized in look by me.  But now
we're talking about changing functionality and structure a bit, and that's
where the ol' skills are falling short.

The site, CSS and screenshots are here:

http://route66festivalsgf.com/indexLogos.html
http://route66festivalsgf.com/css/style.css  (very bottom of sheet are my
changes)
http://route66festivalsgf.com/issues/tablet.png
http://route66festivalsgf.com/issues/smallPhone.png
http://route66festivalsgf.com/issues/tabletLargePhone.png
http://route66festivalsgf.com/issues/largeTablet.png


I've kinda got a so-so start and have a few screenshots to show the site at
various widths.

The "tablet" and "smallPhone" screenshots are acceptable, though I would
tweak the logo placement just a bit on the smallPhone one.  My dream layout
for the phone would be

http://route66festivalsgf.com/issues/phoneDreamLayout.jpg

But the main issues right now are two:

1)  the sponsor logos being completely out of place in the  "largeTablet"
view. I can't seem to isolate what is making the logos be BOTH offset and
on two rows.  Why aren't the logo images staying to the left, thus making
room for all four?  It's like something is pushing the first of the two
images to the right, forcing the second one down.  Despite using browser
inspection tools and such I can't seem to see what is the cause of this.

2) dual rows and extra room in the "tabletLargePhone" view.  For this size
viewport I would really rather the logos all stay on one row and simply
scale down a bit.

I'm sure I'm probably approaching all of this wrong.  :-)  I had thought of
using each logo image as a separate item, using display:inline-block to
allow them to flow into place automatically.  But that's not going too well
either.  For some reason, in the wider viewports after the main navigation
becomes the 3-line icon, the logos won't stay on one line.  At least one of
them wants to drop down and form another row.

http://route66festivalsgf.com/indexLogoBlocks.html

Any insight as to approach or specifics would be greatly appreciated.

Christopher Akins
City of Springfield, MO
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] MQ on Retina Display

[Crest Christopher]

There is something I don't understand, I have the following MQ;

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 
2),(min-resolution: 192dpi)  {


Within the MQ I have a style which consists of a x2 image & for testing 
purposes a 4px solid black border.  Why is the 4px solid black border 
showing on all devices not strictly retina devices ?


Christopher
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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 Animation Scribble ?

[Crest Christopher]

There is no SVG file, it is strictly a PNG, I created manually in 
Photoshop.



Photoshop sprite tools are weak I'm going to consider making a Photoshop 
plugin for this in the future.


Philippe Wittenbergh wrote:




On Apr 5, 2016, at 04:22, Crest 
Christopher<crestchristop...@gmail.com> wrote:


The hover works, but the sprite doesn't animate upon hover ?

a {
height:23px
margin-top: -21px
display:block;
}

a:hover {
background-position:0 -1225px // The sprite actual width
background:url ('spriteimage.png')

If I apply the width of the sprite to the anchor, the element gets 
re-positioned, as the CSS-Tricks site mentions to do but in my case 
as I said, it gets re-positioned and I don't want that.




If I understand correctly: 1/ you have an animation defined **inside** 
the SVG file and 2/ that SVG file is loaded as a background-image. The 
you want to have that animation play when your pointer hovers over the 
image.


I don’t think that ought to work. Animations defined inside the SVG 
will only work if the SVG image is embedded directly inside the HTML.


Like this:
………

Sara Soueidan has some examples of animations on hover (scroll down):
https://sarasoueidan.com/tools/circulus/

There is lots of useful info about SVG on her site.

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] retina mq problem

[Crest Christopher]

There is something I don't understand, I have the following MQ;

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 
2),(min-resolution: 192dpi)  {


Within the MQ I have a style which consists of a x2 image & for testing 
purposes a 4px solid black border.  Why is the 4px solid black border 
showing on all devices not strictly retina devices ?

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