Monthly Archives: May 2017

HTML Email – Remove Whitespace and Gaps In Between Table Rows

by ,

In this post you will learn how to remove unwanted whitespace or gaps that may appear in between rows when creating an HTML Email. This usually occurs when the rows have a background color that is different from the parent table element. A program such as Litmus can be used to reveal the bug before releasing an email to your intended recipients. The following list of devices are the ones usually affected.

  • iPhone 6 iOS 8
  • iPhone 6+ iOS 8
  • iPhone 6 iOS 9
  • iPhone 6+ iOS 9
  • iPhone 7 iOS 10.2
  • iPhone 7+ iOS 10.2
  • Android 5.1
  • Android 6.0

Our initial HTML consists of a parent <table> element, which is used for viewing our emails in a browser. An inner <table> element is used to contain and center the email in a desktop browser. The remainder of the code consists of three table rows with a yellow background color. The first and third rows are spacers that are each 25 pixels in height, while the middle row contains the line of text.

HTML


<!-- outer wrapper for displaying email in browser -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top">

            <!-- inner wrapper that contains email -->
            <table align="center" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
                <tr>
                    <td colspan="3" bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                </tr>
                <tr>
                    <td colspan="3" bgcolor="#f5b21e" align="center" valign="middle" height="25" style="font-size: 24px;font-weight:bold;font-family: Arial, Helvetica, sans-serif;color:#00008B;">Hello world!</td>
                </tr>
                <tr>
                    <td colspan="3" bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

This is an image showing the gaps between each of the rows.

whitespace gaps between table rows html email

As you can see, the white background of the containing table bleeds through the gaps, showing what appears to be two faint white lines. Surrounding these three <tr>‘s with a table that has a yellow background will do the trick. See the updated HTML below, with our changes bolded.

Solution

HTML


<!-- outer wrapper for displaying email in browser -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top">

            <!-- inner wrapper that contains email -->
            <table align="center" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
                <tr>
                    <td colspan="3" align="left">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f5b21e">
                            <tr>
                                <td bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                            </tr>
                            <tr>
                                <td bgcolor="#f5b21e" align="center" valign="middle" height="25" style="font-size: 24px;font-weight:bold;font-family: Arial, Helvetica, sans-serif;color:#6a2875;">Hello world!</td>
                            </tr>
                            <tr>
                                <td bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                            </tr>
                        </table>
                    </td>
                </tr> 
            </table>
        </td>
    </tr>
</table>

Prevent HTML Email from Changing Font Color for Phone Numbers

by ,

When creating HTML emails, certain HTML email clients change the font colors for phone numbers to blue, especially if they are not styled with inline CSS or are placed inside of an anchor element with an href=”tel:” attribute. You can see an example in the image below:

prevent html email from changing font color for phone numbers

The following list of email clients will be affected as a result:

  • iPhone 5s iOS 7
  • iPhone 5s iOS 8
  • iPhone 6 iOS 8
  • iPhone 6+ iOS 8
  • iPhone 6 iOS 9
  • iPhone 6+ iOS 9
  • iPhone 7 iOS 10.2
  • iPhone 7+ iOS 10.2
  • iPad (retina) iOS 10.2
  • iPad Mini iOS 10.2
  • iPad Pro (12.9 inch) iOS 10.2
  • Gmail IE
  • Gmail Firefox
  • Gmail Chrome

Below, I will explain several methods that I have seen recommended based on research.

HTML – Solution One(iPhone 5, iPhone 5s, iPhone 6 and iPhone 6s only)

Use <meta name=”format-detection” content=”telephone=no”> in your HTML header. This will resolve the issue on only the older iPhones (iPhone 5, iPhone 5s, iPhone 6 and iPhone 6s, all versions of iOS).

HTML – Solution Two(Gmail only)

Surround your hyphens with <span> elements. This will only fix the issues in Gmail (IE, Firefox and Chrome).


1<span>-</span>800<span>-</span>888<span>-</span>8888

Using the HTML entity for hyphens, &#45; renders the same result as above example.


1<span>&#45;</span>800<span>&#45;</span>888<span>&#45;</span>8888

HTML – Solution Three(All Clients)

This is considered the ultimate solution and will work for all clients. Insert a zero width joiner &zwj; in at least two or three different spots in the phone number.


1-8&zwj;00-8&zwj;88-8&zwj;888