html email padding/alignment issues

Попытка получить подпись электронной почты, работающую, но не могу получить часть изображения, чтобы сидеть на одном уровне с столбиком таблицы, кажется, что это пробел/дополнение внизу и справа. Ниже приведен код, Im использованием, выглядит отлично в браузере, но не почта (внешний вид)html email padding/alignment issues

<!doctype html> 
 
\t \t \t \t <html> 
 
\t \t \t \t <head> 
 
\t \t \t \t <meta charset="utf-8"> 
 
\t \t \t \t <title>J.Clarke</title> 
 
\t \t \t \t <style> 
 
\t \t \t \t .btmStrip{ 
 
\t \t \t \t \t /*border:1px solid red; 
 
\t \t \t \t \t padding-bottom:50px; 
 
\t \t \t \t background: linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -o-linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -moz-linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -webkit-linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -ms-linear-gradient(bottom, #000 70%, #fff 70%); */ 
 
\t \t \t \t } 
 
\t \t \t \t </style> 
 
\t \t \t \t </head> 
 

 
\t \t \t \t <body> 
 

 
\t \t \t \t <table width="700" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;"> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td width="118">&nbsp;</td> 
 
\t \t \t \t \t <td width="62">&nbsp;</td> 
 
\t \t \t \t \t <td colspan="3" rowspan="2" style="text-align:right;padding-right:5%;"><a href="http://name.co.za/" target="_blank"><img src="logo1.jpg" width="131" height="90" alt="co name"/></a></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t <td colspan="3"><span style="vertical-align:text-top; font-size:14px;font-family:'Montserrat Ultra Light';">Warm Regards,</span></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td colspan="4"></td> 
 
\t \t \t \t \t </tr> 
 

 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td width="118" style="height:0px; background-color: #fff;line-height:0px"></td> 
 
\t \t \t \t \t <td width="62" style="height:0px; background-color: #fff;line-height:0px"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" rowspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="4" style="text-align:center;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" rowspan="17" align="right" valign="bottom"><img style="display:block" src="http://overit.co.za/tst.jpg" width="180" height="175" alt=""/></td> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;"> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;">&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:center;padding:0px 5px;"><hr style="border-bottom: 1px solid #000; background-color:#000;margin-left: 0px;"/></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:center;padding-bottom:2px;"><span style="font-family:'Montserrat Ultra Light'; vertical-align:text-top; font-size:16px;"><span style="font-family:'Montserrat SemiBold';">Name Name</span> | <a style="text-decoration:none;color:#282828;" href="mailto:[email protected]" target="_blank">[email protected]</a> | <a style="text-decoration:none;color:#282828;" href="http://name.co.za/" target="_blank">www.name.co.za</a> </span></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;" height="11px"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:center;"><span style="font-family:'Montserrat Ultra Light'; color:#fff;font-size:10px;"><span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:[email protected]" target="_blank">[email protected]</a> | <span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:[email protected]" target="_blank">[email protected]</a></span></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;" height="25px">&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t <!-- <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;" height="28.75px">&nbsp;</td> 
 
\t \t \t \t \t </tr>--> 
 
\t \t \t \t <!-- <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;" height="28.75px">&nbsp;</td> 
 
\t \t \t \t \t </tr>--> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td width="415" height="18.75px" style="text-align:right;">&nbsp;</td> 
 
\t \t \t \t \t <td width="105" style="text-align:right;" height="18.75px">&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td style="text-align:right; padding-bottom:10px;" height="30px"><span style="color:#fff; font-family:'Montserrat Ultra Light';"><span style="color:#d7ab64; font-family:'Montserrat Regular'; font-size:80%;"><a style="text-decoration:none;color:#d7ab64;" href="http://satincandy.co.za/" target="_blank">SHOP NOW</a></span> | <a style="text-decoration:none;color:#fff;font-size:80%;" href="http://satincandy.co.za/" target="_blank">SIGN UP TO OUR NEWSLETTER</a></span></td> 
 
\t \t \t \t \t <td width="105" style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"><a target="_blank" href="https://www.facebook.com"><img data-class="external" src="instagram.png" align="right"></a> 
 
\t \t \t \t \t \t <a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="pintrest.png" align="right"></a> 
 
\t \t \t \t \t \t <a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="facebook.png" align="right"></a> 
 
\t \t \t \t \t <a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="twitter.png" align="right"></a></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 

 
\t \t \t \t </body> 
 
\t \t \t \t </html>

источник

2017-02-15 RustyDP

Можете ли вы предоставить скриншот того, как он выглядит в мировоззрении. – Zze

@Zze спасибо, вот скриншот: https://postimg.org/image/3llyqt7jl/ и вот как это должно выглядеть: https://postimg.org/image/vezxjrq47/ – RustyDP

Сво столбца и строки диапазона, что вызывает проблему. Попробуйте использовать этот код:

<table width="700" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
     <tr> 
     <td style="padding-left:180px;padding-bottom:20px;">Warm regards</td> 
     </tr> 
     <tr> 
     <td style="padding-left:180px;"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
    <tr> 
     <td bgcolor="#000000" height="2"></td> 
    </tr> 
    </tbody> 
</table> 

    </td> 
     </tr> 
     <tr> 
     <td style="padding-left:180px;padding-top:20px;padding-bottom:20px;"><span style="font-family:'Montserrat SemiBold';">loren loren loren loren loren</span></td> 
     </tr> 
     <tr> 
     <td bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
      <td width="180" align="left" valign="top"><img src="http://placehold.it/180x150/000000/ffffff/?text=Logo+Goes+Here" width="180" height="150" /></td> 
      <td bgcolor="#FFFFFF" style="padding-top:50px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000"> 
       <tbody> 
       <tr> 
        <td style="text-align:right; padding-bottom:10px;" height="30px">&nbsp;</td> 
        <td style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px">&nbsp;</td> 
       </tr> 
       <tr> 
        <td style="text-align:right; padding-bottom:10px;" height="30px"><span style="color:#fff; font-family:'Montserrat Ultra Light';"><span style="color:#d7ab64; font-family:'Montserrat Regular'; font-size:80%;">loren loren loren loren loren</span></td> 
        <td width="105" style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"><a target="_blank" href="https://www.facebook.com"> <img data-class="external" src="instagram.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="pintrest.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="facebook.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="twitter.png" align="right" /> </a></td> 
       </tr> 
       <tr> 
        <td style="text-align:right; padding-bottom:10px;" height="30px">&nbsp;</td> 
        <td style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px">&nbsp;</td> 
       </tr> 
       </tbody> 
      </table></td> 
      </tr> 
     </table></td> 
     </tr> 
    </tbody> 
</table>

Я перекодировал и удалил интервал строк и диапазон разметки. вы можете добавлять и удалять что-либо из кода.

источник

2017-02-16 02:13:19 Syfer

Я не вижу, как вы используете изображение в вашем коде? спасибо – RustyDP

Вы имеете в виду большое черное изображение слева? Я удалил его, как вы можете работать без него. Интервал слева обрабатывается цветом и цветом фона. – Syfer

изображение было просто образ-заполнителя, так как я не могу показать реальное изображение. Там должно быть изображение, проблема заключается в заполнении/промежутке между изображением и столбцами. – RustyDP

ответ

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