2013-11-27 18 views
0

几乎在这个突破点。在Dreamweaver中对此进行编码,当我在实时模式下查看它时出现的很好,但是在实时模式下,但是当我通过Outlook和Gmail等电子邮件客户端发送它时,它有一个图像不符合要求,我看不到为什么。如果代码有点混乱,对此很抱歉。图像没有排队在Gmail和Outlook

</head> 
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"> 
    <center> 
     <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable"> 
      <tr> 
       <td align="center" valign="top"> 
        <!-- // Begin Template Preheader \\ --> 
        <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader"> 
         <tr> 
          <td valign="top" class="preheaderContent"> 

           <!-- // Begin Module: Standard Preheader \ --> 
           <table border="0" cellpadding="10" cellspacing="0" width="100%"> 
            <tr> 
             <td valign="top"> 
              <div mc:edit="std_preheader_content"> 
               </div> 
             </td> 
             <!-- *|IFNOT:ARCHIVE_PAGE|* --> 
             <td valign="top" width="190"> 
              <div mc:edit="std_preheader_links"> 
               Is this email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>. 
              </div> 
             </td> 
             <!-- *|END:IF|* --> 
            </tr> 
           </table> 
           <!-- // End Module: Standard Preheader \ --> 

          </td> 
         </tr> 
        </table> 
        <!-- // End Template Preheader \\ --> 
        <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer"> 
         <tr> 
          <td align="center" valign="top"> 
                    <!-- // Begin Template Header \\ --> 
           <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader"> 
            <tr> 
             <td style="padding-top:25px"> 

             </td> 
            </tr> 
            <tr> 
             <td class="headerContent"> 

              <!-- // Begin Module: Standard Header Image \\ --> 
              <a href="http://www.spaceform.com/"><img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/logo1.png" style="max-width:600px; font-family:Tahoma; font-size:32px; color:#000000" alt="Spaceform London" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext/></a> 
              <!-- // End Module: Standard Header Image \\ --> 

             </td> 
            </tr> 
            <tr> 
             <td style="padding-top:10px"> 

             </td> 
            </tr> 
            <tr> 
             <td align="center" style="font-family:Tahoma; font-size:14px; padding-top:15px; padding-bottom:15px"> 

              <a href="http://www.spaceform.com/" style="text-decoration:none; color:#000000">Home</a>&nbsp;&nbsp; |&nbsp; <a href="http://www.spaceform.com/shop" style="text-decoration:none; color:#000000">Shop</a>&nbsp; |&nbsp; <a href="http://www.spaceform.com/shop/bestselling-gifts" style="text-decoration:none; color:#000000">Bestselling Gifts</a>&nbsp; |&nbsp;&nbsp;<a href="http://www.spaceform.com/shop/personalised-pieces/scripted-pieces" style="text-decoration:none; color:#000000">Personalised Gifts</a>&nbsp; | &nbsp;<a href="http://www.spaceform.com/about-us" style="text-decoration:none; color:#000000">About Spaceform</a>&nbsp; |&nbsp;&nbsp;<a href="http://www.spaceform.com/contact-us" style="text-decoration:none; color:#000000">Contact us</a></td> 
            </tr> 
           </table> 
           <!-- // End Template Header \\ --> 
          </td> 
         </tr> 
         <tr> 
          <td align="center" valign="top"> 
           <!-- // Begin Template Body \\ --> 
           <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody"> 
            <tr> 
             <td valign="top"> 
              <table border="0" cellpadding="0" cellspacing="0" width="600"> 
               <tr> 
                <td valign="top"> 
                 <table border="0" cellpadding="0" cellspacing="0" width="600"> 
                  <tr> 
                   <td valign="top" class="bodyContent"> 

                    <!-- // Begin Module: Standard Content \\ --> 

                     <table border="0" bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="600" cellpadding="0" cellspacing="0"> 
                        <tr> 
                        <td rowspan="18" width="24" height="1474"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_02.jpg" border="0" style="display:block;" width="24" height="1474" /></td> 
                        <td colspan="2" width="552" height="43"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_03.jpg" border="0" style="display:block;" width="552" height="43" /></td> 
                        <td rowspan="18" width="24" height="1474"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_04.jpg" border="0" style="display:block;" width="24" height="1474" /></td> 
                        </tr> 
                        <tr> 
                        <td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_05.jpg" style="display:block;" bgcolor="#ffffff" width="279" height="122" valign="top"> 
                         <!--[if gte mso 9]> 
                         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:279px;height:122px;"> 
                         <v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_05.jpg" color="#ffffff" /> 
                         <v:textbox inset="0,0,0,0"> 
                         <![endif]--> 
                         <div> 
                          Lorem ipsum dolor sit amet,</div> 
                         <!--[if gte mso 9]> 
                         </v:textbox> 
                         </v:rect> 
                         <![endif]--> 
                        </td> 
                        <td width="273" height="350" rowspan="3"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_06.jpg" border="0" style="display:block;" width="273" height="350" /></td> 
                        </tr> 
                        <tr> 
                        <td width="279" height="45"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_07.jpg" border="0" style="display:block;" width="279" height="45" /></td> 
                        </tr> 
                        <tr> 
                        <td width="279" height="183"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_08.jpg" border="0" style="display:block;" width="279" height="183" /></td> 
                        </tr> 
                        <tr> 
                        <td colspan="2" width="552" height="41"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_09.jpg" border="0" style="display:block;" width="552" height="41" /></td> 
                        </tr> 
                        <tr> 
                        <td rowspan="3" width="279" height="233"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_10.jpg" border="0" style="display:block;" width="279" height="233" /></td> 
                        <td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_11.jpg" style="display:block;" bgcolor="#ffffff" width="273" height="93" valign="top"> 
                         <!--[if gte mso 9]> 
                         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:273px;height:93px;"> 
                         <v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_11.jpg" color="#ffffff" /> 
                         <v:textbox inset="0,0,0,0"> 
                         <![endif]--> 
                         <div> 
                          Lorem ipsum dolor sit amet,</div> 
                         <!--[if gte mso 9]> 
                         </v:textbox> 
                         </v:rect> 
                         <![endif]--> 
                        </td> 
                        </tr> 
                        <tr> 
                        <td width="273" height="37"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_12.jpg" border="0" style="display:block;" width="273" height="37" /></td> 
                        </tr> 
                        <tr> 
                        <td width="273" height="103"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_13.jpg" border="0" style="display:block;" width="273" height="103" /></td> 
                        </tr> 
                        <tr> 
                        <td colspan="2" width="552" height="47"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_14.jpg" border="0" style="display:block;" width="552" height="47" /></td> 
                        </tr> 
                        <tr> 
                        <td rowspan="3" width="279" height="317"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_15.jpg" border="0" style="display:block;" width="279" height="317" /></td> 
                        <td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_16.jpg" style="display:block;" bgcolor="#ffffff" width="273" height="95" valign="top"> 
                         <!--[if gte mso 9]> 
                         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:273px; height:95px"> 
                         <v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_16.jpg" color="#ffffff" /> 
                         <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> 
                         <![endif]--> 
                         <div> 
                          Lorem ipsum dolor sit amet,</div> 
                         <!--[if gte mso 9]> 
                         </v:textbox> 
                         </v:rect> 
                         <![endif]--> 
                        </td> 
                        </tr> 
                        <tr> 
                        <td width="273" height="35"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_17.jpg" border="0" style="display:block;" width="273" height="35" /></td> 
                        </tr> 
                        <tr> 
                        <td width="273" height="187"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_18.jpg" border="0" style="display:block;" width="273" height="187" /></td> 
                        </tr> 
                        <tr> 
                        <td colspan="2" width="552" height="41"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_19.jpg" border="0" style="display:block;" width="552" height="41" /></td> 
                        </tr> 
                        <tr> 
                        <td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_20.jpg" style="display:block;" bgcolor="#ffffff" width="279" height="96" valign="top"> 
                         <!--[if gte mso 9]> 
                         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:279px;height:96px;"> 
                         <v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_20.jpg" color="#ffffff" /> 
                         <v:textbox inset="0,0,0,0"> 
                         <![endif]--> 
                         <div> 
                          Lorem ipsum dolor sit amet, </div> 
                         <!--[if gte mso 9]> 
                         </v:textbox> 
                         </v:rect> 
                         <![endif]--> 
                        </td> 
                        <td rowspan="3" width="273" height="293"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_21.jpg" border="0" style="display:block;" width="273" height="293" /></td> 
                        </tr> 
                        <tr> 
                        <td width="279" height="38"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_22.jpg" border="0" style="display:block;" width="279" height="38" /></td> 
                        </tr> 
                        <tr> 
                        <td width="279" height="159"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_23.jpg" border="0" style="display:block;" width="279" height="159" /></td> 
                        </tr> 
                        <tr> 
                        <td colspan="2" width="552" height="40"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_24.jpg" border="0" style="display:block;" width="552" height="40" /></td> 
                        </tr> 
                        <tr> 
                        <td colspan="2" width="279" height="69"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_25.jpg" border="0" style="display:block;" width="552" height="85"> 


                        </td> 
                        </tr> 

                        <td colspan="4" width="600" height="45"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_26.jpg" border="0" style="display:block;" width="600" height="45" /></td> 
                        </tr> 
                        <tr> 
                        <td colspan="4" width="600" height="324"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_27.jpg" border="0" style="display:block;" width="600" height="324" /></td> 
                        </tr> 
                     </table> 
                    <!-- // End Module: Standard Content \\ --> 

                   </td> 
                  </tr> 
                 </table> 
                </td> 
               </tr> 
              </table>             
             </td> 
            </tr> 
              </table> 
           <!-- // End Template Body \\ --> 
            </td> 
         </tr> 
         <tr> 
          <td align="center" valign="top"> 
           <!-- // Begin Template Footer \\ --> 
           <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter"> 
            <tr> 
             <td valign="top" class="footerContent"> 

              <!-- // Begin Module: Standard Footer \\ --> 

              <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
               <tr> 
                <td colspan="2" valign="middle" id="social" style="padding-bottom:20px"> 
                 <div mc:edit="std_social" style="font-size: 14px; font-style:normal"> 
                  We love being social, 
                  why not come and say hi... <a href="http://www.facebook.com/Spaceform"><img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/facebook2.png" alt="on Facebook" style="max-width:600px; id="Img9" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext /></a>&nbsp;&nbsp; 
                 <a href="http://twitter.com/spaceform"><img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/twitter2.png" alt="on Twitter" style="max-width:600px; id="Img10" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext /></a>&nbsp;&nbsp; 
                 <a href="http://www.pinterest.com/spaceform/"><img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/pinterest2.png" alt="or on Pinterest" style="max-width:600px; id="Img11" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext /></a>&nbsp;&nbsp; 
                 </div> 
                </td> 
               </tr> 
               <tr> 
                <td valign="top" width="350"> 
                 <div mc:edit="std_footer"> 
                  <em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.  > 
                  <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"> 
                 <div mc:edit="monkeyrewards"> 
                  *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|* 
                 </div> 
                </td> 
               </tr> 
               <tr> 
                <td colspan="2" valign="middle" id="utility"> 
                 <div mc:edit="std_utility"> 
                  &nbsp;<a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a><br /> 
                 </div> 
                </td> 
               </tr> 
              </table> 
              <!-- // End Module: Standard Footer \\ --> 

             </td> 
            </tr> 
           </table> 
           <!-- // End Template Footer \\ --> 
          </td> 
         </tr> 
        </table> 
        <br /> 
       </td> 
      </tr> 
     </table> 
    </center> 
</body> 

+0

请尽量减少代码大小,以实际上可以被人读取的东西! – Shahbaz

回答

0

你不能有空白<td>,后市将忽略所有的造型你做。 因此插入一个小的透明图像像<img src="Img/trans.png" height="1" width="1" style="display:block">

你没有在代码中的<head>所以我可以看到它,但记住你不能与外部CSS样式。在Gmail中的包头去掉一切。所以一切都需要是内嵌样式

编辑: 寻找更多的在你的代码中,我可以看到你有很多rowspan=""一些邮件客户端dosnt这样之后。如果neede只尝试使用colspan,而不是rowspan。所有垂直的图片可能会变得丑陋。

0

它看起来像当你切片的图像时,你不知何故从每个侧边栏图像的底部丢失了一个16像素高,24像素宽的块。

侧边栏图像cell_02.jpg和cell_04.jpg高1474px,而中央列图像高1490px。边栏表单元格垂直拉伸以匹配中心列的高度,留下16px的空白空间,并垂直居中放置图像,从而留下8px的空白空间顶部和底部。

我建议你找到缺少的位,并使每个侧栏图像16px更高。或者,您可以从cell_25.jpg底部取一个16像素的切片,将其粘贴到cell_26.jpg的顶部,然后填写缺失的角落。