Common template coding issues and how to avoid them

If you're having problems getting your template to work correctly, you've come to the right place. On this page you'll find troubleshooting advice and helpful links to get you back on track.

Of course, if you can't find a solution here, contact our support team for help, or search our forums.

Background information

This list of resources offer some good background knowledge for anyone who is just getting started:

Supported browsers

Before we dive in, it's worthwhile noting up front that we don't support Opera, and no longer support Internet Explorer 7 or Firefox 13.

If you're noticing odd behaviour in the editor when using these browsers, we'd highly recommend you update to the latest version of IE, Firefox or Chrome. The most recent prior versions of any of these browsers should work fine, too.

Common template coding issues

Below are solutions for some of the most common causes of template issues, plus clarification on what's possible and what's not when it comes to coding your campaigns in Campaign Monitor.

Table of contents

"No editable regions in repeater" error message

When importing your template, you may come across an error message, which reads:

"We found your <repeater> and </repeater> tags, but couldn't track down a <singleline>, <multiline> or <img editable="true" /> tag. You'll need one of these tags so you can add content to any repeating items."

If you see this, the first thing to check is whether or not you have a <singleline>, <multiline> or <img editable="true" /> tag within your <repeater></repeater> tags, as shown in the following example:

<repeater>
<h2><singleline label="Title" repeatertitle="true">Title of article</singleline></h2>
<multiline label="Article Body">Enter the full text</multiline>
</repeater>

If you do have the tags, next check to see if you have a closing </head> tag in your template. A template with the head opened but not closed can cause rendering problems in general, and will generate the error message noted above.

So double-check that your closing </head> tag appears before your opening <body> tag.

As an example, the following is coded incorrectly:

<html>
<head>
<title>Example 1: "No editable regions in repeater" error</title>
<style type="text/css">
p { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }
</style>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top" >
    <repeater>
        <h1><singleline label="Title" repeatertitle="true">Title of article</singleline></h1>
        <multiline label="Article Body">Enter the full text</multiline>
    </repeater>
    <unsubscribe>Click here to unsubscribe</unsubscribe>
    </td>
  </tr>
</table>
</body>
</html>

As you can see, line 2 contains an opening <head> tag but there is no accompanying closing </head> tag. 

Here is another incorrect example:

<html>
<head>
<title>Example 2: "No editable regions in repeater" error</title>
<style type="text/css">
p { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }
</style>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top" > 
    <repeater>
        <h1><singleline label="Title" repeatertitle="true">Title of article</singleline></h1>
        <multiline label="Article Body">Enter the full text</multiline>
    </repeater>
    <unsubscribe>Click here to unsubscribe</unsubscribe>
    </td>
  </tr>
</table>
</body>
</head>
</html>


There is a </head> tag, just before the closing </html> tag, but it appears after the opening <body> tag. This code would also produce an import error.

 

Cannot re-order content items


Repeating a single table row will not prevent your content items from being re-ordered. However if you try to include multiple table rows (but not the entire table), content items in that repeater can't be re-ordered.

To clarify, if you have a template which consists of a single table and you just want to include one of the table's rows in a repeater, the following will work fine:

<table width="600" border="0" cellspacing="0" cellpadding="0">
<repeater>
  <tr>
    <td align="left" valign="top" >
        <h1><singleline label="Title" repeatertitle="true">Title of article</singleline></h1>
        <multiline label="Article Body">Enter the full text</multiline>
    </td>
  </tr>
</repeater>
</table>


If you want to repeat multiple table rows, you need to include a complete table inside the repeater. The example below will not work:

<table width="600" border="0" cellspacing="0" cellpadding="0">
<repeater>
  <tr>
    <td align="left" valign="top" >
        <h1><singleline label="Title" repeatertitle="true">Title of article</singleline></h1>
        <multiline label="Article Body">Enter the full text</multiline>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td style="border-bottom: 2px solid #333333">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</repeater>
</table>


To make sure you can re-order content items, you'll need to create a second, nested table which contains all the table rows you want to repeat. Then, include this inside your <repeater></repeater> tags instead, as shown here:

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top">
    <repeater>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
          <td align="left" valign="top">
        <h1><singleline label="Title" repeatertitle="true">Title of article</singleline></h1>
        <multiline label="Article Body">Enter the full text</multiline>
          </td>
    </tr>
    <tr>
          <td>&nbsp;</td>
    </tr>
    <tr>
          <td style="border-bottom: 2px solid #333333">&nbsp;</td>
    </tr>
    <tr>
          <td>&nbsp;</td>
    </tr>
    </table>
    <br /><br />
    </repeater>
    </td>
  </tr>
</table>

 

Content items are 'floating' side-by-side

If you have more than one complete table inside a repeater without any spacing between them,  some browsers and email clients will cause your content items to sit, or 'float', side-by-side instead of on top of each other.  

Using the example below for instance, you'll notice we included a fixed width of 600px for the second, inner table as well as the outer table. We also included double <br /> tags just before the closing </repeater> tag (see line 22).

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top">
    <repeater>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
          <td align="left" valign="top">
        <h1><singleline label="Title" repeatertitle="true">Title of article</singleline></h1>
        <multiline label="Article Body">Enter the full text</multiline>
          </td>
    </tr>
    <tr>
          <td>&nbsp;</td>
    </tr>
    <tr>
          <td style="border-bottom: 2px solid #333333">&nbsp;</td>
    </tr>
    <tr>
          <td>&nbsp;</td>
    </tr>
    </table>
    <br /><br />
    </repeater>
    </td>
  </tr>
</table>

So, to prevent items floating side-by-side:

  • Set a fixed width for the table in your repeater, to match the width of the outer table it's contained within
  • Force a line break between the tables when two or more content items are added inside a single repeater.

 

Editable image inside a <singleline> or <multiline> tag does not appear

If you get this error message:

"Your template contains <singleline> or <img editable="true"> tags within an open <multiline>"
 

It's because it's not possible to have an editable image inside a <singleline> or <multiline> tag.  To include an image in your content item, you need to place it either above or below the <singleline> or <multiline> tags in your repeater.

The code snippet below shows the correct way to include an image within a content item:

<repeater>
<h2><singleline label="Title" repeatertitle="true">Title of article</singleline></h2>
<img editable="true" width="150" align="left">
<multiline label="Article Body">Enter the full text</multiline>
</repeater>


Coding it as shown above will align a single 150px wide image to the left-hand side of your content item, just below the heading in your <h2></h2> tags.

Inserting the <img editable="true" align="left"> tag inside the <multiline label="Article Body"></multiline> tag will not work, as shown here:

<repeater>
<h2><singleline label="Title" repeatertitle="true">Title of article</singleline></h2>
<multiline label="Article Body"><img editable="true" width="150" align="left">Enter the full text</multiline>
</repeater>

 

Template text is center-aligned in IE

If you have centered a table in your design, this IE quirk can also incorrectly center all the text inside that table.

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>This text will be centered in some versions of IE</td>
  </tr>
</table>


To correct this you need to ensure that all inner <td> tags containing template tags or content have align="left" on them, like this:

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="left">This text will always be left aligned</td>
  </tr>
</table>


You can also add valign="top" which will ensure content starts at the top of the cell, for example:

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="left" valign="top">This text will be aligned to the top left</td>
  </tr>
</table>

 

Completely <div>-based layout not appearing correctly

This is not an issue specific to templates, but it's worth mentioning here. Creating completely tableless templates, using floated and positioned <div> tags alone, will cause issues in a number of email clients, including Hotmail, Yahoo, Outlook 2007 and Lotus Notes.

If you're experiencing issues either in the editor, or in your email client, we'd strongly suggest re-coding your template so it uses a solely table-based layout. We cover this in more detail here.

 

Images not working properly in RSS templates

If you've setup your template to pull in data from an RSS feed, but you find images are not showing, or not displaying correctly, it may be that your RSS feed is not attaching images in a way Campaign Monitor can recognize. We cover this in more detail here.