htmlemailmobileoutlookgmail

Email Signature Spacing Issue Sending email from Outlook to Gmail


I am in the process of creating an email signature and came across an issue where for some reason when sending an email from Outlook to Gmail when you look on the iPhone mobile Gmail app the signatures stretch vertically adding a ton of space between elements? I will show an image below for reference.

enter image description here

When viewing the signature on desktop everything looks fine and even when viewing it via Outlook or Apple mail on Mobile it looks fine, only for Gmail on mobile? I was just wondering why this might be and how could I go about fixing it? Thank you! :)

Here is the signature code:

<body><div width="500" height="250" style="max-width: 500px; max-height: 250px; padding: 0; margin: 0; box-sizing: border-box;">
          
          <!--SIGNATURE-->
          
           
          <table border="0" cellspacing="0" cellpadding="0">
          
                <!-- SECTION 1 PHOTOS                                                          DELETE WHEN FINISHED -->
                <tbody><tr><td style="text-align: center;"> 
                  <table border="0" cellspacing="0" cellpadding="0" width="120" height="250" style="max-width: 120px; max-height: 250px;">
                    <tbody><tr>
                      <td>
                        <img src="https://www.azlendingexperts.com/images/bio_richard.jpg" alt="Headshot" id="imgchangeroutput" height="180" width="120" style="height: 180px; width: 120px; padding-bottom: 0;">
                      </td>
                    </tr>
                    <tr>
                      <td style="padding: 10px;"></td>
                    </tr>
                    <tr>
                      <td>
                        <a href="https://az-lending-experts-apply-now.secure-clix.com/" target="_blank">
                        <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png" alt="Apply Now Button" height="30" style="height: 30px;">
                      </a>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
                        <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranking.png" alt="1 Mortage Broker Ranking Arizona Logo" width="120" style="width: 120px;">
                      </a>
                      </td>
                    </tr>
                  </tbody></table>
                </td>
                  <!---------------------------------------------------------------------------------------------------->
                  <!-- SECTION 2 Information                                                     DELETE WHEN FINISHED -->
                  <!---------------------------------------------------------------------------------------------------->
    
               
                <td><table border="0" cellspacing="0" cellpadding="0" width="350">
                  <!-- Main Logo -->
                  <tbody><tr>
                    <td>
                      <a href="https://www.azlendingexperts.com/" target="_blank">
                      <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png" alt="AZ Lending Experts LCC logo" height="50">
                    </a>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 10px;"></td>
                  </tr>
                  <tr>
                    <!-- INFO 1 NAME & NMLS  -->
                    <td>
                      <div style="font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;" id="text-box">Richard Simon</div>
                      <div style="font-family: Arial, sans-serif; color: #767171; font-size: 14px; font-weight: bold;"><span id="titleoutput">Owner</span> &nbsp;&nbsp; NMLS    #<span id="nmlsoutput">155480</span></div>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 10px;"></td>
                  </tr>
                  <!-- INFO 2 Mobile,Office,Email -->
                  <tr>
                    <td>
                      <div id="Mobile">
                        <span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Mobile:&nbsp;</span><a href="tel:4802393875" target="_blank" id="phone1output" style="font-family: Arial, sans-serif; text-decoration: none; color:#767171; font-size: 14px;">480.239.3875</a>
                      </div>
                      <div id="Office"><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Office:&nbsp;</span><span style=""><a href="tel:4806493825" target="_blank" id="phone2output" style="font-family: Arial, sans-serif; text-decoration: none; color:#767171; font-size: 14px;">480.649.3825</a></span></div>
                      <div id="email"><div><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Email:&nbsp;</span><span><a id="emailoutput" href="mailto:rsimon@azlendingexperts.com" style="font-family: Arial, sans-serif;color:#767171; font-size: 14px;">rsimon@azlendingexperts.com</a></span></div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="height: 20px;"></td>
                  </tr>
                  <tr>
                    <td>
                      <a href="https://www.google.com/maps/place/4500+S+Lakeshore+Dr+%23595,+Tempe,+AZ+85282/data=!4m2!3m1!1s0x872b062196b8962b:0x93f0ee8ff2a4f8e1?sa=X&amp;ved=2ahUKEwi7gLH_15H0AhX2HzQIHTkDDpcQ8gF6BAgSEAE" target="_blank" style="font-family: Arial, sans-serif; text-decoration: none; color: #767171; font-size: 14px;">4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282</a>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <a href="https://www.azlendingexperts.com/" target="_blank" style="font-family: Arial, sans-serif; font-size: 14px;">www.azlendingexperts.com</a>
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->
                      <a href="https://www.facebook.com/RichardSimonMortgage" id="facebookoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png" alt="facebook logo" height="30"></a>
                      &nbsp;
                      <a href="https://www.instagram.com/richardsimonmortgage/" id="instagramoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png" alt="instagram logo" height="30"></a>
                      &nbsp;
                      <a href="https://www.youtube.com/channel/UCfFk2G78rqkCC5j9h_m3PvQ" id="youtubeoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png" alt="youtube logo" height="30"></a>
                      &nbsp;
                      <a href="https://www.linkedin.com/in/richardsimonmortgage" id="linkedinoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png" alt="linkedin logo" height="30"></a>
                      &nbsp;
                      <a href="https://twitter.com/azlendingexpert" id="twitteroutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png" alt="twitter logo" height="30"></a>&nbsp;&nbsp;&nbsp;
                      <a href="#" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png" alt="Google Reviews" height="45"></a>
                    </td>
                  </tr>
                </tbody></table></td>
              
          </tr></tbody></table>
        
    
    </div>
        </body>


Solution

  • I have once again solved my own question. I did some troubleshooting cross-referencing some existing working signatures and found that when using the div element margin was added once Gmail compiled it from outlook office 365. The solution was to use the span element for everything as it is inline it can't allow for margin on Top or Bottom there for solving the issue.

    I will leave the code of the working version meant to be installed onto Outlook Office 365 just saying when you look at it on the browser it looks like there are still spacing issues but those are there on purpose so that once installed onto office 365 Outlook it will be perfect specifications as they compile sizing differently then the browser would.

    <body>
      <div width="500" height="250" style="max-width: 500px; max-height: 250px">
        <!--SIGNATURE-->
    
        <table border="0" cellspacing="0" cellpadding="0">
          <!-- SECTION 1 PHOTOS                                                          DELETE WHEN FINISHED -->
          <tbody>
            <tr >
              <td valign="top"style="max-height: 250px;text-align: center; padding-right: 10px;">
                <table
                  border="0"
                  cellspacing="0"
                  cellpadding="0"
                  width="120"
                  height="250"
                  style="max-width: 120px; max-height: 250px"
                >
                  <tbody>
                      <td cellpadding="0" style="text-align: center; padding-top: 10px; padding-bottom: 6px; width: 120px; height: 160px;">
                        <img
                          src="https://www.azlendingexperts.com/images/bio_richard.jpg"
                          alt="Headshot"
                          id="imgchangeroutput"
                          height="160"
                          style="height: 160px; max-width: 120px"
                        />
                      </td>
                    </tr>
                    <tr style="padding-bottom: 6px; text-align: center;">
                      <td height="26">
                        <a
                          href="https://az-lending-experts-apply-now.secure-clix.com/"
                          target="_blank"
                        >
                          <img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png"
                            alt="Apply Now Button"
                            height="26"
                            style="height: 26px;"
                          />
                        </a>
                      </td>
                    </tr>
                    <tr style="padding-bottom: 12px; text-align: center; ">
                      <td>
                        <a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
                          <img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranker.png"
                            alt="1 Mortage Broker Ranking Arizona Logo"
                            width="110"
                            style="width: 110px"
                          />
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <!---------------------------------------------------------------------------------------------------->
              <!-- SECTION 2 Information                                                     DELETE WHEN FINISHED -->
              <!---------------------------------------------------------------------------------------------------->
    
              <td style="max-width: 350px; max-height: 250px">
                <table
                  border="0"
                  cellspacing="0"
                  cellpadding="0"
                  width="350"
                  height="250"
                  style="max-width: 350px; max-height: 250px"
                >
                  <tbody>
                    <tr>
                      <td
                        valign="top"
                        style="
                          font-size: 9pt;
                          font-family: Arial, sans-serif;
                          line-height: 11pt;
                        "
                      >
                        <!-- Main Logo -->
                        <a href="https://www.azlendingexperts.com/" target="_blank">
                          
                          <img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png"
                            alt="AZ Lending Experts LCC logo"
                            height="50" 
                            width="270"
                            style="height: 50px; width: 270px;"
                          /><br>
                        </a>
                        <!-- INFO 1 NAME & NMLS  -->
                        <br /><span
                          style="
                            font-family: Arial, sans-serif;
                            font-weight: bold;
                            font-size: 18px;
                          "
                          id="text-box"
                        >
                          Richard Simon </span
                        ><br />
                        <!-- INFO 2 Mobile,Office,Email -->
                        <span
                          style="
                            font-family: Arial, sans-serif;
                            color: #767171;
                            font-size: 14px;
                            font-weight: bold;
                          "
                        >
                        <span>
                          <span id="titleoutput">Owner</span> &nbsp;&nbsp; NMLS
                        #<span id="nmlsoutput">155480</span> </span
                      ></span>
                          <br /><br>
                        <span id="Mobile">
                          <span
                            style="
                              font-family: Arial, sans-serif;
                              font-weight: bold;
                              font-size: 14px;
                            "
                            >Mobile:&nbsp;</span
                          ><a
                            href="tel:4802393875"
                            target="_blank"
                            id="phone1output"
                            style="
                              font-family: Arial, sans-serif;
                              text-decoration: none;
                              color: #767171;
                              font-size: 14px;
                            "
                            >480.239.3875</a
                          > </span
                        ><br />
                        <span id="Office">
                          <span
                            style="
                              font-family: Arial, sans-serif;
                              font-weight: bold;
                              font-size: 14px;
                            "
                            >Office:&nbsp;</span
                          ><span style=""
                            ><a
                              href="tel:4806493825"
                              target="_blank"
                              id="phone2output"
                              style="
                                font-family: Arial, sans-serif;
                                text-decoration: none;
                                color: #767171;
                                font-size: 14px;
                              "
                              >480.649.3825</a
                            ></span
                          >
                        </span>
                        <br />
                        <span id="email">
                          <span>
                            <span
                              style="
                                font-family: Arial, sans-serif;
                                font-weight: bold;
                                font-size: 14px;
                              "
                              >Email:&nbsp;</span
                            ><span
                              ><a
                                id="emailoutput"
                                href="mailto:rsimon@azlendingexperts.com"
                                style="
                                  font-family: Arial, sans-serif;
                                  color: #767171;
                                  font-size: 14px; 
                                "
                                >rsimon@azlendingexperts.com</a
                              ></span
                            >
                          </span>
                        </span>
                        <br>
                        <br />
                        <span>
                        <span style="">
                          <a
                          href="https://www.google.com/maps/place/4500+S+Lakeshore+Dr+%23595,+Tempe,+AZ+85282/data=!4m2!3m1!1s0x872b062196b8962b:0x93f0ee8ff2a4f8e1?sa=X&amp;ved=2ahUKEwi7gLH_15H0AhX2HzQIHTkDDpcQ8gF6BAgSEAE"
                          target="_blank"
                          style="
                            font-family: Arial, sans-serif;
                            text-decoration: none;
                            color: #767171;
                            font-size: 12px; ;
                          "
                          >4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282</a
                        >
                        </span>
                        <br />
                        <span><a
                          href="https://www.azlendingexperts.com/"
                          target="_blank"
                          style="font-family: Arial, sans-serif; font-size: 14px"
                          >www.azlendingexperts.com</a
                        ></span>
                      </span>
                        <br>
                        <span>
                          <a
                          href="https://www.facebook.com/RichardSimonMortgage"
                          id="facebookoutput"
                          target="_blank"
                          ><img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png"
                            alt="facebook logo"
                            height="25"
                            width="25"
                            style="height: 25px; width: 25px;"
                        /></a>
                        &nbsp;
                        <a
                          href="https://www.instagram.com/richardsimonmortgage/"
                          id="instagramoutput"
                          target="_blank"
                          ><img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png"
                            alt="instagram logo"
                            height="25"
                            width="25"
                            style="height: 25px; width: 25px;"
                        /></a>
                        &nbsp;
                        <a
                          href="https://www.youtube.com/channel/UCfFk2G78rqkCC5j9h_m3PvQ"
                          id="youtubeoutput"
                          target="_blank"
                          ><img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png"
                            alt="youtube logo"
                            height="25"
                            width="25"
                            style="height: 25px; width: 25px;"
                        /></a>
                        &nbsp;
                        <a
                          href="https://www.linkedin.com/in/richardsimonmortgage"
                          id="linkedinoutput"
                          target="_blank"
                          ><img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png"
                            alt="linkedin logo"
                            height="25"
                            width="25"
                            style="height: 25px; width: 25px;"
                        /></a>
                        &nbsp;
                        <a
                          href="https://twitter.com/azlendingexpert"
                          id="twitteroutput"
                          target="_blank"
                          ><img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png"
                            alt="twitter logo"
                            height="25"
                            width="25"
                            style="height: 25px; width: 25px;"/></a
                        >&nbsp;&nbsp;
                        <a href="" target="_blank"
                          ><img
                            src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png"
                            alt="Google Reviews"
                            height="35"
                            width="90"
                            style="height: 35px; width: 90px;"
                        /></a>
                        </span>
                        
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->
    
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </body>

    I hope this helps someone who is having the same issue because I have looked for months and have not found a single answer until I found it myself. Not even StackOverflow has had a similar problem it seems as no one could help or pose a similar question before.