Toggle sidebar

Having trouble with some mailchimp newsletter coding

Sort by date Sort by votes
D

deadgoodundies

Free Member
Aug 1, 2009
850
170
Shrewsbury
I'm banging my against the wall on this one.
I use mailchimp for our newsletters and no matter what I do if the newsletter is viewed in gmail then there are gaps between the image blocks.
I've googled to see if I can find the issue and i've followed the instructions of using style="display:block" on the images but no go.

Anyone want to take a look at the code and see if there is something i'm totally missing (even tried copying the code if someone elses newsletter that viewed ok in gmail but as soon as I do it , gaps). what little hair I have left is slowly disappearing more :)
cheers

Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>*|MC:SUBJECT|*</title>
</head>
<body style="margin:0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td valign="top">
      <table width="691" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="vertical-align:top" >
<!--------TOP TEXT------->         
          <tr>
          <td colspan="2">
                <table width="691" border="0" cellspacing="0" cellpadding="0" bgcolor="#fbfaf8">
                      <tr>
                        <td width="691" height="30" valign="bottom" bgcolor="#fcfbf8" align="center">
                        <div style="font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#797979; background-color:#fbfaf8; line-height:18px; margin-top:10px;">
                        If your newsletter is not displaying correctly please <a href="*|ARCHIVE|*" style="color:#797979; text-decoration:underline;">click here</a> to view it in your browser.<br />Add <a href="mailto:[email protected]" style="text-decoration:none; color:#797979;"><strong>[email protected] </strong></a>to your safe list.</div></td>
                      </tr>
             </table>
          </td>
          </tr>
<!--------END TOP TEXT------->         
<!--------TOP NAV------->         
                    <tr>
           <td colspan="2">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><a href="http://www.deadgoodundies.com" title="Deadgoodundies" target="_blank" style="text-decoration:none; color:#797979"><img src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/deadgoodundies_logo.gif" alt="DEADGOODUNDIES" width="300" height="44" hspace="0" vspace="10" border="0" style="display:block; text-decoration:none; color:#797979; line-height:0" /></a></td>
                  </tr>
             </table>
          </td>
          </tr>
                    <tr>
                      <td><img src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/uk_delivery.png" alt="FREE UK SHIPPING" width="346" height="35" border="0" style="display:block; text-decoration:none; color:#797979; line-height:0"/></td>
                      <td><img src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/international_delivery.png" width="345" height="35" alt="FREE WORLD DELIVERY" border="0" style="display:block; text-decoration:none; color:#797979; line-height:0"/></td>
                    </tr>
          <tr>
          <td colspan="2">
              <table width="0" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
               <td> <div style="font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#797979; background-color:#fbfaf8; line-height:18px; margin-top:10px;"><a href="http://www.deadgoodundies.com/style/mens-underwear/boxers-boxer-briefs/" target="_blank" style="color:#000000; text-decoration:underline;">BOXER BRIEFS</a> | <a href="http://www.deadgoodundies.com/style/mens-underwear/briefs/" target="_blank" style="color:#000000; text-decoration:underline;">BRIEFS</a> | <a href="http://www.deadgoodundies.com/style/jockstraps/" target="_blank" style="color:#000000; text-decoration:underline;">JOCKSTRAPS</a> | <a href="http://www.deadgoodundies.com/style/mens-underwear/strings-thongs/" target="_blank" style="color:#000000; text-decoration:underline;">THONGS</a> | <a href="http://www.deadgoodundies.com/style/mens/t-shirts-vests-tops/" target="_blank" style="color:#000000; text-decoration:underline;">T-SHIRTS</a> | <a href="http://www.deadgoodundies.com/style/long-johns-winter-thermal-underwear/" target="_blank" style="color:#000000; text-decoration:underline;">THERMALS</a> | <a href="http://www.deadgoodundies.com/style/mens/lounge-nightwear-afterwear/" target="_blank" style="color:#000000; text-decoration:underline;">ROBES</a> | <a href="http://www.deadgoodundies.com/style/mens/swimwear-beachwear/" target="_blank" style="color:#000000; text-decoration:underline;">SWIMWEAR</a> | <a href="http://www.deadgoodundies.com/style/sale-outlet/" target="_blank" style="color:#9F0000; text-decoration:underline;"><strong>SALE OUTLET</strong></a></div></td>
               </tr>
            </table>
          </td>
          </tr>
          <tr>
            <td colspan="2"><div style="font-size:8px; font-family:Arial, Helvetica, sans-serif; color:#797979; background-color:#fbfaf8; line-height:18px; margin-top:10px;"> *|FACEBOOK:LIKE:https://www.facebook.com/pages/Deadgoodundiescom/117711301621063|* *|TWITTER:TWEET|* </div></td>
          </tr>
<!--------END TOP NAV-------> 
        
  <!-------- MAIN CONTENT 1------->
              <tr>
                <td colspan="2"> <img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/placeholder_691.gif" class="fixImage" mc:label="image" mc:edit="pic1" />
            
              
              
              </td>
            
  <!-------- MAIN CONTENT 2------->
          
        
        <tr>
           <td colspan="2"> <img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/placeholder_691.gif" class="fixImage" mc:label="image" mc:edit="pic2" /></td>
        </tr>
        
  <!-------- MAIN CONTENT 3------->
          <tr>
              <td colspan="2"><img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/placeholder_691.gif" class="fixImage" mc:label="image" mc:edit="pic3" /></td>
        </tr>
        
 <!-------- MAIN CONTENT 4------->
          <tr>
              <td colspan="2">
                  <table border="0" cellpadding="0" cellspacing="0">
                      <tr>
                          <td><img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/placeholder_691.gif" class="fixImage" mc:label="image" mc:edit="pic4" /></td>
                                             </tr>
              </table>
          </td>
        </tr>
        
         <tr>
              <td colspan="2"><img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/placeholder_691.gif" class="fixImage" mc:label="image" mc:edit="pic5" /></td>
        </tr>
        
        <tr>
           <td colspan="2"><img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/placeholder_691.gif" class="fixImage" mc:label="image" mc:edit="pic6" /></td>
        </tr>
      
        <tr>
          <td colspan="2"><img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/placeholder_691.gif" class="fixImage" mc:label="image" mc:edit="pic7" /></td>
        </tr>
        <!--------END MAIN CONTENT------->

              <tr>
              <td colspan="2">
                <table width="0" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1ede8">
                  <tr>
                       <td><img style="display:block; line-height:0" border="0" src="http://gallery.mailchimp.com/9e4561f874958807296d640d2/images/bottom_spacer.gif" width="691" height="35" /></td>
                  </tr>
                  <tr>
                  <td><!-- editable block --> 
    <div style="font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#797979; background-color:#fbfaf8; line-height:18px; margin-top:10px;" mc:edit="content_1"><br>
      
      
      </div> 
    <!-- /editable --></td>
                  </tr>
                </table>
              </td>
              </tr>
      </table>
</td>
</tr>
</table>

</body>
</html>
 
No luck with that i'm afraid.
I'm sure it's got something to do with the mailchimp tags itself as if I hardcode the image src in then no problem it's only when you use the mailchimp image tags (so you have your template and then you can upload the images to the right places within mailchimp)
 
Upvote 0
I'm purely guessing here as it's difficult to see what the problem is without looking at it. Have you tried adding "padding:0px;margin:0px;" to an individual image tag?
 
Upvote 0
deadgoodundies said:
Thanks 123, i've already got the style=”display:block” in the code
Click to expand...

Sorry I did miss that bit
I would suggest (just because it is late now) go on Google Search and use this search criteria:

mailchimp image blocks+gmail issues

It seems to bring up pages with similar issues, but you may have already done this, and read these pages. Let us know how you get on though...
 
Upvote 0
Yup sorry that's what i've been doing but they all refer back to using the style block.

I did fix it once by using line height 50% BUT it messes up the text if you have show images turned off.
 
Upvote 0
Have you tried

img { displayblock:0;
}

in the style tag?

I had the exact same issue, using style="display:block" worked though... Maybe write it exactly as is with two "?
 
Upvote 0
Ok no matter what I do using the
Editable Image Area Tag for Mailchimp for example
<img mc:edit="postcard" style="max-width:600px;" />

Will give the gap below in gmail

I've worked out a dirty fix which stops it happening which is to use
The editable content area tag instead i.e
mc:edit="section-name"

That opens up a WYSIWYG edtiorfor entering text but you can also select the image icon and from there upload your image.
For some reason that fixes the problem with the gap in gmail BUT it also knocks the template out (not in the final send) of line because of the indicator borders

I'm sure that's not the proper way to do things but at least it works
 
Upvote 0
You do realise that a lot of email client block images, ignore html/css and do all sorts of other wied stuff. In fact you can pretty much take it for granted that what you see is not what I see. The more you force an email template to adopt a perticular format the less chance there is of it working when it gets to the other end.

So speaketh the voice of gloom
 
Upvote 0
Hence why we run it through the inbox inspection on mailchimp which shows what it looks like through lots of email clients and then also check it on our own hotmail, yahoo, gmail accounts and then through thunderbird and outlook here as well.
 
  • Like
Reactions: fisicx
Upvote 0
Which is great if it wasn't for the fact that the clients often block images by default. I use squirrelmail which even ignores HTML.
 
Upvote 0
Well there isn't any getting around that unless you just send text only emails. best is to mix text and graphics (and have a plain text version as well)
Most email clients that i've used have a "click here to show images" so blocked by default but option to view them and if someone has subscribed to our newsletter list I think we can safely assume that they want to see what's in the newsletter
 
  • Like
Reactions: fisicx
Upvote 0
After spending 30 mins on livechat support with mailchimp it does look like it's a bug in their system (so I wasn't going mad after all) in that using the image content tag is adding padding to it.
So only way to get it done properly at the moment is via the wysiwyg editor (just letting people know in case they have this problem as well)
 
Last edited:
  • Like
Reactions: 123Simples
Upvote 0
You must log in or register to reply here.

Similar threads

S
Responsive 4 x Column setup
Replies
1
Views
2K
Websites & Ecommerce
Sparetoolparts
S
titanium
target _blank question
Replies
11
Views
1K
IT & Internet
titanium
titanium
Amazin
how do I align text vertically? (CSS)
Replies
16
Views
2K
IT & Internet
Massive_stock_sale
M
Amazin
help, weird visual effects on the webpage:(
Replies
4
Views
837
IT & Internet
Amazin
Amazin
P
Google Adwords conversion not working
Replies
4
Views
2K
Websites & Ecommerce
perpixon
P

Latest Articles

Top Bottom
Back