0

So i was tasked to create a newsletter about raising money for cancer. I naturally accepted but i ran into a problem with the web-based email clients. ( i tried outlook.com and gmail.com ) the web based client dont seem to accept some of my styling.

In the 'regular' email clients everything shows as its supposed to. Screenshot to clarify.

In the web based i get the following.

Now i did some googling of my own and i found a list containing all the css support that multiple clients give : http://www.campaignmonitor.com/css/

My code is the following. (i cant paste it all so i'll just explain the most and then paste a part). The content exists of three tables. The header, body, and footer. The header and body share a gradient background and the footer has its own gradient background but it comes from the same code (simply called the class containing the styles again). Now i was wondering if there is a method to get my first result in all of the email clients. If this is not possible i shall accept the answer that gives the result that best reproduces the requested result.

Edit

To get the background of the footer to extend up and under the body i used a negative margin. Since this is not the best and secure way of coding could this cause one of the problems?

To sum up the things that are different:

  • To much space in between the footer and body. (probably because of the code:

margin-top:-100; padding-top:100px;

  • Background gradient of the footer doesn't show.
  • Font styling changes in the content ( This could be browser related though(dont count this as part of the question but if you have a quick fix for this please share)).
Marco Geertsma
  • 803
  • 2
  • 9
  • 28
  • Ok so further testing showed that the negative margin does not work in the mail clients but does work in the web clients. Which is weird because it used the be the other way around. More research! To the mancave! – Marco Geertsma Apr 16 '14 at 08:42

1 Answers1

2

Welcome to the world of html email design. I suggest you check out these resources to help you get up to speed. That way you will get less nasty surprises when half your code doesn't work when testing.

In most clients CSS3 doesn't work, so you may have to go with an image for your background. a 1px x 500px repeated in x would work fine. The only way to get backgrounds working in Outlook is either in the body tag (a whole email background) or using VML, which allows you to apply backgrounds per element. Check out backgrounds.cm for the VML solution.

For the font changes, you need to declare the font in every <td> or you can do it with <font> or <span> tags. Here is an example:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:30px;" bgcolor="#EEEEEE">
      This is 14px Arial in black<br>
      <font style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #FF5555;">20px Arial in red</font>
    </td>
  </tr>
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:30px;" bgcolor="#DDDDDD">
      Unfortunately I have to put my font css inline here too, otherwise some clients will default to default (in Outlook this is Times New Roman)<br>
    </td>
  </tr>
</table>
Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • Yes but the thing is, it got it to work on every single email client except outlook and the web version of gmail. I'm not gonna re-do all my code because of that. Is there a way to get around this? Maybe add some code or something that looks like the way it's supposed to? – Marco Geertsma Apr 16 '14 at 14:19
  • For Outlook VML is the only way to accomplish background images or gradients, just tweak the code from backgrounds.cm and wrap it around your current content, it isn't much of a change, providing you are using tables (as you should be). – John Apr 16 '14 at 15:45