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.

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