This is an interesting issue where we created a custom template for Stonehenge Consulting – Building Certifiers using the popular Mailchimp newsletter mailing service. Everything looked fine in the Mailchimp preview, however when the test message arrived in my gmail inbox it seemed to have extra padding around certain images in the template.

I looked over the code and removed css trying to work out what the issue was. It looked fine in the source code. Then I realised that Mailchimp was exhibiting the same issues as GMail was when Mailchimp was not in preview mode. This would make debugging the issue a lot easier. After uploading several changes I realised that there was an issue with the way GMail was handling images. If an image was alone inside a <TD> table tag, it seemed to get the padding.

I fixed it by creating a new “display:block” css style that would be applied to the offending images causing them to stop padding in Mailchimp, Hotmail and Gmail.

[css]
.fixImage {
display:block;
}[/css]

Then apply it to your images

[html][/html]

Or if you want all images to be display :block then you could use this style. This could break some layouts though

[css]img {
display:block;
}[/css]

Bear in mind that if you apply this to images that need to sit next to each other they will be pushed to the next line down.

Now one of the best things about MailChimp is that if you apply a style in the header of your template, Mailchimp will produce a final template with all the styles included in-line too. That means that with mail clients like Gmail that tend to strip the header css out then your template will work just fine.

For the example above, Mailchimp would produce something like this…

[crayon][/crayon]

If you don’t have the time or skills to make your own template remember that OJ Networks can create a custom Mailchimp newsletter template for your business. Contact us today!