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  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 Karl DeSaulniers 
Thanks Tom.
How about the urls for your images?
Can you give that?

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Sep 13, 2016, at 8:31 PM, Tom Livingston  wrote:
> 
> On Tue, Sep 13, 2016 at 9:21 PM, Karl DeSaulniers  
> 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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.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  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/

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

2016-09-13 Thread Karl DeSaulniers 
Can we see the css that you are using?

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Sep 13, 2016, at 7:16 PM, Tom Livingston  wrote:
> 
> 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/

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