Hi everyone,I have an email template where there is a slight bug rendering in Outlook 2013.The screenshot shown in the image below, shows a “cutout” at the top left of the brown box on the right. This isn’t showing in other email clients or even in earlier versions of outlook. I wondered if anyone knows of a workaround to get this to work in Outlook 2013?
I’ll post the full code in a separate post due to length.
Really appreciate any help.
Yes, we can’t debug an image. Remember to highlight your code and use the </> button to format it as code.
I had to upload it due to the amount of code
Hi,
I’ve given a link to the full code but I thought that an extract might be helpful in order to troubleshoot. The following code is the table that isn’t rendering correctly in Outlook 2013:
<table width="175" align="right" cellpadding="10" cellspacing="0" border="0" style="font-size: 0;line-height: 0;border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="miResizeTable">
<tr>
<td width="100%" valign="top" bgcolor="#ABA26F" cellpadding="10" style="font-size: 12px; color: #ffffff; text-align: left; font-weight: normal; font-family: Helvetica, Arial, sans-serif; line-height: 20px;"><p style="padding: 0; margin: 0; font-weight: bold;" ice:editable="line">Date</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">Wednesday, 27 August 2014</p>
<p style="padding: 0; margin: 0; font-weight: bold;" ice:editable="line">Time</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">6.00pm
(Preceded by drinks starting from 5.30pm)</p>
<p style="padding: 0; margin: 0;font-weight: bold;" ice:editable="line">Venue</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">Sample Venue,
100 Sample Street
City</p>
<p style="padding: 0; margin: 0;font-weight: bold;" ice:editable="line">Refreshments</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">Guests will break for drinks and canapes</p>
<p style="padding: 0; margin: 0;font-weight: bold;" ice:editable="line">Cost</p>
<p style="padding: 0; margin: 0;" ice:editable="multiline">$20 $10 (Student Concession)</p></td>
</tr>
<tr>
<td width="100%" height="10" style="font-size: 0;line-height: 0;border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"></td>
</tr>
</table>
The following code includes the above code plus surrounding code:
<!-- Event Summary -->
<table width="175" align="right" cellpadding="10" cellspacing="0" border="0" style="font-size: 0;line-height: 0;border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="miResizeTable">
<tr>
<td width="100%" valign="top" bgcolor="#ABA26F" cellpadding="10" style="font-size: 12px; color: #ffffff; text-align: left; font-weight: normal; font-family: Helvetica, Arial, sans-serif; line-height: 20px;"><p style="padding: 0; margin: 0; font-weight: bold;" ice:editable="line">Date</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">Wednesday, 27 August 2014</p>
<p style="padding: 0; margin: 0; font-weight: bold;" ice:editable="line">Time</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">6.00pm
(Preceded by drinks starting from 5.30pm)</p>
<p style="padding: 0; margin: 0;font-weight: bold;" ice:editable="line">Venue</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">Sample Venue,
100 Sample Street
City</p>
<p style="padding: 0; margin: 0;font-weight: bold;" ice:editable="line">Refreshments</p>
<p style="padding: 0; margin: 0; margin-bottom: 15px;" ice:editable="multiline">Guests will break for drinks and canapes</p>
<p style="padding: 0; margin: 0;font-weight: bold;" ice:editable="line">Cost</p>
<p style="padding: 0; margin: 0;" ice:editable="multiline">$20 $10 (Student Concession)</p></td>
</tr>
<tr>
<td width="100%" height="10" style="font-size: 0;line-height: 0;border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"></td>
</tr>
</table>
<!-- End of Event Summary -->
Looks to me that the problem is with the “Dear GW” more that with the sidebar
As I said in my original post, the side bar is not rendering correctly in Outlook 2013. The screenshot and numerous tests have indicated this. Is anyone able to help me troubleshoot this as I don’t understand the last reply? I just realised that I posted duplicate code above however the full code is located at the link given earlier.
Thanks
I think the point was that the first line of the left side text (“Dear user”) might be overlapping the sidebar a little. It’s really hard to tell, though, unless you have Outlook13. I only have 10 and there’s no problem.
Outlook (and its creator company) absolutely sucks, unfortunately, and it’s an endless job to debug this kind of nonsense. I can’t see an obvious problem in the code that might cause this, so you might just have to experiment. For example, try setting a smaller width on the "Dear " line to see if that stops it overlapping the sidebar. If not, then you can probably rule that one out.
Next thing I’d try is to remove the <p> around “Date”. I tend not to use p elements in email, as clients render them is such odd and annoying ways.
Actually, taking another look, I’d say the problem is this bit between the two columns:
<table class="MobileErase" width="1" border="0" cellpadding="0" cellspacing="0" align="right" style="font-size: 0;line-height: 0;border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody><tr><td width="0" height="20" style="font-size: 0;line-height: 0;border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<p style="padding-left: 20px;"> </p>
</td></tr>
</tbody></table>
I suspect that’s causing the problem.
I also find it odd that the left column comes before the right column in the HTML. Try to make your structures as bulletproof as possible. First, wrap the whole email in one table. For each section (such as the section with two columns) wrap all that in a tr and td. Then have a table in that with cells that sit side by side as the columns. If you want a gap between columns, include an extra, narrow cell. Set px widths on every cell to lock them down.
That sort of approach is much more reliable.
Ok great - thanks for the detailed response. I’ll try those troubleshooting tips.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.