Reputation: 422
I have gone through a lot of threads, but I couldn't find something helpful. If that's a duplicate please point me to the relevant thread.
We have created a custom RSS feed for one of our websites in order to achieve the design we wanted for the template. I have managed to make it look good almost everywhere expect Outlook, which is a pain!
The main problem I'm facing is that I cannot show the right border in one of my boxes.
Please refer to the attached screenshot.
Here's my HTML. I have also tried by using percentages for the widths, but didn't work either.
<table width="525" height="250" border="0" cellpadding="0" cellspacing="0" bgcolor="#fafafa" class="main-content" style="border:1px solid #ccc;">
<tr>
<td width="50"><!-- --></td>
<td width="284" align="left" valign="middle"><img src="'.site_url().'/wp-content/uploads/'.$image.'" width="274" height="196" mc:edit="Box_image_2" mc:allowdesigner alt="" /></td>
<td width="20"><!-- --></td>
<td width="280" valign="top" >
<table width="220" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="15"><!-- --></td>
</tr>
<tr>
<td align="left" class="body-text-bold" style="font-size:16px;font-weight:bold;" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><strong>'.$deal['post_title'].'</strong></td>
</tr>
<tr>
<td height="16"><!-- --></td>
</tr>
<tr>
<td><!-- Red Box Start -->
<div class="red-box" style="background:#e9e9e9;border:1px solid #ccc;">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="7"><!-- --></td>
<td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="30"></td>
<td align="left" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_1" mc:allowdesigner="mc:allowdesigner">Τιμή</td>
<td width="30"></td>
</tr>
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="25"></td>
<td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_2" mc:allowdesigner="mc:allowdesigner">'.$price.'€</td>
<td width="20"></td>
</tr>
<tr>
<td height="5"></td>
</tr>
</table>
</td>
<td width="5"><!-- --></td>
<td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="10"><!-- --></td>
</tr>
<tr>
<td width="25"></td>
<td align="left" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_discount_1" mc:allowdesigner="mc:allowdesigner">Έκπτωση</td>
<td width="30"></td>
</tr>
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="35"></td>
<td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_discount_2" mc:allowdesigner="mc:allowdesigner">'.$discount.'</td>
<td width="5"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
<td width="5"><!-- --></td>
<td></td>
</tr>
<tr>
<td height="5"><!-- --></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="12"><!-- --></td>
</tr>
<tr>
<td align="left" class="body-text-bold" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><!--REMOVED BY DUSTIN '.$deal['post_content'].'--></td>
</tr>
<tr>
<td height="0"><!-- --></td>
</tr>
<tr>
<td align="center" mc:edit="top_box_image" mc:allowdesigner="mc:allowdesigner" width="120px" style="background-color:#ac0003; color:#ffffff; border:1px solid #660b0e;cursor: pointer; display: block; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-top:5px; padding-bottom:5px; text-decoration:none; "><a style="color:#ffffff; text-decoration:none;" href="'.$deal['guid'].'" class="">Δες το Deal</a> </td>
</tr>
</table>
</td>
<td width="0"><!-- --></td>
</tr>
</table>
In case this helps: I send the email through MailChimp using FEED tag.
Thanks in advance for any help!
Upvotes: 0
Views: 7637
Reputation: 159
Simply,you can't divide images vertically , if you then it will show 1px space--divide images horizontaly and try it. It will be solved
Upvotes: 0
Reputation: 193
I think this issue is being caused by the widths of your table cells. Try setting the width twice for each table cell like this:
<td width="10" style="width:10px;">
Also add the following embedded styles:
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
Tip: You might want to specify what version of Outlook is causing problems. Outlook 2007/2010/2013 react totally different to the same styling than Outlook 2003/2011 for example.
Upvotes: 1