Gmail css margin not working

Question

I am building an email and I need an image ( a call to action button) to be on the top of another, with he following code it's only working in few clients:

<tr>
    <td align="center" width="660" height="457" valign="top"><img width="660" height="457" style="display:block; vertical-align:top; margin:0; padding:0; outline:none; border:none;" src="image_1.jpg" />
    <a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="341" height="56" style="display:block; vertical-align:top; margin-top:-300px; padding:0; outline:none; border:none;" src="cta.png" /></a></td>
</tr>

Is there a better way of doing this?

Answer 1

在Gmail中，使用padding而不是margin来padding空格，就像Diodeus提到的campaignmonitor是很好的资源

Answer 2

Looks like you are trying to work around the fact that email doesn't support background images in tables (consistently across clients anyway). Clever idea with the margin-top:-300; , but it seems like it isn't working as hoped. (css margin isn't supported across the board).

The only way I know of to get the desired layout is to cut the background image up into smaller blocks:

<table width="660" border="0" cellpadding="0" cellspacing="0">
  <tr>    
    <td width="660" colspan="3">
      <img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
  <tr>    
    <td width="60">
      <img width="60" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
    <td width="300">        
      <a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="cta.png" /></a>
    </td>
    <td width="300">
      <img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
  <tr>    
    <td align="center" width="660" colspan="3">
      <img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
</table>

Alternatively you could just make one big image and do image mapping, but that probably isn't the best practice for a call to action.

Answer 3

Positioning and many other CSS features that may cause content to jump or leak-out of the client area on many mail clients is restricted. Therefore, positioning elements on top of each other is impossible on many mail clients.

For web-based clients, most of this is deliberate to prevent emails from spoofing client features. For MS-Outlook it's a matter of it using the ever so crappy MS-WORD rendering engine.

Here's a good guide to what you can use.

http://www.campaignmonitor.com/css/