Gmail Text issue

This is an odd problem that i have never seen before. Gmail is bunching up my <h2> tags so that text gets condensed into a small space and each letter is over lad over the top of the previous

Has anyone come across this?

Mathew Mathew, 6 years ago

I haven't seen that one - do you have a screenshot or some code posted somewhere for people to take a look at?


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

here is a copy of the whole thing since i am having problem uploading an image to my server.

Its only happing to the <H2> tags



<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Debut Marketing E-Newsletter</title>
   <style type="text/css" media="screen">
      body {
         background-color: #f5f6f4;
         margin: 0;
         padding: 0;
      }
      hr{
          background-color: #ff9900;
          height:1px;
          border:none;
          
      }

      a img {
         border: none;
      }

      a {
         border: none;
      }

      td.permission {
         padding: 30px 0 10px 0;
      }

      .permission {
         font-family: 'Lucida Grande';
         font-size: 10px;
         color: #666666;
         padding: 4px 0 4px 0;
      }

      .permission a {
         color: #333333;
      }

      .permission p {
         margin: 0 0 4px 0;
      }

      .header {
         background-color: #232124;
         border-left:1px solid #666666;
         border-top:1px solid #666666;
         border-right:1px solid #666666;
      }

      .header h1 {
          font-family: Georgia;
          font-size: 32px;
          font-weight: normal;
          color: #bfbfbf;
          display: inline;
          text-align: left;}

      .date h3 {
          font-family: Georgia;
          font-size: 14px;
          color: #bfbfbf;
          font-weight: normal;
          text-align: right;
          display: inline;
          font-style: italic;
      }

      .body {
         background-color: #fbbc60;

      }

      td.mainbar {
          padding: 22px 14px 0 24px;
          text-align: left;
      }

   .mainbar p {
          font-family: 'Arial';
          font-size: 12px;
          color: #333333;
        padding-top:10px;
          text-align: left;
      }

      .mainbar p.first {
          margin-top: 10px;
      }

      .mainbar h2 {
          font-family: 'Myriad Pro', 'Arial';
          font-size: 24px;
          color: #333333;
          text-transform: uppercase;
          margin: 0 0 16px 0;
      }

      .mainbar a {
          font-family: 'arial';
          font-size: 13px;
          color: #2679b9;
          font-style: italic;
        text-decoration:none;
      }

      .right {
          font-size: 12px;
          color: #333333;
          padding: 8px 0 10px 0;
          text-decoration: none;
        font-style: normal;
      }
      


          .issue{
        text-align:left;
        padding:10px 20px 10px 30px;
        overflow:hidden;
        }
       
     .issue h2 {
         color:#999999;
         margin:0;
         padding:0 0 0 0;
         font-size:24px;
         font-weight:bold;
         font-family:Myriad Pro, Arial, sans-serif;
         
      }
      .issue hr{
          margin: 0;
          padding:0;
      }

      .issue ul {
         font-size: 12px;
         color: #232124;
         padding: 0;
         margin:0;
         list-style-type: circle;
         list-style-position:inside;
         text-indent:-12px;
        
       }

      .issue ul a, .issue ul a span {
          font-family: 'Myriad Pro';
        text-transform: uppercase;
          font-size: 14px;
          color: #999999;
        padding:0;
        margin:0;
        text-decoration:none;
      }
      .isssue p{
          line-height:10px;
          margin:0;
          padding:0;
      }
 
      .contentBox{
          background-color:#f8b14c;
          padding: 15px 30px 15px 30px;
      }


      .contact{
         background-color:#2c2c2c;
         border-left:1px solid #666666;
         border-bottom:1px solid #666666;
         border-right:1px solid #666666;
        
      }
      .contact p {
        font-family:'Arial';
        font-size:12px;
        color:#999999;
      }
      .contact .first_letter{
          color:#cccccc;
          font-weight:bold;
      }
      .contact a, .contact a span{
          color:#CCCCCC;
          text-decoration:none;
      }

      .footer {
          padding: 20px 0 10px 0;

       
         
      }

      .footer p {
          color: #a1a1a1;
          font-size: 11px;
          margin: 0;
          padding: 0;
      }

      .footer p.first {
          margin: 14px 0 0 0;
      }

      .footer a {
          font-family: 'Lucida Grande';
          font-size: 11px;
          color: #2679b9;
      }
      .footer .line{
          border-right:1px solid #666666;
      }

   </style>

</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#333333">
<tr>
      <td align="center">
         <table width="600" cellspacing="0" cellpadding="0" >
            <tr>
               <td height="20"><a href="#" name="top"></a>
                 
               </td>
            </tr>
            <tr>
               <td height="77" align="left" class="header">
                  <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#232124">
                     <tr>
                        <td><img src="<$imagesrc link='false'$>" width="600" height="151" alt="Debut Marketing" style="display:block; border-collapse:collapse;"></td>
                     </tr>
                     <tr>
                       <td><table width="100%" height="135" border="0" cellpadding="0" cellspacing="0" bgcolor="#232124">
                         <tr>
                           <td width="21" valign="top"><img src="images/headerLeft.jpg" width="21" height="135" style="display:block; border-collapse:collapse;"></td>
                           <td bgcolor="#232124" valign="top" class="issue">
                           <h2>IN THIS ISSUE</h2>
<hr size="1"/>                                 
<ul>
<li><a href="#1"><$description default='Enter Title here.'$></a></li>
<li><a href="#2"><$description default='Enter Title here.'$></a></li>
<li><a href="#3"><$description default='Enter Title here.'$></a></li>
<li><a href="#4"><$description default='Enter Title here.'$></a></li>
</ul>

                           </td>
                           <td width="21" valign="top"><img src="images/headerRight.jpg" width="21" height="135" style="display:block; border-collapse:collapse;"></td>
                         </tr>
                       </table></td>
                     </tr>
                     <tr>
                       <td valign="top"><img src="images/headerBot.jpg" width="601" height="26" style="display:block; border-collapse:collapse;"></td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td align="center">
         <table width="600" cellspacing="0" cellpadding="0" class="body">
            <tr>               
              <td align="center" valign="top" class="mainbar">
                <h2><a name="1"></a><img src="<$imagesrc link='false'$>" width="22" height="22" alt="title">&nbsp;&nbsp;<$description default='Enter Title here.'$></h2>
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="contentBox">
                  <tr>
                     <td>
                       <$description default='<p>Enter body content here.</p>'$>
                       <p><img src="<$imagesrc link='false'$>" width="500" height="74"></p></td>
                  </tr>
                </table>

                <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" class="right">
                 <tr>
                        <td width="480px">&nbsp;</td>
                    <td width="77px"><a href="#top"><p align="right">Back to top^</p></a></td>
                 </tr>
                </table>

                 
                  <hr size="1"/>
                 
                <h2><a name="2"></a><img src="<$imagesrc link='false'$>" width="22" height="22" alt="title">&nbsp;&nbsp;<$description default='Enter Title here.'$></h2>

                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="contentBox">
                  <tr>
                     <td><$description default='<p>Enter body content here.</p>'$>
                       <p><img src="<$imagesrc link='false'$>" width="500" height="195"></p></td>
                  </tr>
                </table>
                <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" class="right">
                 <tr>
                        <td width="480px">&nbsp;</td>
                    <td width="77px"><a href="#top"><p align="right">Back to top^</p></a></td>
                 </tr>
                </table>
                 <hr size="1"/>

                <h2><a name="3"></a><img src="<$imagesrc link='false'$>" width="22" height="22" alt="title">&nbsp;&nbsp;<$description default='Enter Title here.'$></h2>

                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="contentBox">
                  <tr>
                    <td><p><img src="<$imagesrc link='false'$>" width="180" height="163" align="right"></p>
                      <$description default='<p>Enter body content here.</p>'$>
                       </td>
                  </tr>
                </table>
                <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" class="right">
                 <tr>
                        <td width="480px">&nbsp;</td>
                    <td width="77px"><a href="#top"><p align="right">Back to top^</p></a></td>
                 </tr>
                </table>
                <hr/>
                 
                  <h2><a name="4"></a><img src="<$imagesrc link='false'$>" width="22" height="22" alt="title">&nbsp;&nbsp;<$description default='Enter Title here.'$></h2>
                <$description default='<p>Enter body content here.</p>'$>
              <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" class="right">
                 <tr>
                        <td width="480px">&nbsp;</td>
                    <td width="77px"><a href="#top"><p align="right">Back to top^</p></a></td>
                 </tr>
                </table>
                 </p></td>
            </tr>
            <tr>
              <td height="97" align="left" class="contact">
              <table width="560" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="left">
                  <p><span class="first_letter">P:</span> 07 3166 9676<br>
                    <span class="first_letter">E:</span> <a href="mailto:info@debutmarketing.com.au">info@debutmarketing.com.au</a><br>
                    <span class="first_letter">W:</span><a href="http://www.debutmarketing.com.au/index.php"> www.debutmarketing.com.au</a><br>
                  Po Box 2569, Wellington Point, qld 4160</p></td>
                  <td align="right"><a href="http://www.facebook.com/pages/Debut-Marketing/390546411040?ref=ts"><img src="images/facebook.gif" alt="facebook" width="67" height="63" align="right"></a>
                  <a href="http://au.linkedin.com/in/nickydouglas"><img src="images/linkedIn.gif" alt="linked In" width="67" height="63" align="right"></a>
                  <a href="http://twitter.com/NickyatDebut"><img src="images/twitter.gif" alt="twitter" width="64" height="63" align="right"></a>
                 
                 
                  </td>
                </tr>
              </table></td>
           </tr>
          <tr bgcolor="#333333">
              <td align="center">
              <table width="560" border="0" cellspacing="0" cellpadding="0" class="footer">
                <tr>
                  <td width="50%" align="left"  valign="top" class="line"><p>
                    <forwardtoafriend>Forward this email to a friend</forwardtoafriend>
                    .<br>
                    Having trouble reading this email? <webversion>View it in your browser.</webversion><br>
Not interested anymore?<unsubscribe> Unsubscribe</unsubscribe>
                    .</p></td>
                  <td width="414" align="left"  valign="top" style="padding-left:10px;"><p>You're receiving this newsletter because you are a valued customer or have signed up to our newsletter.</p>
                    <p>&nbsp;</p></td>
                </tr>
            </table></td>
           </tr>
         </table>
     </td>
   </tr>
</table>

</body>
</html>

davidaf davidaf, 6 years ago

I tested your code and was unable to replicate an issue with the H2 rendering in Gmail. What browser/OS are you viewing it in when you encounter the rendering bug?


The Campaign Monitor Blog – HTML email smarts to go with your good looks
dingoatemydesign dingoatemydesign, 6 years ago

I have been using chrome. ill test in all the top 5 browsers and see what i get.

dingoatemydesign dingoatemydesign, 6 years ago

It seems to have resolved itself. i test in all the browser and it did not have that odd problem.

thanks for all the help. If it happens again ill get a screenshot up for you to have a look at.

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