from:"Tom Livingston"

Re: [css-d] CSS must be called in the head?

2017-09-20 Thread Tom Livingston

To the best of my knowledge, it is the recommended place. That's not
to say it won't work elsewhere. You would most likely see odd things
in rendering. I've seen blocks of styles in the body. I, personally,
wouldn't do it.

On Wed, Sep 20, 2017 at 9:22 AM, John J <cr8...@gmail.com> wrote:
> And nowhere else, correct? I'm referring to external CSS
>
> Thank you.
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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] Flex item inside css grid

2017-07-24 Thread Tom Livingston

Thanks Philippe. I'll dig in to this.



On Mon, Jul 24, 2017 at 7:59 PM Philippe Wittenbergh <e...@l-c-n.com> wrote:

>
> > On Jul 24, 2017, at 10:57 PM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > I'm still new to grid (and flex, for that matter). I have a sample
> > page where an individual flex item squeezes responsively as I want,
> > but when it is inside a css grid container, it stops.
> >
> > https://tomliv.com/flex-in-grid/
> >
> > Why do they not squeeze up inside the grid?
>
> The `display: flex` inside the grid has little or nothing to do with your
> problem.
>
> As an experiment:
> .portfoliocard-wrapper > * { border: 2px dotted red; } /* makes the
> grid-items fully visible */
> .portfoliocard-wrapper img { width: 200px; }
> .portfoliocard { background: yellow; }
>
> Now look at your page, resize your window…
>
> As far as I can see, you put NO constrain on your grid-items. They will
> grow to accommodate their contents (the width of which is ultimately
> controlled by the intrinsic width of the image).
> The important thing in this case is this:
> https://drafts.csswg.org/css-grid/#min-size-auto
>
> What that says is: The `min-width` of a grid-item is auto (and auto !=0) -
> unless the overflow property on the grid-item is set to something else than
> `visible` (the initial value). That is the same for flex-items, btw.
>
> Some options to fix your layout:
>
> [*] img { width: 100%; /* OR max-width: 100%*/  }
> [*] .portfoliocard-wrapper > * { overflow: hidden; } /* but Safari 10 has
> a bug here */
> [*] .portfoliocard-wrapper > * { min-width: 0; } /* Safari 10 does not
> resize the image. Firefox 54 does, not sure which one is correct */
>
> My preferred option is the first one.
>
>
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/
>
>
>
>
>
>
> --

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/

[css-d] Flex item inside css grid

2017-07-24 Thread Tom Livingston

Listers,

I'm still new to grid (and flex, for that matter). I have a sample
page where an individual flex item squeezes responsively as I want,
but when it is inside a css grid container, it stops.

https://tomliv.com/flex-in-grid/

Why do they not squeeze up inside the grid?

TIA


-- 

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] CSS Grid Question

2017-07-21 Thread Tom Livingston

Ow, my head.




On Fri, Jul 21, 2017 at 5:20 PM Eric A. Meyer <e...@meyerweb.com> wrote:

> On 21 Jul 2017, at 14:18, Tom Livingston wrote:
>
> > Is it possible to style the rows and columns of a css grid - the grid
> > itself?
>
> There's no way to say something like  '@column[2] {border: 1px
> solid;}' and thus directly style the grid components.  You have to
> assign some sort of element into the grid, and style that.
>
> > I have an upcoming layout that uses what looks like a tic-tac-toe
> > board - complete with the vertical and horizontal lines of said
> > tic-tac-toe board - with text/icon in each grid cell.
>
> You could certainly style the borders of the elements filling the
> grid cells to create this effect.  Alternatively, if you're going to be
> assigning element to every grid cell but they can rearrange, you can use
> what I call the "Attack of the Filler s" approach.  It would go
> something like this:
>
> 
> (...all your content here...)
> 
> 
> 
>
> Then assign styles something like this for the  elements:
>
> b#col {grid-column: 2; grid-row: 1 / -1; border: 1px solid gray;
> border-width: 0 1px;}
> b#row {grid-column: 1 / -1; grid-row: 2; border: 1px solid gray;
> border-width: 1px 0;}
>
> That would get you the tic-tac-toe grid.
> The drawback there is you could no longer rely on the grid's
> automatic content flow to fill in the content, because the  elements
> would be occupying cells.  If you explicitly assign the various pieces
> of content to their cells, then that's not a problem.  If you want to do
> this, but still want auto-flow into cells, you'd need to have the
> content and tic-tac-tow grids in separate elements, and then position
> one on top of the other.  Note that I don't necessarily mean 'position',
> though that could work.  You could grid a container of the two grids so
> as to put one grid on the other grid.. so, yes, you can have grids in
> your grid to grid a grid over a grid.
> I swear that made sense when I typed it.
>
> --
> 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/

-- 

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/

[css-d] CSS Grid Question

2017-07-21 Thread Tom Livingston

List,

Is it possible to style the rows and columns of a css grid - the grid itself?

I have an upcoming layout that uses what looks like a tic-tac-toe
board - complete with the vertical and horizontal lines of said
tic-tac-toe board - with text/icon in each grid cell.

Not experienced with Grid yet and can't find what I'm looking for in a search.

TIA

-- 

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/

[css-d] Animating text

2017-07-14 Thread Tom Livingston

This may not be CSS related, so I apologize if the appropriate answer
has nothing to do with CSS...

I am looking for a way to animate text for a web page. I am looking
for the ability to do things like reveal a word as if it were growing
out of a rule on the page, roll from one line of text to another in a
slot machine style, or slide a line of text. Ultimately, we would like
it to be html text for accessibility and SEO purposes. I am having
little luck on Google but that may be my search terms.

Anyone do something like this? Any references?

Thanks in advance.


-- 

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] PROBLEM with CSS for checkbox - Firefox

2017-06-16 Thread Tom Livingston

A link would be of more help. Test page?



On Fri, Jun 16, 2017 at 2:58 PM, william drescher
<will...@techservsys.com> wrote:
> I have:
> 
> 
> <!--
> html {
> font-size: 2.2rem;
> }
> button, select, input, textarea {
> font-size: 1rem;
> }
> [type="checkbox"], [type="radio"] {
> -moz-appearance: none;
> height: 1rem;
> outline: 2px dotted red;
> width: 1rem;
> }
> -->
> 
>
> Since the most recent update of Firefox the checkboxes and radio buttons no
> longer show (but the outline does) and when clicked the checkbox/radio still
> don't show, but the receiving program acts as if it has received the checked
> box/radio
>
> Thoughts?
>
> -bill
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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] A little SVG Help ?

2017-06-07 Thread Tom Livingston

Maybe this can help?

https://css-tricks.com/masking-vs-clipping-use/#more-255253



On Tue, Jun 6, 2017 at 8:29 AM,  <crestchristop...@gmail.com> wrote:
> No, what is defined with  is called outside of  and should be
> displayed ?
>
>
>
>
>
> Christopher
>
>
>



-- 

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] A little SVG Help ?

2017-06-06 Thread Tom Livingston

I see what looks like 2 black hourglass type shapes. Is that what you want?

On Mon, Jun 5, 2017 at 10:59 PM,  <crestchristop...@gmail.com> wrote:
> Link
>
>
>
> Christopher
>
>
>
> From: Tom Livingston
> Sent: Monday, June 5, 2017 10:19 PM
> To: CSS Discussion Group; crestchristop...@gmail.com
> Subject: Re: [css-d] A little SVG Help ?
>
>
>
> A link or some information would help.
>
>
>
>
>
>
>
> On Mon, Jun 5, 2017 at 9:38 PM <crestchristop...@gmail.com> wrote:
>
> I understand this doesn’t belong to this discussion.  Anyone with deep
> understanding of SVG because this is not displaying within CodePen ?
>
>
> Christopher
>
> --
>
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
>
>



-- 

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] A little SVG Help ?

2017-06-05 Thread Tom Livingston

A link or some information would help.



On Mon, Jun 5, 2017 at 9:38 PM <crestchristop...@gmail.com> wrote:

> I understand this doesn’t belong to this discussion.  Anyone with deep
> understanding of SVG because this is not displaying within CodePen ?
>
>
> Christopher
>
> --

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] Flex question

2017-05-22 Thread Tom Livingston

Thanks Al. This was the hint I needed.


>>
>> Hi Tom,
>>
>> I know you're very advanced in your CSS skills, so looking at the structure
>> and CSS we're deploying on our home page should give you some clues:
>> http://www.projectseven.com/


-- 

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] Flex question

2017-05-22 Thread Tom Livingston

On Mon, May 22, 2017 at 1:20 PM, Al Sparber <aspar...@roadrunner.com> wrote:
> On 5/22/2017 12:50 PM, Tom Livingston wrote:
>>
>> Hello list,
>>
>> Given the following:
>>
>> 
>> Item 1
>> Item 2
>> Item 3
>> Item 4
>> 
>>
>> ol{
>>  position: absolute;
>>  display: flex;
>>  flex-direction: column;
>>  height: 100%; /* 100% of taller parent */
>> }
>> ol li{
>>  display: flex;
>>  flex:1;
>> }
>> ol li a{
>>  flex:1;
>> }
>>
>> the OL is absolute and 100% height of a taller parent, so the LIs are
>> taller than the text inside them.
>>
>>
>> This gets me very close to where I want to be except the text needs to
>> be centered vertically. What's the best way to accomplish this? Am I
>> missing a flex method that will do it?
>
>
> Hi Tom,
>
> I know you're very advanced in your CSS skills, so looking at the structure
> and CSS we're deploying on our home page should give you some clues:
> http://www.projectseven.com/
>
> You need to be careful with height as it is really not necessary if you
> structure the markup correctly, and height on any element not a direct child
> of the flex element will not work on Safari.
>


Thanks Al. I'll take a look. I've still not used flex enough to know it well.



-- 

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/

[css-d] Flex question

2017-05-22 Thread Tom Livingston

Hello list,

Given the following:


Item 1
Item 2
Item 3
Item 4


ol{
 position: absolute;
 display: flex;
 flex-direction: column;
 height: 100%; /* 100% of taller parent */
}
ol li{
 display: flex;
 flex:1;
}
ol li a{
 flex:1;
}

the OL is absolute and 100% height of a taller parent, so the LIs are
taller than the text inside them.


This gets me very close to where I want to be except the text needs to
be centered vertically. What's the best way to accomplish this? Am I
missing a flex method that will do it?

Thanks


-- 

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] How do you handle situations like this?

2017-05-18 Thread Tom Livingston

I'll have to whip up a test page. Can't share the real page.

On Thu, May 18, 2017 at 4:46 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> Not without a link.
>
> Best,
> Karl
>
> Sent from losPhone
>



-- 

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] How do you handle situations like this?

2017-05-18 Thread Tom Livingston

Correction:

Sorry, that should have said I started down the path of *min-height*
not min-width.





On Thu, May 18, 2017 at 3:49 PM, Tom Livingston <tom...@gmail.com> wrote:
> Listers,
>
> I have a content module. A div containing text above a flexible-width
> video (could easily be an image too).
>
> I have 2 of these on a web page. They stack on narrow widths, and go
> side-by-side at wide enough widths. They have different amounts of
> text in each. I will inevitably be asked to make the videos line up
> with each other when these modules appear side-by side. I started down
> the path of a min-width on the parent and positioned the videos
> absolute bottom:0; This presents it's own issues and is finicky.
>
> Any other ideas? I think I am in a 'forest for the trees' situation
> here and can't see another easy solution.
>
> TIA


-- 

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/

[css-d] How do you handle situations like this?

2017-05-18 Thread Tom Livingston

Listers,

I have a content module. A div containing text above a flexible-width
video (could easily be an image too).

I have 2 of these on a web page. They stack on narrow widths, and go
side-by-side at wide enough widths. They have different amounts of
text in each. I will inevitably be asked to make the videos line up
with each other when these modules appear side-by side. I started down
the path of a min-width on the parent and positioned the videos
absolute bottom:0; This presents it's own issues and is finicky.

Any other ideas? I think I am in a 'forest for the trees' situation
here and can't see another easy solution.

TIA


-- 

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/

[css-d] form element styles flashing

2017-04-27 Thread Tom Livingston

List,

Here's the page:
https://tomliv.com/form/

In Chrome (latest Mac) the form elements flash different styles
(borders, bg color on button) upon load and reload. FF and Safari do
not show this issue. I have transitions on both states of the elements
so attributes fade on both focus and blur, mouse over and out (on the
button).

Is it me or the browser?

Thanks

-- 

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] Flexbox question

2017-04-26 Thread Tom Livingston

I think he may have recently changed the site design as well. I don't
remember that left side nav before.



On Wed, Apr 26, 2017 at 7:08 AM Nancy Johnson <njohnso...@gmail.com> wrote:

> I found it very helpful.  I was only looking for syntax to plug into
> my page fast. It provided that. I didn't need to look at their layout
> other than to see if it solved my problem.
>
> Nancy
>
> On Tue, Apr 25, 2017 at 10:24 PM, Tom Livingston <tom...@gmail.com> wrote:
> > I think his breakoints aren't quite right for that 3-column layout.
> > The site itself is very useful and informative.
> >
> > On Tue, Apr 25, 2017 at 9:04 PM, Chris F.A. Johnson
> > <ch...@cfajohnson.com> wrote:
> >> On Tue, 25 Apr 2017, crestchristop...@gmail.com wrote:
> >>
> >>> What is that image ? I know what it is but it appears as junk ?
> >>
> >>
> >> It's a screenshot of the page in question.
> >>
> >>
> >>>
> >>> Christopher
> >>>
> >>> From: Chris F.A. Johnson
> >>> Sent: Tuesday, April 25, 2017 7:57 PM
> >>> To: CSS Discussion Group
> >>> Subject: Re: [css-d] Flexbox question
> >>>
> >>> On Tue, 25 Apr 2017, Nancy Johnson wrote:
> >>>
> >>>> In the past I used it only for equal heights only but there is a great
> >>>> deal I am learning about.  It is a very powerful tool.
> >>>> You do have to be careful for older browsers and have a fall back for
> >>>> those.
> >>>>
> >>>> This link has been very helpful for me
> >>>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
> >>>
> >>>
> >>> Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg
> >>>
> >>>
> >>
> >> --
> >> Chris F.A. Johnson, <http://cfajohnson.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 | 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/
>
-- 

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] Flexbox question

2017-04-25 Thread Tom Livingston

I think his breakoints aren't quite right for that 3-column layout.
The site itself is very useful and informative.

On Tue, Apr 25, 2017 at 9:04 PM, Chris F.A. Johnson
<ch...@cfajohnson.com> wrote:
> On Tue, 25 Apr 2017, crestchristop...@gmail.com wrote:
>
>> What is that image ? I know what it is but it appears as junk ?
>
>
> It's a screenshot of the page in question.
>
>
>>
>> Christopher
>>
>> From: Chris F.A. Johnson
>> Sent: Tuesday, April 25, 2017 7:57 PM
>> To: CSS Discussion Group
>> Subject: Re: [css-d] Flexbox question
>>
>> On Tue, 25 Apr 2017, Nancy Johnson wrote:
>>
>>> In the past I used it only for equal heights only but there is a great
>>> deal I am learning about.  It is a very powerful tool.
>>> You do have to be careful for older browsers and have a fall back for
>>> those.
>>>
>>> This link has been very helpful for me
>>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
>>
>>
>> Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg
>>
>>
>
> --
> Chris F.A. Johnson, <http://cfajohnson.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 | 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] Flexbox question

2017-04-10 Thread Tom Livingston

On Mon, Apr 10, 2017 at 5:24 PM, Al Sparber <aspar...@roadrunner.com> wrote:

> On 4/10/2017 4:01 PM, Tom Livingston wrote:
>
>> List,
>>
>> I haven't used flex at all basically, but have an opportunity to.
>>
>> I have rows of 3 items. I would like them evenly spaced, but if the last
>> row has only 2 items, I'd like the same amount of space between but I want
>> them aligned to the left (like text-align:left). I can't seem to get this.
>> Is it possible? I've gotten close, but last two items are far left and far
>> right.
>>
>
> See if you can work with this:
> http://www.projectseven.com/csslab/flexbox/tom-cssd/
> It's all in the head.
>
>

This looks good. I think I might be able to run with this. Thanks Al.

Seems like the key to what I was after was  flex-direction: column (as
opposed to row) - to keep the last two items to the left.

Thanks again.


-- 

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] Flexbox question

2017-04-10 Thread Tom Livingston

Hmm. A bit hack-y, but interesting thought. I'll tuck that away. ;-)

On Mon, Apr 10, 2017 at 4:37 PM, Karl DeSaulniers <k...@designdrumm.com>
wrote:

> Hey Tom,
> Can you create a blank one that fills in for the third that you can then
> space from?
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Apr 10, 2017, at 3:01 PM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > List,
> >
> > I haven't used flex at all basically, but have an opportunity to.
> >
> > I have rows of 3 items. I would like them evenly spaced, but if the last
> > row has only 2 items, I'd like the same amount of space between but I
> want
> > them aligned to the left (like text-align:left). I can't seem to get
> this.
> > Is it possible? I've gotten close, but last two items are far left and
> far
> > right.
> >
> > Thanks!
> >
> >
> >
> > --
> >
> > 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/
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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/

[css-d] Flexbox question

2017-04-10 Thread Tom Livingston

List,

I haven't used flex at all basically, but have an opportunity to.

I have rows of 3 items. I would like them evenly spaced, but if the last
row has only 2 items, I'd like the same amount of space between but I want
them aligned to the left (like text-align:left). I can't seem to get this.
Is it possible? I've gotten close, but last two items are far left and far
right.

Thanks!



-- 

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] IE Edge svg hover issue

2017-04-05 Thread Tom Livingston

Oh boy. Sorry about the sass.

I discovered that Edge needed a fixed width for the effect to work. I was
using calc. Percentage didn't work either.

Thanks for looking. When I can, I'll try to follow up with the working
sample.


On Wed, Apr 5, 2017 at 7:31 PM Philippe Wittenbergh <e...@l-c-n.com> wrote:

>
> > On Apr 6, 2017, at 1:47 AM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > Here is my structure and css:
>
> 
>
> > In Edge, on hover the svg disappears when you move your cursor off the
> > element.
> >
> > Anyone see why or know what's up? I've been messing around with style
> > changes, but can't see what Edge is doing. I'm sorry I can't provide a
> > link. I'll take any guesses at this point.
>
>
> Is this what I should see?
> https://dev.l-c-n.com/_junk/tl.html
>
> (best guess, after trying to desassify the provided CSS)
>
> If so, that works perfectly fine on this side with Edge supposedly
> up-to-date.
>
>
> Philippe
> --
> Philippe Wittenbergh
> https://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/

-- 

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/

[css-d] IE Edge svg hover issue

2017-04-05 Thread Tom Livingston

Here is my structure and css:




http://www.w3.org/2000/svg; viewBox="0 0 100 100">

.st0{fill:#afafaf;}










  .navbar{
display: block;
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
//width: 52%;
max-width: 225px;

li{
position: relative;
background: linear-gradient(50deg, #bb3607 0%, #be6407 100%);
width: calc(100% / 3);
height: auto;
max-height: 75px;
float: left;
z-index: 1;

svg{
display: block;
position: relative;
width: 100%;
height: auto;
max-height: 55px;
max-width: 100%;
z-index: 2;
}

a{
position: relative;
display: block;
padding: 11px;
z-index: 2;

svg .st0{
fill: #afafaf!important;
will-change: transform;
transition: all 0.5s ease;
}
}


}
li:before{
position: absolute;
background: linear-gradient(45deg, #cc 0%, #ff 100%);
content: " ";
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
will-change: transform;
transition: all 0.5s ease;
}
li.active:before,
li:hover:before{
opacity: 0;
}
li.active a,
li:hover a {
svg .st0{
fill: #ff!important;
}
}
}

In Edge, on hover the svg disappears when you move your cursor off the
element.

Anyone see why or know what's up? I've been messing around with style
changes, but can't see what Edge is doing. I'm sorry I can't provide a
link. I'll take any guesses at this point.

TIA


-- 

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] Ham Menus

2017-03-31 Thread Tom Livingston

We usually do both. The word 'menu' under the 3 lines. I believe the three
lines has become well known. It's on the app I'm typing in as a matter of
fact  (without text) however I'd rather be safe and add a text 'label' to
the three lines. But it's certainly not mandatory. I've been seeing a lot
of responsive horizontal scrolling nav without any need for icon
representation.



On Fri, Mar 31, 2017 at 9:12 PM Crest Christopher <
crestchristop...@gmail.com> wrote:

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

-- 

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-31 Thread Tom Livingston

Good stuff!


On Fri, Mar 31, 2017 at 8:52 PM GJim <jarne...@wyomerc.com> wrote:

> Tom, et al,
>
> Which, then, leads to this:
> https://zellwk.com/blog/viewport-based-typography/
>
> Which may very well help me in re-working the top banner at:
> www.tomfolio.com
>
> Thanks!
>
> >>
> >> Just found this:
> >>
>
> > https://www.sitepoint.com/css-viewport-units-quick-start/
>
>
> G-Jim c):{-
>
> --
> Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
> Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
> My photography: http://www.gjim.com
>
> --

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-31 Thread Tom Livingston

>
> Just found this:
>

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



-- 

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-29 Thread Tom Livingston

On Wed, Mar 29, 2017 at 7:23 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

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

Visual Aid?
https://tomliv.com/css-d/costello/


-- 

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-29 Thread Tom Livingston

Who's on first.

On Wed, Mar 29, 2017 at 3:08 AM Felix Miata <mrma...@earthlink.net> wrote:

> Anyone else think of Abbott and Costello reading this thread? :-)
>
> --

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-23 Thread Tom Livingston

Seems to me you are needlessly - and confusingly - mixing sizing methods.

I'm tapping out on this thread.

Goodnight all.


On Thu, Mar 23, 2017 at 10:02 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

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


-- 

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-23 Thread Tom Livingston

To be more clear:

REMs, on the other hand, are relative to the root element (HTML) which is
based on the browser preference setting.



On Thu, Mar 23, 2017 at 11:39 AM, Tom Livingston <tom...@gmail.com> wrote:

> 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;
>
>
>
>
>
> On Thu, Mar 23, 2017 at 10:14 AM, Crest Christopher <
> crestchristop...@gmail.com> wrote:
>
>> Speaking of which, can someone once again clarify, for example; 2.2em
>> would equal 4.4vw ?
>>
>>
>>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
>



-- 

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-23 Thread Tom Livingston

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;

On Thu, Mar 23, 2017 at 10:14 AM, Crest Christopher <
crestchristop...@gmail.com> wrote:

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

-- 

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-23 Thread Tom Livingston

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


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

>
>
> Tom Livingston wrote:
> > 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.
> 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
>



-- 

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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

2017-03-23 Thread Tom Livingston

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/

-- 

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] page gap in IE edge/11

2017-03-21 Thread Tom Livingston

I updated the page to use vh. Seems to work well.

Not sure if I can go the flex route. Will need to look into browser support
first, but I hope I can. Much simpler.



On Tue, Mar 21, 2017 at 8:03 PM, Tom Livingston <tom...@gmail.com> wrote:

> Looks like I should be able to use vh. I'll give that a try and test.
>
>
> On Tue, Mar 21, 2017 at 8:00 PM Philippe Wittenbergh <e...@l-c-n.com>
> wrote:
>
>>
>> > On Mar 22, 2017, at 8:28 AM, Tom Livingston <tom...@gmail.com> wrote:
>> >
>> > For me, there was extra height to the page, with a white bg. I could
>> scroll
>> > past the orange bg. Again, in I.E. Edge/11.
>>
>> Hmm - I did’t see that at all, but then, I can’t make the window tall
>> enough (screen size limit of the laptop).
>>
>> Have you thought about using `vh` units to set the height (as in: ` body,
>> .pagewrap { min-height:100vh } `) ? And remove all that percentage-based
>> height/min-height. I suspect that might be the issue.
>>
>> You could go further, and use `display:flex; flex-flow:column;` to center
>> your content (and on the way simplify your markup…). Of course, all depends
>> on the browsers you need to support.
>>
>> Minimal example: https://dev.l-c-n.com/_junk/__x.html
>
>
-- 

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] page gap in IE edge/11

2017-03-21 Thread Tom Livingston

Looks like I should be able to use vh. I'll give that a try and test.


On Tue, Mar 21, 2017 at 8:00 PM Philippe Wittenbergh <e...@l-c-n.com> wrote:

>
> > On Mar 22, 2017, at 8:28 AM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > For me, there was extra height to the page, with a white bg. I could
> scroll
> > past the orange bg. Again, in I.E. Edge/11.
>
> Hmm - I did’t see that at all, but then, I can’t make the window tall
> enough (screen size limit of the laptop).
>
> Have you thought about using `vh` units to set the height (as in: ` body,
> .pagewrap { min-height:100vh } `) ? And remove all that percentage-based
> height/min-height. I suspect that might be the issue.
>
> You could go further, and use `display:flex; flex-flow:column;` to center
> your content (and on the way simplify your markup…). Of course, all depends
> on the browsers you need to support.
>
> Minimal example: https://dev.l-c-n.com/_junk/__x.html
>
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
> --

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] page gap in IE edge/11

2017-03-21 Thread Tom Livingston

For me, there was extra height to the page, with a white bg. I could scroll
past the orange bg. Again, in I.E. Edge/11.


On Tue, Mar 21, 2017 at 7:26 PM Philippe Wittenbergh <e...@l-c-n.com> wrote:

>
> > On Mar 22, 2017, at 4:54 AM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > Here is a sample page:
> > https://tomliv.com/wip/
> >
> > I've tried various page sizes on load and resizing and can't track down
> the
> > space I am getting in IE Edge and 11. Can anyone tell me where the extra
> > space in the page is coming from? The page scrolls for a bit for 'no
> > apparent reason'. It's fine in FF, Chrome and Safari.
>
> Can you clarify what “page gap” you mean? Page displays identically in
> Safari and Edge latest here.
>
> I should note that the form overflows the window in Edge no matter what,
> as it is too tall for the (maximised) window on that laptop.
>
> 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/

-- 

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] page gap in IE edge/11

2017-03-21 Thread Tom Livingston

UPDATE: I added overflow:hidden to .pagewrap on *my local page* and this
made the extra space go away. I'd still love to know if it can be solved
w/o the overflow:hidden.

Thanks!



On Tue, Mar 21, 2017 at 3:54 PM, Tom Livingston <tom...@gmail.com> wrote:

> Here is a sample page:
> https://tomliv.com/wip/
>
> I've tried various page sizes on load and resizing and can't track down
> the space I am getting in IE Edge and 11. Can anyone tell me where the
> extra space in the page is coming from? The page scrolls for a bit for 'no
> apparent reason'. It's fine in FF, Chrome and Safari.
>
> I am using transition to vertical center the content at a viewport height
> greater than 750px.
>
> Thanks
>
>
>

-- 

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/

[css-d] page gap in IE edge/11

2017-03-21 Thread Tom Livingston

Here is a sample page:
https://tomliv.com/wip/

I've tried various page sizes on load and resizing and can't track down the
space I am getting in IE Edge and 11. Can anyone tell me where the extra
space in the page is coming from? The page scrolls for a bit for 'no
apparent reason'. It's fine in FF, Chrome and Safari.

I am using transition to vertical center the content at a viewport height
greater than 750px.

Thanks

-- 

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] How to use "radius" if I have no img tag?

2017-03-21 Thread Tom Livingston

A link to a page is always helpful. Hard to answer without knowing what
else might be a factor.



On Tue, Mar 21, 2017 at 10:01 AM, Michelle Konzack <linux4miche...@gmail.com
> wrote:

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


-- 

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] Hidden UL/LI

2017-03-20 Thread Tom Livingston

Works on iPhone/up-to-date Android. This is only a start. Work in progress.
But does demonstrate the question the OP asked. Getting the sub to show
with hover - which is with a mouse.



On Mon, Mar 20, 2017 at 8:37 PM Philippe Wittenbergh <e...@l-c-n.com> wrote:

>
> > On Mar 21, 2017, at 3:30 AM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > I have a sample here:
> >
> > https://tomliv.com/navigation-menu/index.html
> >
> > Though not perfect, you get the idea…
>
> As always, those things are not exactly friendly to keyboard users (and
> eventually, screen readers) as the sub navigation remains completely hidden
> to them (it works better for small devices, given the script,  think).
>
>
> > On Mar 21, 2017, at 3:32 AM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > This does work with touch devices I've tested, btw…
>
> Define “touch” device… an iPad would have problems, similar to the
> keyboard users above.
>
> It would be acceptable if your top-level links point to some sort of
> landing page(s), where the subnav links are explicitly described.
>
>
> 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/

-- 

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] Box Sizing

2017-03-20 Thread Tom Livingston

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 <
crestchristop...@gmail.com> wrote:

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



-- 

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] Hidden UL/LI

2017-03-20 Thread Tom Livingston

This does work with touch devices I've tested, btw...

On Mon, Mar 20, 2017 at 2:30 PM, Tom Livingston <tom...@gmail.com> wrote:

> I have a sample here:
>
> https://tomliv.com/navigation-menu/index.html
>
> Though not perfect, you get the idea...
>
>
>
>>



-- 

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] Hidden UL/LI

2017-03-20 Thread Tom Livingston

I have a sample here:

https://tomliv.com/navigation-menu/index.html

Though not perfect, you get the idea...



On Mon, Mar 20, 2017 at 12:35 PM, GJim <jarne...@wyomerc.com> wrote:

>
> > as well as bi desk-top monitors
>
> Make that 'big desk-top monitors'.
>
> G-Jim c):{-
>
> --
> Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
> Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
> My photography: http://www.gjim.com
>
>


-- 

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] Hidden UL/LI

2017-03-20 Thread Tom Livingston

Hi Michelle,

Add the hover to the "TITLE 2" , not the  in the . When hovering
the , show the related submenu in that .

HTH

On Mon, Mar 20, 2017 at 9:32 AM, Michelle Konzack <linux4miche...@gmail.com>
wrote:

> Hello *,
>
> I have a "Menu" with 6 items which schould be placed  horizontal,  which
> is, what I have already gotten, but not I get headaches with two of  the
> items which have a "Submenu" with an  unknown  number  of  items  (auto-
> generated from PHP) which I wan to hide and show only, if  I  move  with
> then mouse over the item in the first list.
>
> Can someone explain me simple ho to do this?
>
> I was thinking with adding the ":hover" to the syle, but this  does  not
> work as expected, because if I wan to move down the list, it disapear.
>
> The Menu looks like
>
>  TITLE 1 | TITLE 2  | TITLE 3 | TITLE 4  | TITLE 5 | TITLE 6
>ITEM 2.1 ITEM 4.1
>ITEm 2.2 ITEM 4.2
>...  ...
>ITEM 2.n ITEM 4.n
>
> Thanks in avance
>
> --
> Michelle KonzackMiila ITSystems @ TDnet
> GNU/Linux Developer 00372-54541400
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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] Font-sizes & EM

2017-03-19 Thread Tom Livingston

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.


On Sun, Mar 19, 2017 at 8:04 PM, Tom Livingston <tom...@gmail.com> wrote:

> 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 <
> crestchristop...@gmail.com> wrote:
>
>> Therefore, if the viewport width is 800px = 8% of viewport width; if I'm
>> doing the math right ?
>>
>> Tom Livingston <tom...@gmail.com>
>> Sunday, March 19, 2017 7:52 PM via 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
>>
>>
>> #663399
>> Crest Christopher <crestchristop...@gmail.com>
>> Sunday, March 19, 2017 7:45 PM via Postbox
>> <https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
>> What is 1vw, a pixel ?
>>
>>
>> Tom Livingston <tom...@gmail.com>
>> Sunday, March 19, 2017 7:39 PM via 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 <crestchristop...@gmail.com>
>> Sunday, March 19, 2017 6:30 PM via 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 <rainer.berth...@gmx.net>
>> Sunday, March 19, 2017 2:39 PM via 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> <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/
>>
>>
>>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
>



-- 

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] Font-sizes & EM

2017-03-19 Thread Tom Livingston

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 <
crestchristop...@gmail.com> wrote:

> Therefore, if the viewport width is 800px = 8% of viewport width; if I'm
> doing the math right ?
>
> Tom Livingston <tom...@gmail.com>
> Sunday, March 19, 2017 7:52 PM via 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
>
>
> #663399
> Crest Christopher <crestchristop...@gmail.com>
> Sunday, March 19, 2017 7:45 PM via Postbox
> <https://www.postbox-inc.com/?utm_source=email_medium=sumlink_campaign=reach>
> What is 1vw, a pixel ?
>
>
> Tom Livingston <tom...@gmail.com>
> Sunday, March 19, 2017 7:39 PM via 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 <crestchristop...@gmail.com>
> Sunday, March 19, 2017 6:30 PM via 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 <rainer.berth...@gmx.net>
> Sunday, March 19, 2017 2:39 PM via 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> <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/
>
>
>


-- 

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] Font-sizes & EM

2017-03-19 Thread Tom Livingston

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



On Sun, Mar 19, 2017 at 7:45 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> What is 1vw, a pixel ?
>
>
>
>


-- 

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] Font-sizes & EM

2017-03-19 Thread Tom Livingston

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 <
crestchristop...@gmail.com> wrote:

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

-- 

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] Font-sizes & EM

2017-03-19 Thread Tom Livingston

EMs are relative units. They are relative to a users preference setting,
typically in px, but they scale based on what size the user has set. Some
one with poor eye sight might set their browser default at 30px. By using
ems your site will automatically honor the users wish to have a large font
size so they can read it. (Hopefully you build your site in such a way that
this didn't break it).

Also, in the past, some browsers would not scale font set in px when a user
used the zoom feature in the browser. Ems scaled.

On Sat, Mar 18, 2017 at 11:52 PM Crest Christopher <
crestchristop...@gmail.com> wrote:

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

-- 

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] help with image opacity (?)

2017-03-09 Thread Tom Livingston

On Thu, Mar 9, 2017 at 1:54 PM, Angela French <afre...@sbctc.edu> wrote:

> Hello,
> I have a .png graphic that is white and gold on a transparent background.
> It is set over divs with a blue and a black background color.  I cannot
> figure out what is
> "dulling down" the .png logo.  It looks like an opacity issue, but there
> is no opacity set on it.
>
>

After downloading the image and opening it in PhotoShop, the png itself is
translucent.



-- 

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] Using CSS to style a back button

2017-02-23 Thread Tom Livingston

Would the browser back button not be suffice?



On Thu, Feb 23, 2017 at 7:27 PM Rod Castello <rodcastel...@gmail.com> wrote:

> Thank you Marie, I will try this out.
>
> On Thu, Feb 23, 2017 at 3:56 PM, <ma...@telenet.be> wrote:
>
> > Hi Rod,
> >
> > Use cursor:pointer;
> > Instead of " > onClick="history.back(-1)">Back to Product" = html5
> >
> > Regards,
> >
> > Marie
> >
> > -Original Message-
> > From: css-d [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of
> Rod
> > Castello
> > Sent: donderdag 23 februari 2017 23:49
> > To: css-d@lists.css-discuss.org
> > Subject: [css-d] Using CSS to style a back button
> >
> > Hi,
> > I'm using this code to generate a button that takes my users to the page
> > the just came from.
> > 
> >
> > It works fine, but I would like to style it and set the cursor to "hand".
> > I'm trying to find out how to add a class or id to it, but haven't been
> > able to find anything online as of yet.
> >
> > The other way I could do it is create the button with HTML and CSS but
> > then I don't know how to add the javascript functionality to it.
> >
> > Would love a little coaching on this.
> > Here's the pages involved. Click where it says "CLICK HERE FOR
> NUTRITIONAL
> > INFORMATION"
> > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> > The back button is here:
> > http://www.lotuspetfoods.com/canned-pates-nutrient-table/
> >
> > Ideally I'd like the Nutritional Information to be on a pop up like what
> > happens when you click on the button called "GLOSSARY". I haven't been
> able
> > to figure that one out yet.
> >
> > Thanks in advance for any help.
> >
> > --
> > Rod Castello
> > DIGITAL DESIGN AND DEVELOPMENT
> > 818.437.7880
> > rodcastel...@gmail.com
> > www.smashcube.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/
> >
> >
>
>
> --
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> rodcastel...@gmail.com
> www.smashcube.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 | 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] Styling Inline tag vertically

2017-02-23 Thread Tom Livingston

I do not. I was assuming the HTML couldn't be changed. The best thing to do
is get rid of the span.


On Thu, Feb 23, 2017 at 5:04 PM Philip Taylor <p.tay...@rhul.ac.uk> wrote:

>
>
> Tom Livingston wrote:
> > On Thu, Feb 23, 2017 at 9:43 AM, Crest Christopher
> > <crestchristop...@gmail.com> wrote:
> >> 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 ?
> >
> > The span is an inline element which doesn't respond to margin styles.
> > add a declaration for the span to be inline-block (or block) and then
> > try your positioning.
> Do you both believe that an  element can legitimately be a child of a
>  element ?
> If so, are you able to cite any W3C specification that permits such a nest
> ?
>
> Philip Taylor
>
-- 

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] Styling Inline tag vertically

2017-02-23 Thread Tom Livingston

On Thu, Feb 23, 2017 at 9:43 AM, Crest Christopher
<crestchristop...@gmail.com> wrote:
> 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 ?


The span is an inline element which doesn't respond to margin styles.
add a declaration for the span to be inline-block (or block) and then
try your positioning.



-- 

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] email: 3 column alignment

2017-02-22 Thread Tom Livingston

Put the 3 tds in one row.

On Wed, Feb 22, 2017 at 1:06 PM, Ron Zisman <ronzis...@mac.com> wrote:
> ricochet.org/revised.html <http://ricochet.org/revised.html>
>
> hi,
>
> i was tinkering around with something making client changes, and i broke it.
>
> in the middle of the page is a table with 3 columns in it (price chart)
>
> they used to align, and i’d like em to again, but can’t find the problem.
>
> the percentage value for the column widths can change, but when i tried the 
> widths didn’t seem to change.
>
> thanks in advance,
>
> ron
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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] Inline Anchor failing to work ?

2017-02-22 Thread Tom Livingston

I have no idea what this means or what it has to do with negative padding.


On Wed, Feb 22, 2017 at 11: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
> 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
> 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.
>


-- 

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] Inline Anchor failing to work ?

2017-02-22 Thread Tom Livingston

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

On Wed, Feb 22, 2017 at 8:37 AM, Tom Livingston <tom...@gmail.com> wrote:
> 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
> <crestchristop...@gmail.com> wrote:
>> 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/
>>
>> __________
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399



-- 

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] Inline Anchor failing to work ?

2017-02-22 Thread Tom Livingston

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
<crestchristop...@gmail.com> wrote:
> 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/
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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] help with media queries for email...mercy, mercy

2017-02-21 Thread Tom Livingston

I'll also add that what I said below is based on the assumption that
you want to reach the widest audience (number of different email
clients) as possible. If you know you have a captive audience with a
limited email client use (all recipients are using Outlook, for
example) then things may be a bit easier...

On Tue, Feb 21, 2017 at 3:07 PM, Tom Livingston <tom...@gmail.com> wrote:
> While it is great that it works for you and you've had success, Karl,
> I don't really recommend using anything other than tables. At least
> not until you are proficient in using tables (for email) and getting
> consistent results with them. I cannot find anything recent regarding
> html emails without tables after googling a bit. I recommend going
> through the lynda.com tut as you said and getting good at the basics,
> at least, before straying.
>
> HTML email is tricky and full of gotchas.
>
> Testing is the key. Lots of it. Use the services I recommended earlier
> to help with this.
>
> Good luck. [insert knowing, yet still maniacal laugh, here]
>
> ;-)
>
>
>
> On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers <k...@designdrumm.com> 
> wrote:
>> Stay away from tables is my recommendation. Use div or ul instead. Be sure 
>> to study up on the display property as you will be needing this 
>> understanding to make things look correctly and fit correctly.
>>
>> For background images you could use the background property, or use an img 
>> and absolute positioning with z-index. Also, set your CSS inline with the 
>> style attribute. Don't link style sheets and read up on baseurl.
>>
>> Just my 2¢
>>
>> Built a lot of HTML emails in my day and these tips work for me.
>>
>> HTH,
>> Best,
>> Karl
>>
>> Sent from losPhone
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399



-- 

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] help with media queries for email...mercy, mercy

2017-02-21 Thread Tom Livingston

While it is great that it works for you and you've had success, Karl,
I don't really recommend using anything other than tables. At least
not until you are proficient in using tables (for email) and getting
consistent results with them. I cannot find anything recent regarding
html emails without tables after googling a bit. I recommend going
through the lynda.com tut as you said and getting good at the basics,
at least, before straying.

HTML email is tricky and full of gotchas.

Testing is the key. Lots of it. Use the services I recommended earlier
to help with this.

Good luck. [insert knowing, yet still maniacal laugh, here]

;-)

On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> Stay away from tables is my recommendation. Use div or ul instead. Be sure to 
> study up on the display property as you will be needing this understanding to 
> make things look correctly and fit correctly.
>
> For background images you could use the background property, or use an img 
> and absolute positioning with z-index. Also, set your CSS inline with the 
> style attribute. Don't link style sheets and read up on baseurl.
>
> Just my 2¢
>
> Built a lot of HTML emails in my day and these tips work for me.
>
> HTH,
> Best,
> Karl
>
> Sent from losPhone

-- 

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] help with media queries for email...mercy, mercy

2017-02-21 Thread Tom Livingston

I'd have to *respectfully* disagree with some of the below. For
reasons like images being hidden by default in some email clients, I'd
recommend using live text as much as possible.

Also, I'd recommend sticking with px font-sizing for email client
compatibility and getting results that are more like you'd expect.

I do agree with background images being sketchy as far as support
goes. I'd suggest a band of that BG texture as an image above the text
headline as a safer layout and allowing live text still for headline
(which is important text IMHO). Of course, you could use a fallback
solid color if that's ok with you.

As always, all your mileages may vary.

Also, I'd recommend an email testing service like emailonacid.com or
litmus.com. We use emailonacid.com as it lets us use a url to test
from so you don't need to have to set up a blast to get your email
into the testing service.

HTH

On Tue, Feb 21, 2017 at 9:45 AM, Rod Castello <rodcastel...@gmail.com> wrote:
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
>
> I would offer more help with examples of code, but need to get to work.
>
> Rod Castello
>

-- 

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] help with media queries for email...mercy, mercy

2017-02-21 Thread Tom Livingston

That should be:

@media screen and (max-width: 640px) {
>  table{ width: 320px!important; }
> }



On Tue, Feb 21, 2017 at 8:47 AM, Tom Livingston <tom...@gmail.com> wrote:
> Ron,
>
> Looks to me like you closed the MQ before all of the styles, so the
> styles are working all the time. Also, it appears you aren't targeting
> anything and therefore not changing anything.
>
> for example:
>
> @media screen and (max-width: 640px) {
>  table: width: 320px!important;
> }
>
> Let me know if I can be of more help.
>
>
> On Tue, Feb 21, 2017 at 8:25 AM, Ron Zisman <ronzis...@mac.com> wrote:
>> karl,
>>
>> http://ricochet.org/plastics_feb20.html
>>
>> i’ve been trying to work with media queries. i think understand the basic 
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
>> head.
>>
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
>> container. when i apply the query, it goes liquid and won’t hold the 600 
>> measure.
>>
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
>> .no <http://litmus.no/> luck. i was hoping to get an extremely simple 
>> example.
>>
>>
>> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
>> its not from not trying. —thanks again,
>>
>> ron
>>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
>>>
>>> Ron,
>>> Quick and simple.
>>>
>>> Google: CSS Media Queries example
>>>
>>> Download, dissect and learn.
>>>
>>> GL!
>>>
>>> Best,
>>>
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>>
>>>
>>>
>>>
>>>> On Feb 18, 2017, at 7:14 PM, Ron Zisman <ronzis...@mac.com> wrote:
>>>>
>>>> hi all,
>>>>
>>>> http://ricochet.org/plastics_engineering.html
>>>>
>>>> i’m new to email, but most of the table coding went ok, but as i’m trying 
>>>> to make it responsive,
>>>> i need media queries. i understand the concept, but am having trouble with 
>>>> reality.
>>>>
>>>> a little direction would be appreciated.
>>>>
>>>> thank you in advance,
>>>> —ron
>>>> __
>>>> css-discuss [css-d@lists.css-discuss.org]
>>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>>> List wiki/FAQ -- 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/
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399



-- 

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] help with media queries for email...mercy, mercy

2017-02-21 Thread Tom Livingston

Ron,

Looks to me like you closed the MQ before all of the styles, so the
styles are working all the time. Also, it appears you aren't targeting
anything and therefore not changing anything.

for example:

@media screen and (max-width: 640px) {
 table: width: 320px!important;
}

Let me know if I can be of more help.


On Tue, Feb 21, 2017 at 8:25 AM, Ron Zisman <ronzis...@mac.com> wrote:
> karl,
>
> http://ricochet.org/plastics_feb20.html
>
> i’ve been trying to work with media queries. i think understand the basic 
> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
> head.
>
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
> container. when i apply the query, it goes liquid and won’t hold the 600 
> measure.
>
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
> .no <http://litmus.no/> luck. i was hoping to get an extremely simple example.
>
>
> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
> its not from not trying. —thanks again,
>
> ron
>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
>>
>> Ron,
>> Quick and simple.
>>
>> Google: CSS Media Queries example
>>
>> Download, dissect and learn.
>>
>> GL!
>>
>> Best,
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>>> On Feb 18, 2017, at 7:14 PM, Ron Zisman <ronzis...@mac.com> wrote:
>>>
>>> hi all,
>>>
>>> http://ricochet.org/plastics_engineering.html
>>>
>>> i’m new to email, but most of the table coding went ok, but as i’m trying 
>>> to make it responsive,
>>> i need media queries. i understand the concept, but am having trouble with 
>>> reality.
>>>
>>> a little direction would be appreciated.
>>>
>>> thank you in advance,
>>> —ron
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- 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/



-- 

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] Changing the Color of points

2017-01-02 Thread Tom Livingston

On Mon, Jan 2, 2017 at 10:11 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;
>
> }


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

Re: [css-d] Developing on an iPad? [OT]

2016-12-31 Thread Tom Livingston

I tried. I have Coda. My dev situation at work made it too much of a pain.
Your mileage may vary. If you can connect to your file remotely and
therefore use said remote environment to view the files - a web server -
then it may work for u.

On Sat, Dec 31, 2016 at 2:54 PM John J  wrote:

> Can anyone here who develops on an iPad kindly share how this is done?
>
>
>
> Thank

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

Re: [css-d] Entire div has disappeared, even though it is present in 'view source'

2016-11-18 Thread Tom Livingston

On Fri, Nov 18, 2016 at 7:19 PM, Tim Dawson <t...@ramasaig.com> wrote:
> Hello,
>
> I have a problem on a web site I've been running for some time. It has been
> working OK, but recently an entire  has ceased to display.
>
> You can see an example of the relevant page at:
> http://holidaymull.co.uk/bb-sw
> In the left-hand column under the Google map there should be a 
> containing about four 'adverts' - each with a thumbnail image and text
> underneath.
>
> The  shows up in 'View Source' and if I put some JS alerts into the
> script generating the div's content they will show too. But no heading and
> no adverts.
>
> There used to be no problem with this. I can only think that something I've
> changed elsewhere has caused it.
>
> I've noticed that in Document Inspector' there is no information shown under
> 'Rules' for the element "" (which is inside " id='sf-cont'>" which itself is in "). This seems very odd
> to me, but I can see no reason for it.
>
> I'm assuming so far that the problem must lie in the CSS because the PHP
> script is generating the content, it just seems to be hidden.
>
> Can anyone help me find the problem, please?


I am seeing JS errors in the console and when I inspect the area in
question, I am seeing some scripting.

-- 

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] animated gif has scrollbars

2016-11-11 Thread Tom Livingston

On Fri, Nov 11, 2016 at 2:03 PM, John J <cr8...@gmail.com> wrote:
> I placed an animated gif on a web page; the dimensions of the gif do not
> exceed the capacity of the containing div, yet I have scrollbars.  Link
> below.
>
> Is there a best practice for defeating scrollbars? Do we automatically get
> scrollbars with placed media unless we spec otherwise?
>
> Thank you!
>
> http://john-a-johnson.com/rokr.php


I'm seeing that as an iframe which could be the source of your
scrollbars. In latest Mac Chrome, I don't see any scrollbars.


-- 

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] order of rules in a single declaration

2016-10-14 Thread Tom Livingston

On Fri, Oct 14, 2016 at 3:06 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> Agreed. The parser doesn't care, but the browser will interpret and reorder 
> based on its settings/preferences.
>
>
> Best,
>
> Karl DeSaulniers


Bottom line, the page layout/display is not effected by the order of
declarations.

Thanks all.


-- 

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] order of rules in a single declaration

2016-10-14 Thread Tom Livingston

For clarity, I'll include my reply to Philippe, which I accidentally sent
only to him...

On Thu, Oct 13, 2016 at 11:34 PM Tom Livingston <tom...@gmail.com> wrote:

> >> Make any difference?
> >
> > No. The CSS parser doesn’t care.
> >
> > For the human eye aka readability of a stylesheet, that is another
> matter. Excellent fuel for violent flame wars.
> >
> > Philippe
> > --
> > Philippe Wittenbergh
> > http://l-c-n.com/
> >
>
> Oh dear. Then I'll take this as my answer and move on.
>
> Nothing more to see here.
>
>
> --
>
> 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] order of rules in a single declaration

2016-10-14 Thread Tom Livingston

Hmm. Ill try that. Never noticed that in my day to day.

Thanks.
On Fri, Oct 14, 2016 at 12:54 AM Karl DeSaulniers <k...@designdrumm.com>
wrote:

> The parser does care somewhat. Depends on the browser
> In my research I have found that they load aspects before dynamics.
>
> Loading the elements basic parameters first like color, background color
> then
> fonts, font size, line height then width, height and then margins, padding
> and then borders, transitions, shadows and then position, clip and display.
>
> I got this from the inspect element pane and how different browsers
> were ordering my css. If you have them out of order, safari would reorder
> them
> according to their spec and I had found that most other browsers treated
> this
> the same way and reordered them similarly.
>
> So it is a yes and no answer with a personal preference included.
> Try it for yourself. Put them in the order you want and see how Safari or
> chrome or firefox
> reorder them respectively.
>
> For example:
>
> div{
>width: 100%;
>margin: 10px 20px;
>padding: 0;
>position: relative;
>display: block;
> }
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Oct 13, 2016, at 10:32 PM, Philippe Wittenbergh <e...@l-c-n.com>
> wrote:
> >
> >
> >> On Oct 14, 2016, at 12:13 PM, Tom Livingston <tom...@gmail.com> wrote:
> >>
> >> Curious. Does the order of declarations within a single rule matter?
> >> Not specificity between rules.
> >>
> >> For example:
> >>
> >> div{
> >>position: relative;
> >>display: block;
> >>width: 100%;
> >>margin: 10px 20px;
> >>padding: 0;
> >> }
> >>
> >> as opposed to:
> >>
> >> div{
> >>display: block;
> >>margin: 10px 20px;
> >>padding: 0;
> >>position: relative;
> >>width: 100%;
> >> }
> >>
> >> Make any difference?
> >
> > No. The CSS parser doesn’t care.
> >
> > For the human eye aka readability of a stylesheet, that is another
> matter. Excellent fuel for violent flame wars.
> >
> > 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] order of rules in a single declaration

2016-10-13 Thread Tom Livingston

List,

Curious. Does the order of declarations within a single rule matter?
Not specificity between rules.

For example:

div{
 position: relative;
 display: block;
 width: 100%;
 margin: 10px 20px;
 padding: 0;
}

as opposed to:

div{
 display: block;
 margin: 10px 20px;
 padding: 0;
 position: relative;
 width: 100%;
}

Make any difference?

-- 

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] What causes the space at bottom of squares?

2016-09-22 Thread Tom Livingston

I would handle this on a case-by-case basis. But it's up to you.

If you make a global style, you may need to "undo" it when you don't
want them to be block. On the other hand, if you handle it
case-by-case, you may find yourself making images block frequently.

Glad I could help.

On Thu, Sep 22, 2016 at 12:20 PM, John J <cr8...@gmail.com> wrote:
> ^^ OK..doing that  does work; so  that when I need images to be inline, I'll
> have to handle it with stylesheets?  Is this a best practice, to declare
> images as block up in the area where we have our other resets?
>
> Thank you, Tom
>
> On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com> wrote:
>>
>> Are you saying to do this to my initial img tag so that this is universal?
>>
>> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com> wrote:
>>>
>>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote:
>>> > I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a
>>> > background color, and an image placed inside.
>>> >
>>> > Each of these "tiles" shows through the background color of about 3-4
>>> > pixels. I can not see what's allowing this. I have my styles for the
>>> > tiles
>>> > set at max-width:30%; height:auto;
>>> >
>>> > Can anyone see what the source of this unwanted space is?
>>> >
>>> > Thank you!
>>> >
>>>
>>>
>>> Images are inline elements. If you add a display:block; rule to your
>>> images, you can remove this gap.
>>>
>>>
>>> --
>>>
>>> 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/
>>
>>
>



-- 

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] What causes the space at bottom of squares?

2016-09-22 Thread Tom Livingston

On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote:
> I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a
> background color, and an image placed inside.
>
> Each of these "tiles" shows through the background color of about 3-4
> pixels. I can not see what's allowing this. I have my styles for the tiles
> set at max-width:30%; height:auto;
>
> Can anyone see what the source of this unwanted space is?
>
> Thank you!
>


Images are inline elements. If you add a display:block; rule to your
images, you can remove this gap.


-- 

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] using floats vs inline-block..

2016-09-19 Thread Tom Livingston

I tend to favor floats myself. The biggest issue I've run into is having to
remove the gap between items that are inline-block. I guess I'm just so
used to floats now that I tend to use them without thinking about it.

I do rely on inline-block more for horizontal navbars, which causes the gap
to be more of an issue.
On Mon, Sep 19, 2016 at 12:44 PM Nancy Johnson  wrote:

> I have been using display: inline block more than float:left/right
> when I want to display two divs side by side.
>
> I find it easier with less code even though I need to add
> vertical-align:top.
>
> My question is: am I alone in feeling this way?
> Why do grid systems within bootstrap or bourbon neat sill depend on floats.
>
> Thanks
>
> Nancy
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Bullets: Block + inline?

2016-09-16 Thread Tom Livingston

So on mobile, you will have a long scroll of separate groups of billeted
lists but at desktop you want the groups of billeted lists to be side by
side?

If so, you can float the lists ( < ul > ). Google 'CSS floats'.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] svg as background image in IE

2016-09-13 Thread Tom Livingston

> I'm suspecting malformed svgs at the moment. Let me see if I can beat
> them about the head and neck a bit first. I'll post with results... or
> more problems.
>
> Thanks for your time. I'll let you know.
>


So problematic images seems to have been my issue. The svgs started
out of Sketch, which we knew had export issues, but it appears it
creates svgs with some issues. The process I used was:

1. Export art from Sketch
2. Open in Illustrator and simplify the art and layers as much as
possible. I removed compound paths that were there from the Sketch
export, simplified the art and then - with the correct stacking of
layers - used pathfinder to "Remove Front" which creates a compound
path again.
3. Save-As from Illustrator as an svg (I know) with settings checked
(Unchecked "Responsive")
4. Ran the resulting svg through SVGOMG and saved as a new name (for
safety sake)
5. updated css to use new named file
6. Praised the Devine svg gods for showing me mercy at this hour

Tested successful in IE 9, 10 (Win 7 and 8), 11 and Edge.

Wow. That was a fight.

Thanks for looking at this if you did. Appreciate it.


-- 

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] svg as background image in IE

2016-09-13 Thread Tom Livingston

On Tue, Sep 13, 2016 at 9:47 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> Thanks Tom.
> How about the urls for your images?
> Can you give that?
>

I'm suspecting malformed svgs at the moment. Let me see if I can beat
them about the head and neck a bit first. I'll post with results... or
more problems.

Thanks for your time. I'll let you know.



-- 

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] svg as background image in IE

2016-09-13 Thread Tom Livingston

On Tue, Sep 13, 2016 at 9:21 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> Can we see the css that you are using?
>
> Best,

The images are showing horizontally squeezed in IE9 - IE10 using the
below code. I'm afraid I can't post a link, but here's the structure
and css:



1-800-000-
Contact Us
Live Chat


ul{
   list-style-type: none;
   margin: 30px 0 0 0;
   padding: 0 0 0 20px;
}
li{
@include source-reg;
@include font-size(24px);
line-height: 1.1;
padding-left: 50px;
}
.phone{
background-image: url("../img/icn-phone.svg");
background-size: 32px 50px;
background-position: 0 0;
background-repeat: no-repeat;
min-height: 50px;
}
.computer{
background-image: url("../img/icn-computer.svg");
background-size: 40px 32px;
background-position: 0 0;
background-repeat: no-repeat;
min-height: 35px;
}
.chat{
background-image: url("../img/icn-chat.svg");
background-size: 40px 32px;
background-position: 0 0;
background-repeat: no-repeat;
min-height: 35px;
}

-- 

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/

[css-d] svg as background image in IE

2016-09-13 Thread Tom Livingston

All,

OK, i've tried several things I've found but I cannot get svg
background images to be the right size or position in IE9 +. Some are
fine, some don't work at all.

Anyone got a suggestion?

-- 

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] trouble with responsive background banner

2016-08-23 Thread Tom Livingston

If there is nothing else in the container that you are applying the bg
image to, then the container height will be zero.


On Tuesday, August 23, 2016, Angela French <afre...@sbctc.edu> wrote:

> Hello,
> I have a banner I am trying to run across the entire page and have it get
> smaller as the device gets smaller.  My plan is to make a different
> background image when I get down to cell phone size.
>
> I had no problems accomplishing what I want when I was using an  tag,
> but now that it is a background image I cannot get the image to render
> unless I put an explicit height on it.
>
> Here is my current css:
>
> #surveylinkbar {
>
> background-image: 
> url('/_resources/images/websurvey-banner4.gif')
> ;
> background-repeat:no-repeat;
> background-size:contain;
> background-position:center;
>
> }
>
> Here is my development link: http://www.dev.sbctc.edu/_
> testing/test-survey-bar-4.aspx . Greatly appreciate any advice.
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu <javascript:;><mailto:afre...@sbctc.edu <javascript:;>>
> www.sbctc.edu<http://www.sbctc.edu/>
>
> __
> 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/
>


-- 

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] a:hover state in different browsers

2016-08-12 Thread Tom Livingston

On Fri, Aug 12, 2016 at 9:16 PM, Philippe Wittenbergh <e...@l-c-n.com> wrote:
>
>> On Aug 13, 2016, at 9:05 AM, Tom Livingston <tom...@gmail.com> wrote:
>>
>> I personally wouldn't use rem's for all of the units involved with
>> that structure. rem is based on the root element's font size, making
>> it - I assume - dependent on how each browser renders a font, which is
>> where your slight differences come from.
>
> Rem unit is perfectly fine in this case, as it computed value is based on the 
> font-size (independently of which font-family is used). The cross-browser 
> default is 16px for any given font, last I checked.
>
> OTOH, the used font-family may affect where elements end up on the page, at 
> paint-time. A small font like Times will use less vertical pixel space then a 
> large font like Verdana.
>
> Philippe


The differences in font rendering between browsers, even with the same
font specified, wouldn't position things differently?



-- 

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] a:hover state in different browsers

2016-08-12 Thread Tom Livingston

On Fri, Aug 12, 2016 at 7:52 PM, John J <cr8...@gmail.com> wrote:
> At the link below, I'm having trouble getting the hover state to look the
> same across browsers. On hover, there  should be a red line under the
> hovered-over item as wide as the thin gray line below it, as thick as that
> line is.
>
> The thickness seems to match, but the positioning is off, browser to
> browser.
>
> Safari and Firefox show the hover-state line a bit too low; Chrome Canary
> shows it exactly where it needs to be.
>
> Am I working against myself, trying to do something that's too tricky by
> trying to get a hover element to line up with, basically the bottom of the
> header which is 3 parents up from the nav?
>
> Thank you for any clues!
>
> John
>
>
> http://john-a-johnson.com/contact.php


I personally wouldn't use rem's for all of the units involved with
that structure. rem is based on the root element's font size, making
it - I assume - dependent on how each browser renders a font, which is
where your slight differences come from. Also, the border widths you
have set are different.



-- 

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] CSS pseudo-class for source of :target

2016-08-12 Thread Tom Livingston

Right, sorry. Was thinking about it wrong.


-- 

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] CSS pseudo-class for source of :target

2016-08-12 Thread Tom Livingston

On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> Hi Andre,
> Why would you target the element for its href if you already have an id?
> Not sure I am understanding that part.
>
> For checking the href, like Tom said.
>
> a[href*='#foobar'] {
> color: red;
> }
>
> or if you know #foobar will always be at the end of the url you can use the $
>
> a[href$='#foobar'] {
> color: red;
> }
>
> or if you wanted to color per website in the url
>
> a[href^='http://example.com'] {
> color: red;
> }
>
> website url and hash (for those long blog urls =)
>
> a[href^='http://example.com'][href$='#foobar'] {
> color: red;
> }
>
> Then there is checking both id and href
>
> a#foobar[href*='#foobar'] {
> color: red;
> }
>
> if it's a link that could possibly be more than one on a page, then I would 
> use classes not an id.
>
> a.foobar[href*='#foobar'] {
> color: red;
> }
>
> HTH,
>
> Best,
>
> Karl DeSaulniers


If I am not mistaken, and for clarity, you would not include the '#'
in the value of all the above examples.



-- 

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] CSS pseudo-class for source of :target

2016-08-11 Thread Tom Livingston

>>
>> - Is there really no such pseudo-class?
>> - Would this be technically impossible?
>> - Has this been proposed before?
>> - Any tips for proposing one? ;P
>>
>> Cheers
>> Andre Schmidt
>
>
> I accidentally replied off list with...
>
> a[class="table-of-contents"]{
>  color: red;
> }
>
> Google "Attribute Selectors"
>
>
>
> But more in line with the OP's actual question:
>
> a[href*="table-of-contents"]{
>  color: red;
> }
>
>
> HTH
>

As with many things, your browser support needs may vary. I believe
this will work back to IE8 or 9. caniuse.com listed other attribute
selectors but I didn't see this one specifically listed.


-- 

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] CSS pseudo-class for source of :target

2016-08-11 Thread Tom Livingston

On Thu, Aug 11, 2016 at 11:46 AM, Andre "Osku" Schmidt
<andre.osku.schm...@gmail.com> wrote:
> #Hello.World,
>
> there seems to be no CSS pseudo-class that represents the element with an
> href matching the fragment identifier of the URI of the document. kinda
> like the source of :target [0].
>
> For example with :target we can style the element that has id="#foobar"
> when the browser URL is http://example.com/page.html#foobar, with :source
> we could style the element that has href="#foobar".
>
> I would like to easily style the link element in my table-of-content.
>
> So before i implement this with javascript, i thought to ask here:
>
> - Is there really no such pseudo-class?
> - Would this be technically impossible?
> - Has this been proposed before?
> - Any tips for proposing one? ;P
>
> Cheers
> Andre Schmidt


I accidentally replied off list with...

a[class="table-of-contents"]{
 color: red;
}

Google "Attribute Selectors"



But more in line with the OP's actual question:

a[href*="table-of-contents"]{
 color: red;
}


HTH


-- 

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] Flexbox struggle

2016-08-11 Thread Tom Livingston

On Thu, Aug 11, 2016 at 9:42 AM, Philippe Wittenbergh <e...@l-c-n.com> wrote:
>
>> On Aug 11, 2016, at 10:02 PM, Chris Rockwell <ch...@chrisrockwell.com> wrote:
>>
>> … but flex-end,
>> as I understood it, should take care of this.  It's like flex-end doesn't
>> respect that you've changed the flex-direction to column.
>
> No, not in this case. “align-items” and “align-self” apply only in the 
> cross-axis direction. In the case of `flex-flow:column` that is the 
> horizontal axis.
>
> The example in the spec is quite clear, I think.
> https://drafts.csswg.org/css-flexbox/#align-items-property
>
>> On Aug 11, 2016, at 10:05 PM, Tom Livingston <tom...@gmail.com> wrote:
>>
>> Odd that, unlike float in a flex row situation, margin in
>> this case is not overridden.
>
> Hmm… Float is a completely different kind of layout model then flex. Can’t 
> really imagine how the two can co-exist. Margins on the other hand are not a 
> layout model, but a spacing thing that eventually affect  overall layout. Fun 
> things to be had with `margin: auto 1em` assuming `flex-flow: row` ( I solved 
> some edgy problem with that today).
>
>
>
> Philippe
>

I'm happy I got as close as I did! LOL

Thanks again!


-- 

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] Flexbox struggle

2016-08-11 Thread Tom Livingston

>>
>> Perhaps:
>>
>> a p:last-child {
>> margin-top: auto;
>> }
>>
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
>>


This was the answer. Thank you! I'll have to tuck that tidbit away for
the future. Odd that, unlike float in a flex row situation, margin in
this case is not overridden. Like I said, I don't have a firm grip on
flex yet.

Thanks all!



-- 

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] iPad differences

2016-08-11 Thread Tom Livingston

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

-- 

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] iPad differences

2016-08-11 Thread Tom Livingston

It most definitely is not the same.



On Thursday, August 11, 2016, Crest Christopher <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/
> > __
> > 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 <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/



-- 

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/

[css-d] Flexbox struggle

2016-08-10 Thread Tom Livingston

Listers,


Can't post a link yet, but maybe you can still help me as I still
don't have a firm grip on flex yet...

Given:


 
  
   
   
   
  
  
   
   
   
  
  
   
   
   
  
 


div{
display:flex;
flex-direction: row;} sets my s to be the same height as 
based on tallest. Perfect.

a{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;} sets my s as flex containers also.

a p:last-child{align-self: flex-end;} to get the last  to stick to
the bottom of s, but this isn't working. Where am I messing it up?

Thanks

-- 

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] Background images for element within MQ ?

2016-08-05 Thread Tom Livingston

No. This...

body {
 background-image: url('my300pximage.jpg');
}

@media and (min-width: 700px) {
 body {
  background-image: url('my700pximage.jpg');
 }
}

...is not Sass, but it does what you described.


-- 

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] Background images for element within MQ ?

2016-08-05 Thread Tom Livingston

On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell <ch...@chrisrockwell.com>
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.


-- 

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

2016-08-05 Thread Tom Livingston

On Fri, Aug 5, 2016 at 11:47 AM, Chris Rockwell <ch...@chrisrockwell.com>
wrote:

> Set top:0 in .colorbar-link.
>

Bingo! Makes sense. Thanks!

-- 

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/

[css-d] Transform

2016-08-05 Thread Tom Livingston

List,

I'm trying to add a hover to a block-styled link. I want to transition the
'top' position of the element on hover with easing but I can't get it to
happen with the easing. Where am I going wrong?

.colorbar-link{
position: relative;
background-position: 96% 50%;
background-repeat: no-repeat;
background-size: 19px 35px;
padding: 25px 45px 25px 5%;
transition: all 0.5s ease;
box-shadow: 0 5px 15px rgba($grey, .8);
}

.colorbar-link:hover{
text-decoration: none;
top: -2px;
box-shadow: 0 11px 20px rgba($grey, .6);
}

-- 

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] Overwrite one break point earlier break point ?

2016-07-30 Thread Tom Livingston

MQs are understood by I.E. 9 and up, for and chrome and safari.



On Saturday, July 30, 2016, Crest Christopher <crestchristop...@gmail.com>
wrote:

> 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
> <javascript:_e(%7B%7D,'cvml','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 reg ular CSS
> ?
> __
> 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
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
>

-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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] Overwrite one break point earlier break point ?

2016-07-30 Thread Tom Livingston

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

-- 

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] Cascade Image override ?

2016-07-28 Thread Tom Livingston

On Thursday, July 28, 2016, Philippe Wittenbergh <e...@l-c-n.com> wrote:

>
> > On Jul 29, 2016, at 12:39 AM, Tom Livingston <tom...@gmail.com
> <javascript:;>> wrote:
> >
> > This:
> >
> > background-image:none,none,url("images/bg_paper.Hi.jpg");
> >
> > should work. Same as I did here:
> >
> > @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;
> >
> > }
> > }
> >
> > Just use the correct order and positioning for the new image.
>
> You don’t need  to specify the “none” in your second block
>
> background-image is a list; the second rule completely overwrites the
> first rule (the second rule is a list which contains only one item).
>
> thus the following will only display one background-image at the specified
> position when the viewport is larger.
>
> @media (min-width:900px) {
> .test {
> background-image: url("img/img4.jpg");
> background-position: 10px 10px;
> }
> }
>
> If background-position is _not_ specified inside the second block, it will
> of course inherit from the first block, and will use the first specified
> position in that rule. The same applies to background-size,
> background-repeat, etc.
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/



Thanks Philippe. Good to know.





-- 

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] Cascade Image override ?

2016-07-28 Thread Tom Livingston

On Thu, Jul 28, 2016 at 10:42 AM, Karl DeSaulniers <k...@designdrumm.com>
wrote:

> Hi Crest,
> I don't think you can do it that way.
>
> > background-image:none,none,url("images/bg_paper.Hi.jpg");
>
> For pseudo resetting of background-image you have to declare the reset
> separate and before the new background-image with url(I believe).
> try this.
>
> ...
> background-image:none;
> background-image:url("images/bg_paper.Hi.jpg");
> ...
>
> That way it cascades.
> Initially clearing with none,
> then sets with the new url.
>
> Otherwise you could possibly try..
>
> background-image:url(''),url(''),url("images/bg_paper.Hi.jpg");
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
This:

background-image:none,none,url("images/bg_paper.Hi.jpg");

should work. Same as I did here:

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

}
}

Just use the correct order and positioning for the new image.



-- 

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] Cascade Image override ?

2016-07-27 Thread Tom Livingston

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;

}
}

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

-- 

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/

1 2 3 4 5 6 7 8 9 10 >

1 - 100 of 1154 matches

Mail list logo