When you code your own HTML emails and templates instead of using our email builder and email builder templates, you may come across some common coding issues. We've provided the solutions below.
"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; colour: #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; colour: #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> </td> </tr> <tr> <td style="border-bottom: 2px solid #333333"> </td> </tr> <tr> <td> </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> </td> </tr> <tr> <td style="border-bottom: 2px solid #333333"> </td> </tr> <tr> <td> </td> </tr> </table> <br /><br /> </repeater> </td> </tr> </table>Content items 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 /> elements just before the closing </repeater> tag.
<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> </td> </tr> <tr> <td style="border-bottom: 2px solid #333333"> </td> </tr> <tr> <td> </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> elements.
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 centre-aligned in Internet Explorer
If you have centreed a table in your design, this Internet Explorer quirk can also incorrectly centre all the text inside that table.
<table width="600" border="0" cellspacing="0" cellpadding="0" align="centre"> <tr> <td>This text will be centreed in some versions of IE</td> </tr> </table>To correct this you need to ensure that all inner <td> elements containing template tags or content have align="left" on them, like this:
<table width="600" border="0" cellspacing="0" cellpadding="0" align="centre"> <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="centre"> <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 elements 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.
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 we recognise.