CODEWITHSUNDEEP
htmlcssemailhtml-email
Josh Wang
Josh Wang

Reputation: 305

How do I keep my address formatted correctly?

I am trying to put an address in a table in html for an email. I want to make sure my Address displays like this

Screenshot1

But on some other devices or phones, it will display like this.

Screenshot2

My code is here

<td style="vertical-align: center; background-color:#00693E; width: 100pt; text-align: left; font-size:8;">
        <div style="color:white;">
            Some Name for a Group
            <br>
            1234 Random St
            <br>
            San Francisco, CA 94107
            <br>
            website.com
        </div>
    </td>

I don't know how I can keep the address on the right side of a row but not make the text right aligned. I am keeping it in a cell for now and it's the second to last cell from the right.

Upvotes: 0

Views: 86

Answers (2)

John
John

Reputation: 12193

This is a common issue in html email. Firstly, your code should be laid out in 100% tables. I added a wrapper table to demonstrate how to align it right but have the text left aligned. Here is the finished product:

<style>
  .appleLinks a {color: #ffffff !important; text-decoration: none;}
</style>

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right">
      <table width="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="middle" bgcolor="#00693E" style="font-size:8px; color:#FFFFFF;">
            Some Name for a Group
            <br>
            1234&nbsp;Random&nbsp;St
            <br>
            San&nbsp;Francisco,&nbsp;CA&nbsp;94107
            <br>
            <a href="website.com" style="color: #FFFFFE; text-decoration: none;"><span class="appleLinks">website.com</span></a>
          </td>
        </tr>
      </table>      
    </td>
  </tr>
</table>

The address is easy to hide, just put &nbsp; in between words to disguise it. The reason it is blue is because your email client is "doing you a favor" by recognizing it and giving you the one-click functionality to call the number, map the address or visit the site etc.

To prevent this, the url is a bit harder, as you can't just stuff &nbsp; in there. Check out this article for more details. The best method it covers is to add something like this to your style tag:

.appleLinks a {color: #ffffff !important; text-decoration: none;}

and wrap your url with spans:

<a href="website.com" style="color: #FFFFFE; text-decoration: none;"><span class="appleLinks">website.com</span></a>

I took the liberty of adding the href to your url. You'll notice I used #FFFFFE, which is almost white. This is because Gmail ignores pure white and black (#FFFFFF and #000000 respectively) and defaults to the standard blue link (which we don't want).

Upvotes: 1

Jeppe
Jeppe

Reputation: 2233

1.: Try styling your table td's with element attributes instead of inline styling, like this:

<td width="100pt" style="vertical-align: center; background-color:#00693E; text-align: left; font-size:8;">
        <div style="color:white;">
            Some Name for a Group
            <br>
            1234 Random St
            <br>
            San Francisco, CA 94107
            <br>
            website.com
        </div>
    </td>

2.: Repeat this procedure to the main table, in order to force a width.

3.: Also try placing an image/other element and styling it like the following:

<style type="text/css">
  @media only screen and (max-device-width:480px; ) {
    body .header { width:300px}
  }
</style>

<body>
  <img src="http://www.url.com/image.jpg" class="header" width="600px" height="100px" />
</body>

This forces the image width to 600px, since the element style overwrites the regular style set.

Upvotes: 0

Related Questions