GMail, MailChimp adding spacing between images in tables
css, gmail, mailchimp
Solution
It looks like Gmail is stripping out the style attribute, because it doesn't like something.
A few things to try:
1) Remove the extra space at the beginning of your style declaration:
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block;">
2) Specify `!important`: (reference:http://www.campaignmonitor.com/blog/post/3652/gmail-strips-out-inline-css)
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block !important;">
3) Try adding `line-height` to the containing `td` element: (reference: http://www.webdevdoor.com/html-css/html-email-development-tips/)
<td style="line-height:0px;">
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block;"></td>
One more to try
4) Add `width="700"` attribute (maybe toss `height` in as well) to `img` tag and only specify `display:block;` in `style` attribute:
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
width="700" height="665" style="display:block;">
Here's another one
5) The HTML5 doctype can cause rendering problems. Try using this instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Last one...
6) Just noticed that you set `mc:allowdesigner=""` and `mc:allowtext=""`, what happens if you remove the `=""` from those two?
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner mc:allowtext
style="width:700px; display:block;">
Hopefully, one of these will work for you.
Problem
I'm having trouble with email formatting for emails received in the GoogleMail web client. Space is added after the images in the table making gaps in my content, exactly the same as this question - Gmail displaying gaps between images. Adding the inline style 'display: block;' fixes the issue in the MailChimp preview. However the inline image styles are being removed at some point between me previewing them in the MailChimp and receiving them in my inbox, re-adding the inline CSS manually fixes it again so that's definitely the issue. Style in MailChimp Template ``` <img src="" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" style=" width: 700px; display: block;"> ``` Style when read by GoogleMail ``` <img src="IMAGE_PATH" alt="" border="0" width="700" height="665"> ``` Is there a reason this is happening? Is it on MailChimps or GoogleMails side?