html email - Horizontal spaces in outlook -
i'm using usual tricks: border="0" on img, style:display: block on img ... nothing seems work. i'll not i'm slicing images in photoshop , exporting "save web", save "html , images." happens time, everytime use slicing method. ps feature writes table-based markup ideal emails (as can't use divs , expect them work in email templates).
sometime reslice using different areas , works lot of work. i'd right first time slice everything! , yes, i've read topics on here horizontal spaces in outlook , nothing seems work.
here's markup (image locations removed):
<html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- save web slices --> <table id="table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="8"> <img border="0" style="display: block;" src="" width="600" height="98" alt=""></td> </tr> <tr> <td colspan="8"> <img border="0" style="display: block;" src="" width="600" height="119" alt=""></td> </tr> <tr> <td colspan="2"> <img border="0" style="display: block;" src="" width="182" height="442" alt=""></td> <td colspan="6"> <img border="0" style="display: block;" src="" width="418" height="442" alt=""></td> </tr> <tr> <td colspan="2"> <img border="0" style="display: block;" src="" width="182" height="51" alt=""></td> <td> <img border="0" style="display: block;" src="" width="140" height="51" alt=""></td> <td colspan="5"> <img border="0" style="display: block;" src="" width="278" height="51" alt=""></td> </tr> <tr> <td colspan="8"> <img border="0" style="display: block;" src="" width="600" height="128" alt=""></td> </tr> <tr> <td> <img border="0" style="display: block;" src="" width="150" height="91" alt=""></td> <td colspan="3"> <img border="0" style="display: block;" src="" width="315" height="91" alt=""></td> <td> <img border="0" style="display: block;" src="" width="38" height="91" alt=""></td> <td> <img border="0" style="display: block;" src="" width="42" height="91" alt=""></td> <td colspan="2"> <img border="0" style="display: block;" src="" width="55" height="91" alt=""></td> </tr> <tr> <td colspan="8"> <img border="0" style="display: block;" src="" width="600" height="79" alt=""></td> </tr> <tr> <td colspan="7"> <img border="0" style="display: block;" src="" width="599" height="84" alt=""></td> <td> <img border="0" style="display: block;" src="" width="1" height="84" alt=""></td> </tr> <tr> <td> <img border="0" style="display: block;" src="" width="150" height="1" alt=""></td> <td> <img border="0" style="display: block;" src="" width="32" height="1" alt=""></td> <td> <img border="0" style="display: block;" src="" width="140" height="1" alt=""></td> <td> <img border="0" style="display: block;" src="" width="143" height="1" alt=""></td> <td> <img border="0" style="display: block;" src="" width="38" height="1" alt=""></td> <td> <img border="0" style="display: block;" src="" width="42" height="1" alt=""></td> <td> <img border="0" style="display: block;" src="" width="54" height="1" alt=""></td> <td> <img border="0" style="display: block;" src="" width="1" height="1" alt=""></td> </tr> </table> <!-- end save web slices --> </body> </html>
it bad practice build entire email of of images. doesn't render default in email clients, takes long time download , triggers spam filters because image text ratio low.
that being said, getting vertical gaps because outlook doesn't know how wide make each of cols when use colspan in first row. see this answer more information on how enforce col widths.
update - because want vary widths of cells, need use nested tables instead. can not change widths of tables row row. here example of how can construct entire email nested tables , without single colspan:
<html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- save web slices --> <table id="table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img border="0" style="display: block;" src="" width="600" height="98" alt=""> </td> </tr> <tr> <td> <img border="0" style="display: block;" src="" width="600" height="119" alt=""> </td> </tr> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img border="0" style="display: block;" src="" width="150" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="315" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="38" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="42" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="55" height="91" alt=""> </td> </tr> </table> </td> </tr> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img border="0" style="display: block;" src="" width="182" height="442" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="418" height="442" alt=""> </td> </tr> </table> </td> </tr> <tr> <td> <img border="0" style="display: block;" src="" width="600" height="128" alt=""> </td> </tr> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img border="0" style="display: block;" src="" width="150" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="315" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="38" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="42" height="91" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="55" height="91" alt=""> </td> </tr> </table> </td> </tr> <tr> <td> <img border="0" style="display: block;" src="" width="600" height="79" alt=""> </td> </tr> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img border="0" style="display: block;" src="" width="599" height="84" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="1" height="84" alt=""> </td> </tr> </table> </td> </tr> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img border="0" style="display: block;" src="" width="150" height="1" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="32" height="1" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="140" height="1" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="143" height="1" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="38" height="1" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="42" height="1" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="54" height="1" alt=""> </td> <td> <img border="0" style="display: block;" src="" width="1" height="1" alt=""> </td> </tr> </table> </td> </tr> </table> <!-- end save web slices --> </body> </html> as mentioned before, should avoid images , use text text is, not image of text. here example of how middle section should (the part images stacked on left , text on right):
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="182" style="padding-bottom:20px;"> <img border="0" style="display: block;" src="" width="182" height="120" alt=""> </td> <td width="418" valign="top" align="left" style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;"> text 1 </td> </tr> <tr> <td width="182" style="padding-bottom:20px;"> <img border="0" style="display: block;" src="" width="182" height="120" alt=""> </td> <td width="418" valign="top" align="left" style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;"> text 2 </td> </tr> <tr> <td width="182" style="padding-bottom:20px;"> <img border="0" style="display: block;" src="" width="182" height="120" alt=""> </td> <td width="418" valign="top" align="left" style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;"> text 3 </td> </tr> </table> 
Comments
Post a Comment