2013-11-27 2 views
0

Практически в точке нарушения с этим. Кодирование этого в Dreamweaver, и когда я просматриваю его в режиме реального времени, получается прекрасно, но когда он находится в режиме реального времени, но когда я отправляю его через почтовые клиенты, такие как Outlook и Gmail, у него есть одно изображение вне линии, и я не вижу Зачем. Новое к этому так жаль, если код немного грязный.Изображения не выстраиваются в Gmail и прогноз

</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 удаляет все, что в вашем заголовке .. Так что все должно быть INLINE для укладки и стайлинга

EDIT: Посмотрев немного больше кода я могу видеть, у вас есть много rowspan="" некоторые почтовый клиент dosnt подобное. Если нужно, попробуйте только использовать colspan, а не rowspan. Все вертикальные снимки бок о бок могут стать уродливыми.

0

Похоже, что когда вы нарезали изображение, вы как-то потеряли высоту 16 пикселей на 24px широкий кусок от нижней части каждого изображения боковой панели.

Изображения боковой панели, cell_02.jpg и cell_04.jpg, имеют высоту 1474px, а изображения в центральном столбце - 1490px. Ячейки таблицы боковых панелей растягиваются вертикально, чтобы соответствовать высоте центрального столбца, оставляя 16 пикселей свободного пространства и центрируя изображения по вертикали, оставляя 8px пустого пространства сверху и снизу.

Предлагаю вам найти недостающие биты и сделать изображение каждой боковой панели на 16 пикселей выше. Кроме того, вы можете взять фрагмент размером 16 пикселей со дна cell_25.jpg, вставить его в верхнюю часть cell_26.jpg и заполнить недостающие углы.

Смежные вопросы