"Read More" links wrapped in title tags glitching

Hello Campaign Monitor Community,

I've had some frustration with the CM Editor this morning trying to make "Read More" links in my template plain-text-editable strings for easier use when editing content in the future.

Originally I had these links wrapped in description tags, and they worked fine, but the way the links are styled, they would be pushed to the right of the rich text editor and more difficult to append links. To avoid this, I've wrapped them in title tags so that they are editable as a plain-text string, and so that it is easier to append a link.

Unfortunately, this has now led to new problems/glitches. When edited (and new link added), the text seems to take on the styling for <span> elements in the template (see styling source below). This is reverted again when the template is previewed, and I go back to the editor and the text is styled properly again (with new text and link).

The main concern with this is that the link 'disappears' when edited (span element is styled in white), and only returns after jumping between the preview and editing windows - just as much an issue as having to edit the links in rich-text in the first place.

I've included the relevant source code below:
Thanks in advance!

CSS (within HTML doc):

<style type="text/css">
body{ background-color:#908D8E;}

h1{ color:#5191CC; font-size:15px; font-weight:normal; font-family:'new baskerville', Times, serif; text-transform:uppercase; margin:0; padding:0; border-bottom:1px solid #9B9B9B;;}
h2{ color:#5191CC; font-size:15px; font-weight:normal; font-family:'new baskerville', Times, serif; margin:0; padding-bottom:0.5em;}
h3{ color:#231F1F; font-size:14px; font-weight:normal; font-family:'new baskerville', Times, serif; margin:0; padding-bottom:0.5em;}

p{ color:#5B5B5B; font-size:11px; font-family:Arial, Helvetica, sans-serif; line-height:1.2em; margin:0; padding-bottom:0.5em;}
p strong{ color:#231F1F;}
a, a:link, a:visited{ color:#5191CC; text-decoration:underline;}

small a, small a:link, small a:visited{ color:#FFFFFF;}
span a, span a:link, span a:visited{ color:#FFFFFF; text-decoration:none;}
span a:hover{ text-decoration:underline;}

small{ color:#FFFFFF; font-size:9px; font-family:Arial, Helvetica, sans-serif; line-height:2em; text-align:center;}
small strong{ color:#000000; font-weight:normal;}

img{ margin:0 !important; margin-right:0 !important;}

HTML Element:

<td><table width="560" cellspacing="0" cellpadding="0" border="0">
        <td width="150" valign="top">
            <img src="<$imagesrc link='true' default='assets/placeholder.gif'$>" width="150" alt="Assay Office Feature Story">
        <td width="20"><img src="assets/pixel.gif" height="1" width="20" alt=""></td>
        <td width="410" valign="top">
            <h2 style="color:#5191CC !important;"><$title default='Enter Feature Title Here'$></h2>
            <$description default='<p style="font-size:12px;">Enter feature story here</p>'$>
            <p style="text-align:right;"><a><$title link='true' default='> Read full story'$></a></p>
fantasticthinking fantasticthinking, 6 years ago

Hello again Campaign Monitor Community,

After a bit of investigation with Firebug, I concluded that the CM Editor was wrapping the text in <span> tags, which called the white-colour styling I set in place for links within <span> tags.

The way I resolved this was by adding a "spanreset" class to my CSS, and assigning this class to respective parent elements of the affected links.

Thought I would post the solution to anyone who might stumble upon this issue in the future.


.spanreset span a, .spanreset span a:link, .spanreset span a:visited{ color:#5191CC;}

Fantastic Thinking

From one-off email campaigns to global website rollouts, we have the knowledge and expertise to help you plan and deliver your online brand ambitions.

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