Menu
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?
647
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.
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
