CSS styles are dropped when text is edited

I've built several templates for my client and the email looks fine if the text is left as the default, but as soon as the text is changed using the editor, it loses the styling I've set up. Does anyone know how to fix this?

Thanks,
Dave

rally1, 6 years ago

This is my code:

<!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>Camp Squeah</title>
<style type="text/css">
<!--
* {
    margin: 0;
}

body {
    width:647px;
    margin: 0 auto;
}
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height:1.5em;
    color:#767676;
}
.style2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #d5a134;
    font-weight: bold;
}
.style3 {
    color: #d5a134;
    font-weight: bold;
}
.style5 {
    font-size: 10px;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style6 {
    font-size: 12px;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}
-->
</style>
</head>

<body bgcolor="#d6d5d5" alink="#767676" link="#767676" vlink="#767676">

<table bgcolor="#FFFFFF" width="647" border="0" cellpadding="0" align="center" cellspacing="0">
    <tr>
         <td colspan="3" align="center">
             <unsubscribe><span class="style1">Unsubscribe</span></unsubscribe><span class="style1"> | <webversion>View in a browser</webversion> | <forwardtoafriend>Forward to a friend</forwardtoafriend>
          </span></td>
    </tr>
  <tr>
    <td colspan="3"><img src="images/squeah_graphemail_1627_03a_02.jpg" width="645" height="295" alt="Camp Squeah" /></td>
    </tr>
  <tr>
    <td width="212"><img src="images/squeah_graphemail_1627_03a_04.jpg" alt="hikers" width="212" height="245" align="bottom" /></td>
    <td width="435" colspan="2" valign="top">
      <p class="style2"><$title default='Family Reunions, Community Groups,<br />
      Teambuilding Retreats, and more...'$></p>

BThies BThies, 6 years ago

Without figuring out the "why" (it's too early here and no coffee yet), here's a quick fix:

<!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>Camp Squeah</title>
<style type="text/css">
<!--
* {
    margin: 0;
}

body {
    width:647px;
    margin: 0 auto;
}
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height:1.5em;
    color:#767676;
}
.style2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #d5a134;
    font-weight: bold;
}
.style3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #d5a134;
    font-weight: bold;
}
.style5 {
    font-size: 10px;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style6 {
    font-size: 12px;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}
-->
</style>
</head>

<body bgcolor="#d6d5d5" alink="#767676" link="#767676" vlink="#767676">

<table bgcolor="#FFFFFF" width="647" border="0" cellpadding="0" align="center" cellspacing="0">
    <tr>
         <td colspan="3" align="center">
             <unsubscribe><span class="style1">Unsubscribe</span></unsubscribe><span class="style1"> | <webversion>View in a browser</webversion> | <forwardtoafriend>Forward to a friend</forwardtoafriend>
          </span></td>
    </tr>
  <tr>
    <td colspan="3"><img src="images/squeah_graphemail_1627_03a_02.jpg" width="645" height="295" alt="Camp Squeah" /></td>
    </tr>
  <tr>
    <td width="212"><img src="images/squeah_graphemail_1627_03a_04.jpg" alt="Hikers" width="212" height="245" align="bottom" /></td>
    <td width="435" colspan="2" valign="top">
      <p><span class="style2"><$title default='Family Reunions, Community Groups,<br />
      Teambuilding Retreats, and more...'$></span></p>
     
        &nbsp;<p><span class="style1"><$description default='Curabitur vel sem sed urna commodo lobortis. Curabitur feugiat ante a elit dignissim semper. Etiam nec nisi sodales nisl.'$></span> <a href="#" class="style3"><span class="style3"><$description default='Learn more'$></span></a></p>
    </td>
    </tr>
</table>
<table bgcolor="#FFFFFF" width="647" align="center" cellpadding="10" cellspacing="0">
  <tr>
    <td width="302" bgcolor="#71cce0"><span class="style6">FOOD</span></td>
    <td width="303" bgcolor="#bbc31e"><span class="style6">FELLOWSHIP</span></td>
  </tr>
</table>
<table width="647" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="264"><img src="<$imagesrc default='images/2-col_03.jpg' link='false' $>" width="322" height="125" alt="Food" /></td>
    <td width="268"><img src="<$imagesrc default='images/2-col_05.jpg' link='false' $>" width="322" height="125" alt="Fellowship" /></td>
  </tr>
</table>
<table bgcolor="#FFFFFF" width="647" align="center" cellpadding="10" cellspacing="0">
  <tr>
    <td width="300">
    <p><span class="style1"><$description default='Curabitur vel sem sed urna commodo lobortis. Curabitur feugiat ante a elit dignissim semper. Etiam nec nisi sodales nisl.'$></span> <a href="#" class="style3"><$description default='Learn more'$></span></a></p>
</td>
    <td width="305">   
    <p><span class="style1"><$description default='Curabitur vel sem sed urna commodo lobortis. Curabitur feugiat ante a elit dignissim semper. Etiam nec nisi sodales nisl.'$></span> <a href="#" class="style3"><span class="style3"><$description default='Learn more'$></span></a></p>
    </td>
  </tr>
</table>
  <table width="646" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="211" bgcolor="#d5a134"><img src="images/squeah_graphemail_1627_03a_11.jpg" width="211" height="" alt="logo" /></td>
    <td width="423" colspan="2" bgcolor="#d5a134"><span class="style5">#4 - 27915 Trans Canada Hwy. Hope, BC  V0X 1L3   |  tel: 604-869-5353<br />Owned by : Mennonite Church British Columbia</span></td>
  </tr>
</table>


</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
rally1, 6 years ago

Perfect! Thanks so much for your help.

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