html - Email images not lining up out look 2007/10 vs everything else -
i've checked out few posts, , tried them. didn't work. may become decision , tell clients is, don't want come that.
so after testing litmus, main issue borders(left , right) vs top , bottom image not lining correctly on outbook 2007/10 vs else.
<body> <style type="text/css"> body{ color:#415b7c; font-family:helvetica, arial, sans-serif; font-size:12px; padding:0; margin:0; } table {border-collapse: collapse;} </style> <table width="100%" bgcolor="#ffffff"> <tr> <td><!-- header --> <table width="600" align="center" cellpadding="0" cellspacing="0"> <tr valign="bottom"> <td> <table width="600" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr><td> <img src="http://wearehmc.com/emailtemp/vsac/top.png" width="600" style="display:block"> </td></tr> </table> </td> </tr> <tr valign="top"> <td> <table width="600" align="left" bgcolor="#ffffff" style="border-left-style:solid; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse: collapse; "> <tr> <td> client log </td> <td> <table cellpadding="10" style="color:#576276;"> <tr> <td> <p style="font-weight:bold"> text </p> <p> text </p> </td> </tr> </table> </td> <td> client logo </td> </tr> </table> </td> </tr> <tr> <td> <table width="600" align="left" cellpadding="0" cellspacing="0"> <tr> <td style="color:#ffffff; font-size:22px; font-weight:500; line-height:30px"> <table width="600" align="left" bgcolor="#659acf" cellpadding="20" style="border-left-style:solid; border-collapse: collapse; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse:collapse;"> <tr> <td style="color:#ffffff; font-size:24px; "> text </td> </tr> </table> </td> </tr> <tr> <td> <table width="600" align="left" cellpadding="0" cellspacing="0"> <tr><td> <img src="http://wearehmc.com/emailtemp/vsac/bottom.png" width="600" style="display:block"> </td></tr> </table> </td> </tr> </table> </td> </tr></table> i've taken out client copy , logos.
as i've said may come down decision of not letting line in outlook 2007/10, while letting work in others.
so if has suggestions, helpful.
for outlook (and gmail) need specify border="0" on images.
<img src="/" width="" height="" alt="" border="0" style="display:block"> this should on every image use in email, spacers. (in fact, on spacers, since create unwanted empty space without content)
also, outlook has trouble rendering cell-padding , spacing (2007 , 2010 both use microsoft word rendering engine, i'll let imagine how great render html-emails).
so should using nested tables instead of cell-padding, spacer images create inner spaces of sections.
oh, , see styling not inline. cause problems html-email stability. (gmail strip every styling not inline, #000000 color on links (use #000001 instead)).
oh also. border styles , colors. not display everywhere. solution again nested tables. bgcolor , 1 / 2px width spacers give illusion of borders.
hope helps. (i know sounds lot of errors in html-email, once hang of coding worst possible mail clients in mind, it'll become second nature! ;) )
Comments
Post a Comment