Highlighted

Email campaign text cut off in Outlook 2016

New Here ,
Nov 26, 2017

Copy link to clipboard

Copied

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!

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Email campaign text cut off in Outlook 2016

New Here ,
Nov 26, 2017

Copy link to clipboard

Copied

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!

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
New Here ,
Nov 26, 2017

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
New Here ,
Nov 26, 2017

Copy link to clipboard

Copied

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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>

<a name="top"></a>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

   <tr>

      <td><table width="742" border="0" align="center" cellpadding="0" cellspacing="0">

            <tr>

               <td height="183" colspan="3" valign="bottom" bgcolor="#003955"><a href="http://www...au"><img src="industry_update_short_.jpg" alt=" Industry Update" title=" Industry Update" width="742" height="183" border="0" style="display: inline; float: left;" /></a></td>

            </tr>

            <tr>

               <td valign="top" bgcolor="#ffffff"><img src="background_left2_.jpg" width="22" height="712" alt="" /></td><td width="700" valign="top" bgcolor="#f0efea"><table style="display: inline;" bgcolor="#f0efea" width="700" border="0" align="center" cellpadding="0" cellspacing="0"><tr valign="top"><td bgcolor="#f0efea"><table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#003955" style="display: inline; float: left;">

                              <tr style="color: #fff;">

                                 <td width="10" height="35" bgcolor="#003955"> </td>

                                 <td width="162" height="35" bgcolor="#003955" style="font-size: 18px; color: #ffffff; font-weight: bold;"><a href=https://www...au/news-and-media/industry-update/la-industry-update/industry-update-september-october..."><img src="Industry Update_Dec 2016/view web version.jpg" width="170" height="35" alt=""/></a></td>

                                 <td width="450" height="35" align="right" bgcolor="#003955" style="color: #fff !important;"><$currentday$> <$currentmonthname$> <$currentyear$>

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

                                 <td width="53" height="35" align="right" bgcolor="#003955" style="color: #fff;">  </td>

                                 <td width="15" height="35" align="right" bgcolor="#003955"> </td>

                              </tr>

                           </table></td>

                     </tr>

                     <tr>

                        <td width="700" height="30" bgcolor="#ffffff">

                        <h2 style="color: #003955; font-size: 15px; padding: 0; margin: 0 0 0 0;">

                          In this issue</td>

                     </tr>

                    <tr>

                        <td bgcolor="#f0efea"><table width="700" border="0" cellspacing="0" cellpadding="0">

                              <tableofcontents>

                                 <tr>

                                    <td height="15" colspan="3" bgcolor="#ffffff"></td>

                                 </tr>

                                 <tr>

                                    <td width="20" align="right" valign="top" bgcolor="#ffffff"></td>

                                    <td width="657" valign="top" bgcolor="#ffffff" style="font-size: 14px;"><repeatertitle /></td>

                                    <td width="23" valign="top" bgcolor="#ffffff"></td>

                                 </tr>

                              </tableofcontents>

                              <tr>

                                 <td height="15" colspan="3" bgcolor="#ffffff"></td>

                              </tr>

                           </table></td>

                     </tr>

                     <tr>

                        <td width="700" height="15" bgcolor="#f0efea"> </td>

                     </tr>

                     <tr>

                        <td width="700" bgcolor="#f0efea" valign="top"><repeater>

                              <table width="670" border="0" align="center" cellpadding="0" cellspacing="0">

                                 <tr>

                                    <td width="15" rowspan="6" bgcolor="#ffffff" valign="top"> </td>

                                    <td colspan="2" valign="middle" bgcolor="#ffffff"><img src="white_corner.jpg" alt="" width="54" height="29" align="right" /><br />

                                       <h2 style="color: #003955; font-size: 15px; padding: 0; margin: 0 0 0 0;">

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

                                       </h2></td>

                                 </tr>

                                 <tr>

                                    <td width="640" height="15" bgcolor="#ffffff" valign="top"> </td>

                                    <td width="15" rowspan="5" bgcolor="#ffffff" valign="top"> </td>

                                 </tr>

                                 <tr>

                                    <td width="640" bgcolor="#ffffff">

                                   

                                    <table class="imageCaption" width="235" border="0" align="left" cellpadding="0">

                                    <tr>

                                      

                                       <td width="220"><img label='Article Image' editable src="/images/placeholder1.jpg" width="220" alt="" /></td>

                                    <tr>

                                       <td height="10"><img src="spacer.gif" alt="" width="1" height="1" /></td>

                                    </tr>

                                 </table>

                                   

                                       <multiline label="Article Body">

                                         <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>

                                    <td height="5" bgcolor="#ffffff" valign="top"></td>

                                 </tr>

                                 <tr>

                                    <td height="15" bgcolor="#ffffff" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                                       <tr>

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

                                          <td align="right"><img editable src="read_more2_.jpg" width="112" /> <a href="#top" style="font-size: 11px;"><img src="top_.jpg" /></a></td>

                                       </tr>

                                    </table></td>

                                 </tr>

                                 <tr>

                                    <td width="640" height="15" bgcolor="#ffffff" valign="top"> </td>

                                 </tr>

                                 <tr>

                                    <td height="15" colspan="3" valign="top"> </td>

                                 </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>

               <td valign="top" bgcolor="#ffffff"> </td>

               <td height="20" valign="top" bgcolor="#ffffff"> </td>

               <td valign="top" bgcolor="#ffffff"> </td>

            </tr>

            <tr>

               <td height="20" colspan="3" valign="top" bgcolor="#ffffff"> </td>

            </tr>

            <tr>

               <td height="20" colspan="3" valign="top" bgcolor="#ffffff" style="color: #a09e93; font-size: 11px;">

                  </p></td>

            </tr>

      </table>

   </td></tr>

</table>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

This is your answer to your problem

See Constant Contact Knowledge Base for more.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
New Here ,
Nov 26, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

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?


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 1
Adobe Community Professional ,
Nov 27, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2017 1
New Here ,
Nov 27, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2017 0