I'm coding a HTML e-mail but i run into a problem with the following HTML:
<table width="510" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="7" width="30" valign="top"><img src="http://www.dmxs.nl/upc/Luiaard/UPC5_08.jpg" alt="Voor slecht € 28,20 per maand" style="display:block;" border="0" /></td>
<td rowspan="2" width="455" bgcolor="#fff209" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;" align="left"><span style="font-size:14px;"><strong>Titel</strong></span><br /><br />
<strong>- kop 1</strong><br />
<strong>- kop2</strong><br />
<span style="margin-left:20px;">• mini1<br />
</span>
<span style="margin-left:20px;">• mini2<br />
</span>
<span style="margin-left:20px;">• mini3<br />
</span>
<strong>- kop3<span style="text-decoration:none;"></span></strong><br />
<br />
<img src="http://www.dmxs.nl/upc/Luiaard/UPC4_14.jpg" alt="" border="0" width="141" /></td>
<td colspan="6" width="25" height="72" valign="top"><img src="http://www.dmxs.nl/upc/Luiaard/UPC5_10.jpg" alt="Voor slecht € 28,20 per maand" style="display:block;" border="0" /></td>
</tr>
<tr>
<td width="5" bgcolor="#e7e7e8" style="font-size:1px; width:5px;"> </td>
<td width="1" bgcolor="#e7e7e8" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#dededf" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cbcbcc" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#b0b0b1" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#8b8b8b" style="font-size:1px; width:1px;"> </td>
<td width="20" bgcolor="#fff209"></td>
<td width="20" bgcolor="#fff209"></td>
<td width="1" bgcolor="#8f8e81" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#adadae" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cacacb" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#ddddde" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#e6e6e7" style="font-size:1px; width:1px;"> </td>
</tr>
</table>
In Chrome and Firefox this works great however in Internet explorer the following part ain't working (not showing).
<td width="5" bgcolor="#e7e7e8" style="font-size:1px; width:5px;"> </td>
<td width="1" bgcolor="#e7e7e8" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#dededf" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cbcbcc" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#b0b0b1" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#8b8b8b" style="font-size:1px; width:1px;"> </td>
<td width="20" bgcolor="#fff209"></td>
<td width="20" bgcolor="#fff209"></td>
<td width="1" bgcolor="#8f8e81" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#adadae" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cacacb" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#ddddde" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#e6e6e7" style="font-size:1px; width:1px;"> </td>
Does anybody had a solution for this problem(and no, we can't set the height static)?
Fiddle example.
Put in your 2 empty table cells.
Explorer/Outlook are known to collapse empty table cells, which for some reason is preventing the rest of the row from rendering.
Related
I created a newsletter with photoshop and Dreamweaver. I use the slice tools to edit certain parts of the newsletter. When I receive the newsletter everything is ok and looks good. When I forward it to another email, then everything is uneven and there's a big white line where I used the slice tool.
I use
td img { display:block;) code but it doesn't take effect when I forward the email. Here is the code:
<html>
<head>
<style type="text/css">
td img {
display: block;
}
</style>
<title>COMEME</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (COMEME.psd) -->
<table id="Table_01" width="613" height="2101" border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto 0 auto;">
<tr>
<td colspan="16">
<a href="https://comemearreglos.com/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/b2337bae-4f09-4cbd-a86c-36d9a75a69be.jpg" width="612" height="298" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="298" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/d388fb87-d763-489d-8357-58611c94338a.jpg" width="612" height="59" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="16">
<a href="https://www.youtube.com/watch?v=lWXPkCBUFnYa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/609b07a7-1537-4808-bdd5-9e0075aad773.jpg" width="612" height="349" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="349" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/d5734d30-bbff-4612-97a5-bf0d06974ea9.jpg" width="612" height="17" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/ff459b85-e0b4-4746-baee-08f8a866c5a4.jpg" width="252" height="234" alt=""></td>
<td colspan="8" rowspan="2">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/florecer-de-margaritas">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/71ff2c8f-a5c2-4640-8d8a-6a7d9b1ce5ff.jpg" width="353" height="518" border="0" alt=""></a></td>
<td rowspan="4">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/850e2f71-cfeb-4e4c-8b2b-23f56afca360.jpg" width="7" height="599" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="234" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/alegria-de-margarita">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/faf69cb1-f878-4f53-8786-62580a2214e6.jpg" width="252" height="345" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="284" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/c256f1f3-896d-4e39-8823-5d96361f79d3.jpg" width="353" height="81" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="61" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/25661d89-4fb7-402d-a7d5-69333c050f54.jpg" width="252" height="20" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/ramo-bombon-grande">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/078da33a-90f6-4b9c-ba95-bfd6930a2888.jpg" width="204" height="264" border="0" alt=""></a></td>
<td colspan="8">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/abanico-de-margaritas">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2ec18a16-da30-4998-98e5-2222e7d50d1a.jpg" width="204" height="264" border="0" alt=""></a></td>
<td colspan="4">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/caja-sorpresa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/c2f034a3-9c6a-493d-a877-1f5179f198f0.jpg" width="204" height="264" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="264" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/7d0e5d3f-bd0c-42e4-b9c3-d5d3815459b2.jpg" width="3" height="514" alt=""></td>
<td colspan="4">
<a href="https://comemearreglos.com/products/corazon-de-fresa-normal">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/5cbd5ac8-eba3-49e7-ae7c-98455ef803e0.jpg" width="203" height="294" border="0" alt=""></a></td>
<td colspan="8">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/ramo-sorpresa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f961ee13-9185-416b-ae26-234ff3ff171f.jpg" width="219" height="294" border="0" alt=""></a></td>
<td colspan="3">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/kyara">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/319c70e6-0880-497e-9fd0-42eb101065e9.jpg" width="187" height="294" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="294" alt=""></td>
</tr>
<tr>
<td colspan="15">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/093c362d-72ae-48b9-8d2f-273fcf08b010.jpg" width="609" height="76" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="76" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/565d44c0-88c8-46e8-ac3e-a5266ac185a5.jpg" width="190" height="96" alt=""></td>
<td colspan="8">
<a href="https://comemearreglos.com/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/bec9d089-7f39-46d3-a7b9-7e125b5d1806.jpg" width="205" height="37" border="0" alt=""></a></td>
<td colspan="5" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/614847c7-6dca-42df-8f28-c0fb7d46a342.jpg" width="214" height="96" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/b2498e85-f1a1-4141-84d9-cef2157d7436.jpg" width="205" height="59" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2f9ad99a-57db-4455-bb47-33e8268f8605.jpg" width="183" height="48" alt=""></td>
<td colspan="4">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2748320c-5a61-4321-a0c5-d7ee800ca95a.jpg" width="45" height="41" alt=""></td>
<td colspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/36cb6fe6-5e0d-4129-93ee-ab3cc76a4be6.jpg" width="44" height="41" alt=""></td>
<td>
<a href="https://www.facebook.com/acomeme">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/1524864e-1691-4dc5-b348-f8c2f127a034.jpg" width="44" height="41" border="0" alt=""></a></td>
<td>
<a href="https://www.instagram.com/comemearreglos/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/9fe75a76-b488-4a99-bedd-018154afbbf8.jpg" width="44" height="41" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://es.pinterest.com/arregloscomeme/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/e75c1785-63c1-4d29-8f7b-ca052c56985a.jpg" width="45" height="41" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://www.youtube.com/user/ComemeArreglos">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/1de8b935-c5b4-4ca1-b292-1f94fe5ca573.jpg" width="44" height="41" border="0" alt=""></a></td>
<td colspan="2" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/07cfe6db-5679-4694-b24a-87884f4c1410.jpg" width="160" height="48" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2e95bd34-40d0-4c96-af9b-d81a9f6b60ae.jpg" width="266" height="7" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="3" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="183" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="7" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="11" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="2" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="25" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="21" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="23" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="44" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="44" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="35" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="10" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="17" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="27" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="153" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="7" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to *|EMAIL|*
<br>
<em>why did I get this?</em> unsubscribe from this list update subscription preferences
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
#media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
Hi i sliced the image and coded it, but its in fix size, how can i make this responsive? without using bootstrap can u help me ? and this is the whole image of it, Image you can see the the code below thank you so much
<table id="Table_01" width="1001" height="720" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="images/Info_01.png" width="1000" height="29" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Info_02.png" width="361" height="4" alt=""></td>
<td rowspan="3">
<img src="images/Info_03.png" width="348" height="308" alt=""></td>
<td rowspan="3">
<img src="images/Info_04.png" width="291" height="308" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Info_05.png" width="69" height="289" alt=""></td>
<td>
<img src="images/Info_06.png" width="292" height="289" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="289" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Info_07.png" width="361" height="332" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Info_08.png" width="348" height="317" alt=""></td>
<td>
<img src="images/Info_09.png" width="291" height="317" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="317" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/Info_10.png" width="1000" height="66" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="66" alt=""></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" height="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="570" height="131">
<img title="header_agado_zg_lv.jpg" alt="header_agado_zg_lv.jpg" border="0" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_lv.jpg" width="570" height="131">
</td>
<td>
<table width="130" height="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img title="header_agado_zg_ds1.jpg" alt="header_agado_zg_ds1.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds1.jpg" width="130" height="19" border="0"></td>
</tr>
<tr style="height: 25px;">
<td style="height: 25px;"><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds2.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds3.jpg" alt="header_agado_zg_ds3.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds3.jpg" width="130" height="12" border="0"></td>
</tr>
<tr>
<td><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds4.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds5.jpg" alt="header_agado_zg_ds5.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds5.jpg" width="130" height="12" border="0"></td>
</tr>
<tr>
<td><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds6.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds7.jpg" alt="header_agado_zg_ds7.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds7.jpg" width="130" height="13" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img title="header_agado_sp.jpg" alt="header_agado_sp.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_sp.jpg" width="700" height="152"></td>
</tr>
</table>
</tr>
</table>!
Gmail:
Browser:
Why does the page appear different in Gmail to how it appears in a browser? How can I solve this problem?
Add Inline style to each image tag in email :
For example:
<img title="header_agado_zg_lv.jpg" alt="header_agado_zg_lv.jpg" border="0" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_lv.jpg" width="570" height="131" style='border: none; display:block;' />
In short style='border: none; display:block;'
I've always used rowspan for web site development but now designing and developing email comms rowspan, it appears constantly breaks. In multiple clients it displays with a 10/20px gap. How can I avoid using row span even if I need to have two images side by side in an email (such as a header)?
<html>
<head>
<title>StPatricksDAy-PostCard</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 for Web Slices (StPatricksDAy-PostCard.psd) -->
<table id="Table_01" width="657" height="684" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_01.gif" width="19" height="643" alt=""></td>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_02.gif" width="636" height="14" alt=""></td>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_03.gif" width="2" height="643" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_04.gif" width="636" height="96" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_05.gif" width="636" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/StPatricksDAy-PostCard_06.jpg" width="257" height="523" alt=""></td>
<td>
<img src="images/StPatricksDAy-PostCard_07.gif" width="368" height="449" alt=""></td>
<td rowspan="3">
<img src="images/StPatricksDAy-PostCard_08.gif" width="11" height="524" alt=""></td>
</tr>
<tr>
<td>
<img src="images/StPatricksDAy-PostCard_09.gif" width="368" height="74" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/StPatricksDAy-PostCard_10.gif" width="625" height="1" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_11.gif" width="657" height="28" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_12.gif" width="657"
height="13" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
I have some problem with my e-mail campaign.
I made all my boxes with correct width, height attribute, also made the img line-height to 0.1em and display them as block, so the question is on. What is this?
Every suggestion will be honored. Thanks.
<table width="594" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="25" align="left" valign="top"></td>
<td width="269" align="left" valign="bottom">
<h1>{TITLE}</h1>
<h2>{HOTEL} {HOTELCATEGORY}</h2>
<p>{ROOM}</p>
<p>{ACCOM}</p>
<p>{START}</p>
<p>{DATESTART} - {DATEEND}</p>
<p>{DAYS} nap, {NIGHTS} éjszaka</p>
<table border="0" cellpadding="0" cellspacing="0" width="230" height="67">
<tr height="11">
<td width="80" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tl.png" width="80" height="11"></td>
<td width="117" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_t.png" width="117" height="11"></td>
<td width="33" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tr.png" width="33" height="11"></td>
</tr>
<tr height="40">
<td width="80" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_l.png" width="80" height="40"></td>
<td width="117" height="40" align="center" valign="middle" bgcolor="#444444"><b class="priceboxb" style="margin: 0; padding: 0;">{PRICE}{CURRENCY}</b><span class="priceboxspan" style="margin: 0; padding: 0;">/fõ</span></td>
<td width="33" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_r.png" width="33" height="40"></td>
</tr>
<tr height="16">
<td width="80" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_bl.png" width="80" height="16"></td>
<td width="117" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_b.png" width="117" height="16"></td>
<td width="33" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_br.png" width="33" height="16"></td>
</tr>
</table>
</td>
<td width="300" align="right" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tl.png"></td>
<td width="278" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_t.png"></td>
<td width="12" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tr.png"></td>
</tr>
<tr>
<td width="10" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_l.png"></td>
<td width="278" height="192" class="imageholder"><img src="{IMGSRC}" width="278" height="192" class="image" style="width: 278pt; height: 192pt; border:0; margin:0; padding:0;"></td>
<td width="12" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_r.png"></td>
</tr>
<tr>
<td width="10" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_bl.png"></td>
<td width="278" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_b.png"></td>
<td width="12" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_br.png"></td>
</tr>
</table>
</td>
<td width="0" align="left" valign="top"></td>
</tr>
</tbody></table>
Looks like three pixels. What happens if you make the images that make up the label display: block; ?
Or take a look at this answer: 3px extra height on a div with an image inside it