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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098