Email campaign text cut off in Outlook 2016

Report · Nov 26, 2017

Hi there,

I've been given this html file that is for an email campaign that is being sent out via Campaign Monitor, however when I send a test to my Outlook a section of the text is being cut off and I cannot work out how to fix this.

The text sections is in multiline tags, which had previously worked in the older versions of Outlook but not in 2016.

I appreciate any help.

Thanks!

Report · Nov 26, 2017

Without a look at the code, it's impossible to guess what might be going on in Outlook.

Did you try validating the HTML code to see if it contains any critical errors?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 26, 2017

Hi Nancy

I validated the code and it came back with some errors, but I'm having some trouble understanding how to fix this particular issue.

I've posted the code below (omitting branding)

Report · Nov 26, 2017

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<style>

td

{

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #63676d;

}

h2

{

font-size: 15px;

padding: 0;

margin: 0 0 10px 0;

}

p

{

padding-top: 10px;

padding-right: 10px;

padding-left: 10px;

padding-bottom: 10px;

Margin: 0 0 10px 0;

line-height: 17px;

}

a

{

color: #003955;

text-decoration: none;

}

img

{

display: inline;

border: 25px none;

Margin: 20;

}

.cs-button-block

{

position: relative !important;

}

.shareLinks img

{

display: inline !important;

padding: 0 5px 0 0;

margin: 0;

}

.shareLinks a

{

display: inline !important;

padding: 0;

margin: 0;

}

.shareLinks p, .shareLinks span

{

margin-bottom: 0;

line-height: 16px;

}

.imageCaption

{

float: left;

}

</style>

</head>

<body>

<tr>

<tr>

</tr>

<tr>

| <a style="color: #ffffff;" href="http://www...au"><strong>www...au</strong></a></td>

</tr>

</table></td>

</tr>

<tr>

In this issue</td>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

</tableofcontents>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

<tr>

<singleline label="Title" repeatertitle='true'> Title</singleline>

</h2></td>

</tr>

<tr>

</tr>

<tr>

<tr>

<tr>

</tr>

</table>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</multiline>

</td></tr>

<tr>

</tr>

<tr>

<tr>

<td valign="bottom" class="shareLinks"><multiline label="Share Links">Share links go here</multiline></td>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</repeater>

</td></tr>

</table>

</td><td valign="top" bgcolor="#ffffff"><img src="background_right2_.jpg" width="20" height="426" alt="" /></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</p></td>

</tr>

</table>

</td></tr>

</table>

</body>

</html>

Report · Nov 26, 2017

This is your answer to your problem

See Constant Contact Knowledge Base for more.

Wappler, the only real Dreamweaver alternative.

Report · Nov 26, 2017

Hi Ben,

Thanks for your response. However it isn't the image not displaying that is the issue, it's that the left side of the text (lorem ipsum) is being chopped off.

It displays ok when I view it in Dreamweaver and Campaign Monitor but in Outlook the text keeps getting cropped.

Thanks!

Report · Nov 26, 2017

I think that you will find that the replacement image container takes up more space than the actual image, thus cutting off some of your text.

Could you give us a screen capture of an email that shows the correct image?

Wappler, the only real Dreamweaver alternative.

Report · Nov 27, 2017

Here's a screen grab of the image in the email. The image is 400 x 200

Report · Nov 27, 2017

Outlook has very dodgy CSS support as noted in Campaign Monitor's guide on creating HTML emails. A designer’s guide to Outlook 2013 and Office 365 | Campaign Monitor

Also, margin is not properly expressed below. 20 what - pxx, em, %?

img

{

display: inline;

border: 25px none;

Margin: 20;

}

Nancy O'Shea— Product User, Community Expert & Moderator