Table of contents not displaying correctly

Hi there

I am trying to make a dynamic newsletter template for one of our clients that contains a main description and repeatable articles that should culminate into a table contents. While everything else works ok, the table of contents fails to generate and I have looked exhaustively over my code to try and identify where I might be in error. The output (when I preview the newsletter) simply renders <$repeatertitle$> where it should render the TOC.

When I look at the preview of the newsletter and analyse the code, it appears that the system is replacing my "<" and ">" for the <$repeatertitle$> tag with HTML entity equivelant (ie. "&gt; and &lt;)

I have placed my code below. Please could you tell me where I might be going wrong.

<html lang="en">
<head>
<style type="text/css">
<!--
* {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
}
body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background-color: #e9e3dd;
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 11px;
    color: #171616;
}
a {
    color: #288e2a;
}
table {
    margin: auto;
}
.container {
    width: 600px;
    margin: auto;
}

.article {
    margin: auto;
    margin-top: 20px;
    text-align: left;
}
    .article h1 {
        font-size: 14px;
        color: #288e2a;
        text-align: left;
    }
    .article h2 {
        font-size: 12px;
    }
    .article p {
        margin-bottom: 10px;
    }
    .article ul {
        margin-left: 15px;
    }
        .article ul li {
            font-weight: bold;
        }
    .article .atitle {
        padding-bottom: 10px;
    }
    .article .date {
        float: right;
        font-size: 14px;
        font-weight: bold;
        color: #a8874f;
        background-image: url(../Copy%20of%2020090801/datebullet.gif);
        background-repeat: no-repeat;
        padding-left: 13px;
    }
    .article .content {
        background-color: #FFFFFF;
        border-top: solid 3px #a8874f;
        padding: 5px 10px 5px 10px;
        margin-bottom: 20px;
    }
        .article .content .text {
            width: 345px;
            float: left;
            text-align: justify;
        }
        .article .content img {
            float: left;
            margin: 5px 10px auto auto;
        }
        .article .top {
            text-align: right;
            border: none !important;
            background: #FFFFFF;
            padding: 5px 10px 5px 10px;
            margin-bottom: 10px;
        }
    .article .toc {
        padding-left: 10px;
        margin-bottom: 40px;
    }
.footer {
    font-weight: bold;
    text-align: left;
    padding-left: 35px;
    padding-top: 20px;
}
    .footer p {
        margin: 0px;
    }
-->
</style>
</head>

<body>

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="logo.png" width="600" height="149" /> <img src="sublogopics.jpg" width="600" height="179" /></td>
  </tr>
  <tr>
    <td><img src="<$imagesrc link='false'$>" width="600" height="58" /></td>
  </tr>
  <tr>
    <td><table width="570" border="0" cellspacing="0" cellpadding="0" class="article">
      <tr>
        <td class="content"><p>Dear  [fullname,fallback=Valued Customer]</p>
          <$description default='Enter introductory text here.'$>
          </td>
      </tr>
      <tr>
        <td><div class="toc"> <a name="top" id="top"></a>
            <h1>IN THIS ISSUE</h1>
            <ul>
               <tableOfContents>
                 <li><$repeatertitle$></li>
               </tableOfContents>
            </ul>
        </div></td>
      </tr>
      
    </table></td>
  </tr>
  <tr>
    <td>
     <repeater toc='true'>
    <table width="570" border="0" cellspacing="0" cellpadding="0" class="article">
      <tr><td colspan="2" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td align="left" class="atitle"><h1><$title default='Enter your title' $></h1></td>
                <td align="right" class="atitle">&nbsp;</td>
              </tr>
            </table></td>
        <tr>
        <td valign="top" class="content"><img src="<$imagesrc link='false'$>" width="193" height="134" /></td>
        <td class="content"><$description default='<p>Enter body content here.</p>'$></td>
      </tr>
      <tr>
        <td colspan="2" align="right" valign="top" class="top"><a href="#top">Back to top</a></td>
        </tr>
    </table>    <br /></repeater> </td>
  </tr>
  <tr>
    <td class="footer">
    <p><unsubscribe>Unsubscribe</unsubscribe></p></td>
  </tr>
</table>
</body>
</html>
surfacemedia, 6 years ago

I'm having the same problem with mine. I actually used the exact same code before though in an email 2 weeks ago and now it's not working - all I've done with the newsletter is replace the image.

templecreative, in your case, does changing the case of your table of contents tag make a difference? i.e. you've written <tableOfContents> rather than the website reference which states the tag as lowercase <tableofcontents>.

my code is below:

for table of contents:

<ul>
                            <tableofcontents>
                                   <li>
                                    <$repeatertitle$>
                                </li>
                            </tableofcontents>
                        </ul>

for repeater:

 

<repeater toc='true'>
            <!-- [START] additional story -->
            <table id="additional_story" width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2">
                        <img src="images/story_top_round.jpg" />
                    </td>
                </tr>
                <tr class="article">
                    <td class="left" valign="top" width="230">
                        <img src="<$imagesrc link='true'$>" width="211" />
                    </td>
                    <td class="right" valign="top">
                        <div id="articleContent">
                            <h1>
                                <$title$>
                            </h1>
                                <$description default="This is the description text"$>
                            <table id="calltoactions" width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td>

                                    </td>
                                    <td id="sendtofriend">
                                        <forwardtoafriend>Send to a friend</a></forwardtoafriend><img src="images/email_purple.jpg" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <img src="images/story_bottom_round.jpg" />
                    </td>
                </tr>
            </table>
            <!-- [END] additional story -->    
            </repeater>

Any assistance from campaign monitor team would be much appreciated. Like I said, this exact code works correctly in another template.

Mathew Mathew, 6 years ago

Hi,

If you can contact support, letting us know which specific templates you are working with, we can take a look and help you out.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Calluna8252, 6 years ago

I'm having the same issue and have contacted support... I'll let you know if I hear anything back. Good to know it's not just me :)

Calluna8252, 6 years ago

Support just got back to me and told me it's the wildcard styles (*) in my <head> tags.

Try removing those and it should solve the problem.

Mathew Mathew, 6 years ago

Thanks for posting that update, very helpful.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
surfacemedia, 6 years ago

Cool, yep, that did the trick. Does this mean that the previous template I created needs to be updated too? When I view a preview of the previous campaign it's still being displayed correctly. What do you think?

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098