Can't seem to make my three stop gradients through the advanced editor appear in test emails.

SOLVED
Go to solution
TimL059
Real Estate

Can't seem to make my three stop gradients through the advanced editor appear in test emails.

I have been trying to make a simple bar which fades in and out. I am doing this via a three stop linear gradient. It is a pretty basic task, and I have tested it and found it functional in chrome, firefox, etc. When I preview my email, it appears correctly as well, however when I send out the email, the gradient does not appear (observed on mobile, outlook application, gmail client in firefox.) 

For reference, my relevant code for this task was 

<head>

#gradient{
background: -moz-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
background: -webkit-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
background: -o-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
background: -ms-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
width:400px;
text-align: left;
line-height: 1px;

</head>

 

<body>

<table>

<td id="gradient">

&nbsp;

</td>

</table>

</body>

 

After a while troubleshooting this with no dice, I tried out a xmlns gradient instead, by putting in this code.

<table style="margin-bottom:10px">
<svg width="400" height="4" viewBox="0 0 400 4"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<linearGradient id="gradient">
<stop offset="5%" style="stop-color: #f3f3f3;"/>
<stop offset="50%" style="stop-color: #ff0000;"/>
<stop offset="95%" style="stop-color:#f3f3f3;"/>
</linearGradient>
</defs>

<rect width="400" height="4" style="fill: url(#gradient); stroke:#f3f3f3"/>
</svg>
</table>

.

 

Again, I found it functioning when I tested it as html, and again it works in the constant contact preview screen, however it does not function when emailed out.  Oddly, the same situations did work when I used a two stop gradient instead of a three stop gradient. This means I could work around the issue by putting two two stop gradients back to back, however I am worried about different clients treating the space between the two gradients differently.

 

Any help would be appreciated.

1 ACCEPTED SOLUTION
Adrienne_B
Employee

Hi @TimL059

Thank you for reaching out to the Constant Contact Community. It's my pleasure to assist you today.

 

I'm sorry for the issue you are encountering.I know how important it is for your emails to display the same on your emails as the preview. While we don't directly support custom HTML in the Community but what I have done is sent this up to our advanced tech support team so that they can reach out to you directly to discuss the issue. They are back in the office Monday, you may also reach out to them directly by calling our Support line

 

In the meantime, you may reach out to us here in the Community for any further questions. Thank you and have a great day!


Adrienne B.
Community & Social Media Support

If you find my post helpful, and it answers your question, please mark it as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.

Increase your profitability by integrating your email marketing and social media.  Download this guide and learn how you can achieve great results with email marketing and social media combined!

View solution in original post

1 REPLY 1
Adrienne_B
Employee

Hi @TimL059

Thank you for reaching out to the Constant Contact Community. It's my pleasure to assist you today.

 

I'm sorry for the issue you are encountering.I know how important it is for your emails to display the same on your emails as the preview. While we don't directly support custom HTML in the Community but what I have done is sent this up to our advanced tech support team so that they can reach out to you directly to discuss the issue. They are back in the office Monday, you may also reach out to them directly by calling our Support line

 

In the meantime, you may reach out to us here in the Community for any further questions. Thank you and have a great day!


Adrienne B.
Community & Social Media Support

If you find my post helpful, and it answers your question, please mark it as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.

Increase your profitability by integrating your email marketing and social media.  Download this guide and learn how you can achieve great results with email marketing and social media combined!

View solution in original post