How do I make my images and text areas align in Outlook? (Classic Editor)

Classic Editor

Outlook is notorious for rendering HTML emails differently from other email clients. The main reason for these differences is due to the technology used by Outlook 2007 and beyond to process your HTML and display it to the recipient: Microsoft Word. Using a word processing engine to render emails has its drawbacks. Outlook has trouble displaying side-by-side content in the right places and sometimes adds large spaces in wrong places for no apparent reason.

 

Here are a few common Outlook rendering issues and some possible solutions:

Side by side elements are not aligning.

Your test emails are showing misaligned side-by-side images and text areas.

  • Add a Background area behind your side-by-side elements.

hdiaio.JPG

  • Try making the side-by-side elements the same height in your Layout. Keep in mind your text and image areas will grow in height based on the content that is placed inside the element.

Buttons and text are not aligning in text areas.

You can fix this by adding some HTML table code to your text area. Outlook loves tables!

Table code looks like this:

<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td valign="top"><span style="font-size: 13px;"><span style="font-size: 14px;"><strong><a class="button" style="padding: 4px;" href="www.mctommerson.org" target="_blank">TICKETS1</a></strong></span></span></td>
<td valign="top"><span style="font-size: 13px;"><span style="font-size: 14px;"><strong><a class="button" style="padding: 4px;" href="www.mctommerson.org/tickets" target="_blank">TICKETS2</a></strong></span></span></td>
</tr>
</tbody>
</table>

 

Here is how to add the above table code to your text area:

 

1. Go to your Email Template, then hover over your text area and select Edit Content.

hdiaio1.JPG

2. In the text editor, click the HTML icon.

hdiaio2.JPG

3. Locate your buttons or images and text, then add the table code in a way that wraps the content in the tables.

hdiaio3.JPG

4. Select Update in the HTML window and then select Done in the text editor. Save your email template after making changes.

 hdiaio4.JPG

hdiaio5.JPG

There's a large space in the template that doesn't appear in preview.

In Outlook 2007+ Microsoft added a feature to their email client that breaks the email at the point where there would be a page break if it were printed. The only way to work around this is by adjusting the content in your email template. Sometimes it can be resolved with small tweaks like removing one line of text or making an image smaller, other times the content must be moved up or down around the page break to resolve how Outlook displays the email.

The best way to troubleshoot this is to open the email in Outlook and go to Print. Next to the print options is the print preview. You'll be able to see how the page is breaking in the preview. Try to find some ways to move your email content so that it doesn't hit right at the break but instead sits above or below it in tidy sections.

 

Have more questions? Submit a request
Powered by Zendesk