CODEWITHSUNDEEP
htmlmailchimp
egg
egg

Reputation: 373

image alignment issues with mailchimp/email clients

using Mailchimp, I am trying to add a header to my template + a small icon. The layout should be like this:

HEADER TEXT HERE - small icon here

The small icon should be horizontally aligned with the header text. If i just drag and drop the image in, that doesn't work at it makes the image bottom aligned.

I tried adding the section as a block of code, like this:

<div class="mcnTextContent">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" style="color:#606060; font-size:15px; line-height:100%; padding-top:10px; padding-right;0px; padding-bottom:0px; padding-left:17px;"><strong>MY HEADER HERE</strong></td>
    <td style="padding-top:0px; padding-right:0px; padding-bottom:0px;">
      <img src="myimagehere.jpg" class="captionImage mcnImage" style="display:block; max-width:30px;"/>
    </td>
  </tr>
</table>
</div>

In mailchimp, it looks correct.

However, in gmail the alignment of the text is wrong (padding seems to be ignorned). In outlook, the padding is OK, but the image size formating is ignored, as is the text style.

Any ideas on how to fix or workaround this? Thanks.

Upvotes: 0

Views: 3262

Answers (1)

ErstwhileIII
ErstwhileIII

Reputation: 4863

You might consider making the "header" you want into an image (e.g. using PhotoShop) to exactly control what you want!

Upvotes: 1

Related Questions