Repeater section Title needs more line height

I have a repeater section that has a title that wraps onto two lines. The font is quite large though and so the lines are crossing over one another. I need to add line height but it would seem that adding this to the internal css add's line height to the entire content section.

Is there a work around for this?

Here's the 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>
<title>Crystal Ball's Predictions</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
a:link {
    color:#2777e9;
}
a:hover {
    color: #59b8cc;
}
.content h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #767572 !important;
    letter-spacing: -2px;
    line-height: 120%;
}
.address p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #767572;
    margin: 0;
    padding: 0;
    letter-spacing: -0.3px;
}
</style>
</head>
<body leftmargin="0" topmargin="0">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #ffffff; font-family: Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; font-size-adjust: none; color: #999999; line-height: 100%;">
  <tr>
    <td><table style="width: 600px;" border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
          <td style="height: 45px;" colspan="2"><table border="0" cellpadding="10" cellspacing="0" width="100%">
              <tr>
                <td style="font-family: Helvetica,Arial,sans-serif; font-size: 11px; color: #999999; padding-top: 15px;"><singleline label="Title">You are receiving this newsletter because you bought widgets from us.</singleline>
                  <br />
                  Having trouble reading this mail?
                  <webversion style="color:#2777e9;">View it in your browser</webversion>
                  .
                  Not interested anymore?
                  <unsubscribe style="color:#2777e9;">Unsubscribe</unsubscribe></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td colspan="3" style="background-image: url(images/header_top_separator.gif); background-repeat: no-repeat; height: 7px;"><img src="images/header_top_separator.gif" alt="" style="display: block;" height="7" width="600"></td>
        </tr>
        <tr>
          <td colspan="3" valign="top"><img style="width: 600px; height: 326px;" alt="Predictions Header" src="images/1107headerv2.png"></td>
        </tr>
        <tr>
          <td colspan="3" style="height: 16px; background-image: url(images/header_border.gif); background-repeat: no-repeat;" valign="top"><img style="width: 600px; height: 16px;" alt="header border" src="images/header_border.gif"></td>
        </tr>
        <tr>
          <td valign="top"><table border="0" cellpadding="0" cellspacing="0" width="398">
              <tr>
              </tr>
              <tr>
                <td style="height: 25px;" valign="top">&nbsp;</td>
              </tr>
              <tr>
                <td class="content" valign="top"><repeater>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td style="font-family: Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; color: #767572; letter-spacing: -2px; padding-bottom: 20px;"><singleline label="Title" repeatertitle="true">Enter Title Here</singleline></td>
                      </tr>
                      <tr>
                        <td style="font-family: Helvetica, Arial, sans-serif; color: #767572; padding: 0 0 10px;"><img alt="" width="398" style="padding-bottom: 20px;" editable="true" label="Image"/>
                         <p style="line-height: 1.4;"><multiline label="Description">
                            Your content here
                          </multiline></p></td>
                      </tr>
                      <tr>
                        <td style="padding: 0pt 0pt 20px; font-family: Helvetica,Arial,sans-serif; color: #999999;" valign="top"><img style="width: 398px; height: 40px;" src="images/article_separator.gif" alt="" /></td>
                      </tr>
                    </table>
                  </repeater></td>
              </tr>
            </table></td>
          <td valign="top"></td>
          <td valign="top"><table style="height: 84px;" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 30px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1">This issue:</td>
              </tr>
              <tr>
                <td valign="top"><table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tableofcontents>
                      <tr>
                        <td valign="top" width="18" style="width: 18px; background-image: url(images/list_bullets.gif); background-repeat: no-repeat;"><img src="images/list_bullets.gif" width="18" height="14" alt="" align="left"/></td>
                        <td width="160" align="left" valign="top" style="font-family: Helvetica, Arial, sans-serif; color:#ffffff; padding-bottom: 7px; line-height: 110%;"><repeatertitle></td>
                      </tr>
                      <tr>
                        <td colspan="2"><img src="images/list_separator.gif" width="179" height="10" alt="" /></td>
                      </tr>
                    </tableofcontents>
                  </table>
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td width="14" style="background-image: url(images/list_bullets.gif); width: 14px; background-repeat: no-repeat;" valign="top"></td>
                    </tr>
                    <tr>
                      <td colspan="2"><img src="images/list_separator.gif" width="179" height="10" alt="" /></td>
                    </tr>
                    <tr>
                      <td style="height: 25px" colspan="2">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <br />
            <table border="0" cellpadding="0" cellspacing="0" width="179">
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 30px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle">Quick Links:</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td valign="top"><a href="http://bit.ly/ozxnOv" target="_blank"><img src="images/lwpbrochurebutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="http://bit.ly/pc3QXZ" target="_blank"><img src="images/employersguidebutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="mailto:support@crystalball.tv?subject=training request" target="_blank"><img src="images/trainingbutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="http://bit.ly/ra78QU" target="_blank"><img src="images/handsetsbutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
              <tr>
                <td valign="top"><a href="mailto:support@crystalball.tv?subject=reseller query" target="_blank"><img src="images/contactusbutton.gif" width="179" height="37" alt="" /></a></td>
              </tr>
            </table>
            <br />
            <table border="0" cellpadding="0" cellspacing="0" width="179">
              <tr>
                <td style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
              </tr>
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 28px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1"> Follow Us:</td>
              </tr>
              <tr>
                <td valign="top" align="left"><table>
                    <tr>
                      <td valign="top"><a href="http://www.linkedin.com/company/crystal-ball-ltd" target="_blank"><img src="images/linkedinicon.png" width="32" height="32" alt="Follow Crystal Ball on Linkedin" /></a></td>
                      <td valign="top"><a href="http://twitter.com/crystalballltd" target="_blank"><img src="images/twittericon.png" width="32" height="32" alt="Follow Crystal Ball on Twitter" /></a></td>
                      <td valign="top"><a href="http://www.facebook.com/pages/Crystal-Ball-Ltd/161842783884510" target="_blank"><img src="images/facebookicon.png" width="32" height="32" alt="Follow Crystal Ball on Facebook" /></a></td>
                      <td valign="top"><a href="http://www.youtube.com/user/CrystalBallLtd" target="_blank"><img src="images/youtubeicon.png" width="32" height="32" alt="Follow Crystal Ball on Youtube" /></a></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
              </tr>
              <tr>
                <td style="height: 50px; font-family: Helvetica,Arial,sans-serif; font-size: 28px; font-weight: bold; color: #999999; letter-spacing: -2px; line-height: 110%; padding-top: 20px; padding-bottom: 20px;" valign="middle" colspan="1">Email a Friend:</td>
              </tr>
              <tr>
                <td valign="top"> Know someone who might be interested? <br />
                  <forwardtoafriend style="color:#2777e9;">Forward it to them</forwardtoafriend>
                  . </td>
              </tr>
              <tr>
                <td style="height: 37px"><img src="images/sidebar_border.gif" height="37" alt="" /></td>
              </tr>
            </table></td>
        </tr>
      </table>
      <table width="600" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td style="background-image: url(images/header_border.gif); background-repeat: no-repeat; height: 16px;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="color: #999999; padding-top: 10px;" width="600">
              


<tr>
    <td class="address" valign="top" width="600" height="150" background="images/footer.gif" style="background-repeat: no-repeat;">
    
    <!--[if gte mso 9]>
         <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:150px; width:600px; top:0; left:0; border:0; z-index:1;' src="http://www.adamcasey.co/footer.gif"/>
         <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:150px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
      <![endif]-->

      <multiline label="Description">Some text here</multiline>
      
            <!--[if gte mso 9]>
         </v:shape>
      <![endif]-->
      
      </td>
  </tr>



            </table></td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Hi adamlcasey, the issue is the line-height: 100% in your table tag, ie. <table ... line-height: 100%;">. Simply remove this line-height property and the heading will un-collapse. :)

If you would like to apply line height selectively to this heading, you can try:

<span style="line-height: 1.4;"><singleline label="Title">You are receiving this newsletter because you bought widgets from us.</singleline></span>

Universally applying line-height to tables and body tags can cause all sorts of problems, so be careful with this one - I usually just use it on headings and <p>. Hope this helps!


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

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