Gmail中的Mailchimp电子邮件模板图像间距问题

时间:2014-04-03 23:28:39

标签: image gmail mailchimp spacing email-templates

好的似乎是一个常见问题,但我还没有找到解决办法。

它在邮件应用程序等中显示良好..如果图像是placehold.it图像,它在gmail中也很好。

但是当我更改placehold.it图像时,设计图像完全相同,它会添加空格。我在想谷歌正在剥离我的一些代码?

我添加了display:block;正如一些修正案所述。但我仍然得到错误。有人可以建议吗?

 <!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">

    <!-- Facebook sharing information tags -->
    <meta property="og:title" content="*|MC:SUBJECT|*">

    <title>*|MC:SUBJECT|*</title>

</head>
<body style="margin: 0;padding: 0;width: 100%;">
    <center>
        <table border="0" cellpadding="0" cellspacing="0" id="backgroundTable" style="margin: 0;padding: 0;height:100%;width: 600px;">
            <tr>
                <td valign="top" style="border-collapse: collapse;">
                    <table border="0" cellpadding="10" cellspacing="0" width="600px" id="templatePreheader" style="background-color: #FAFAFA;">
            <tr>
                <td valign="top" class="preheaderContent" style="border-collapse: collapse;">
                    <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td valign="top" style="border-collapse: collapse;">
                    <div mc:edit="std_preheader_content" style="color: #505050;font-family: Arial;font-size: 10px;line-height: 100%;text-align: left;">
                        Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
                                </div>
                    </td>
                        <td valign="top" width="190" style="border-collapse: collapse;">
                                <div mc:edit="std_preheader_links" style="color: #505050;font-family: Arial;font-size: 10px;line-height: 100%;text-align: left;">
                                    Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank" style="color: #336699;font-weight: normal;text-decoration: underline;">View it in your browser</a>.
                                </div>
                            </td>
                                    </tr>
                    </table>
            </td>
            </tr>
        </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="600px" id="templateContainer" style="border: 1px solid #DDDDDD;">
            <tr>
                <td style="border-collapse: collapse;width:600px;height:195px;" colspan="2">
                    <table border="0" cellpadding="0" cellspacing="0" width="600px">
                                    <tr>
                    <td class="headercontent" style="border-collapse: collapse;padding: 0;">
                    <img src="http://placehold.it/600x195" width="600px" height="195px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="">
                    </td>
                </tr>
                    </table>
            </td>
            </tr>
                        <tr>
                <td width="600px" style="border-collapse: collapse;">
                    <table border="0" cellpadding="0" cellspacing="0" width="600px">
                                    <tr>
                    <td class="firstcontent_left" width="360px" height="480px" style="border-collapse: collapse;padding: 0;border: 0;outline: none;text-decoration: none;">
                    <img src="http://placehold.it/360x480" width="360px" height="480px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="firstcontent_left campaign-icon" mc:label="firstcontent_left_image" mc:edit="firstcontent_left_image" mc:allowdesigner="" mc:allowtext="">
                    </td>
                                        <td class="firstcontent_right" width="240px" height="480px" style="border-collapse: collapse;padding: 0;border: 0;outline: none;text-decoration: none;">
                    <table border="0" cellpadding="0" cellspacing="0" width="240px">
                                                <tr>
                                                    <td class="firstcontent_right_inner_top" width="240px" height="240px" style="border-collapse: collapse;padding: 0;border: 0;outline: none;text-decoration: none;">
                                                        <img src="http://placehold.it/240x385" width="240px" height="385px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="firstcontent_right_inner_top campaign-icon" mc:label="firstcontent_right_inner_top_image" mc:edit="firstcontent_right_inner_top_image" mc:allowdesigner="" mc:allowtext="">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="firstcontent_right_inner_bottom" width="240px" height="95px" style="border-collapse: collapse;padding: 0;border: 0;outline: none;text-decoration: none;">
                                                        <img src="http://placehold.it/240x95" width="240px" height="95px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="firstcontent_right_inner_bottom campaign-icon" mc:label="firstcontent_right_inner_bottom_image" mc:edit="firstcontent_right_inner_bottom_image" mc:allowdesigner="" mc:allowtext="">
                                                    </td>
                                                </tr>
                                            </table>
                    </td>
                </tr>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" width="600px">
                                    <tr>
                                        <td class="secondcontent_left" style="border-collapse: collapse;padding: 0;width: 230px;height: 70px;border: 0;outline: none;text-decoration: none;">
                                            <img src="http://placehold.it/230x70" width="230px" height="70px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="secondcontent_left campaign-icon" mc:label="secondcontent_left_image" mc:edit="secondcontent_left_image" mc:allowdesigner="" mc:allowtext="">
                                        </td>
                                        <td class="secondcontent_right" style="border-collapse: collapse;padding: 0;width: 370px;height: 70px;border: 0;outline: none;text-decoration: none;">
                                            <img src="http://placehold.it/370x70" width="370px" height="70px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="secondcontent_right campaign-icon" mc:label="secondcontent_right_image" mc:edit="secondcontent_right_image" mc:allowdesigner="" mc:allowtext="">
                                        </td>
                                    </tr>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" width="600px">
                                    <tr>
                                        <td class="thirdcontent_left" style="border-collapse: collapse;padding: 0;width: 360px;height: 155px;border: 0;outline: none;text-decoration: none;">
                                            <img src="http://placehold.it/360x155" width="360px" height="155px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="thirdcontent_left campaign-icon" mc:label="thirdcontent_left_image" mc:edit="thirdcontent_left_image" mc:allowdesigner="" mc:allowtext="">
                                        </td>
                                        <td class="thirdcontent_right" style="border-collapse: collapse;padding: 0;width: 240px;height: 155px;border: 0;outline: none;text-decoration: none;">
                                            <img src="http://placehold.it/240x155" width="240px" height="155px" style="border: 0;outline: none;text-decoration: none;display: block;vertical-align: top;" id="thirdcontent_right campaign-icon" mc:label="thirdcontent_right_image" mc:edit="thirdcontent_right_image" mc:allowdesigner="" mc:allowtext="">
                                        </td>
                                    </tr>
                    </table>
            </td>
            </tr>
            <tr>
            <td>
                <table border="0" cellpadding="10" cellspacing="0" width="600px" id="templateFooter" style="background-color: #FFFFFF;border-top: 0;">
                <tr>
                    <td valign="top" class="footerContent" style="border-collapse: collapse;">
                    <table border="0" cellpadding="10" cellspacing="0" width="100%">
                        <tr>
                        <td colspan="2" valign="middle" id="social" style="border-collapse: collapse;background-color: #FAFAFA;border: 0;">
                            <div mc:edit="std_social" style="color: #707070;font-family: Arial;font-size: 12px;line-height: 125%;text-align: center;">
                                &nbsp;<a href="*|FACEBOOK:PROFILEURL|*" style="color: #336699;font-weight: normal;text-decoration: underline;">friend on Facebook</a> | <a href="*|FORWARD|*" style="color: #336699;font-weight: normal;text-decoration: underline;">forward to a friend</a>&nbsp;
                            </div>
                        </td>
                        </tr>
                        <tr>
                        <td valign="top" width="350" style="border-collapse: collapse;">
                            <div mc:edit="std_footer" style="color: #707070;font-family: Arial;font-size: 12px;line-height: 125%;text-align: left;">
                            <em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
                                <br>
                                *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
                                <br>
                                <strong>Our mailing address is:</strong>
                                <br>
                                *|HTML:LIST_ADDRESS_HTML|**|END:IF|* 
                            </div>
                        </td>
                        <td valign="top" width="190" id="monkeyRewards" style="border-collapse: collapse;">
                            <div mc:edit="monkeyrewards" style="color: #707070;font-family: Arial;font-size: 12px;line-height: 125%;text-align: left;">
                            *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
                            </div>
                        </td>
                        </tr>
                        <tr>
                        <td colspan="2" valign="middle" id="utility" style="border-collapse: collapse;background-color: #FFFFFF;border: 0;">
                            <div mc:edit="std_utility" style="color: #707070;font-family: Arial;font-size: 12px;line-height: 125%;text-align: center;">
                            &nbsp;<a href="*|UNSUB|*" style="color: #336699;font-weight: normal;text-decoration: underline;">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*" style="color: #336699;font-weight: normal;text-decoration: underline;">update subscription preferences</a>&nbsp;
                            </div>
                        </td>
                        </tr>
                    </table>        
                    </td>
                </tr>
                </table>
            </td>
            </tr>
        </table>
                </td>
            </tr>
        </table>
    </center>
</body>

0 个答案:

没有答案