0

This works fine in normal clients but as we know Outlook is a pain to work with. It looks ok to me but can someone tell me why this would not render in Outlook?

<table id="contentArea">
      <tr>
        <td>
        
          <p>Welcome to the TeraTitan family ${user['FirstName']},</p>
          <p>Please tell us which services you are interested in currently:</p>
          
          
          <table align="center">
          <tr align="center">
          <td><a href="http://www.teratitan.com/info/mortgage"><img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</a></p></td>
          <td><a href="http://www.teratitan.com/info/savings"><img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</a></p></td>
          <td><a href="http://www.teratitan.com/info/homeequity"><img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</a></p></td>
          </tr>
          
          
          </table>
          <p>You can also visit us on-line at <a href="http://www.teratitan.com">TeraTitan</a>, or call us with any questions you may have at 800-555-1212.</p>
        </td>
      </tr>
    </table>
    <!-- End Table for content-->
Machavity
  • 30,841
  • 27
  • 92
  • 100
Liam Coates
  • 487
  • 6
  • 9
  • 19
  • What exactly is not rendering? Could you show us comparative screenshots? You might want to properly style your images for html emails too. (display:block; and img property border="0") – R Lacorne Oct 17 '13 at 14:52
  • img hosting sites blocked at work - it just bursts out to the right even with those changes you suggest. The images go big again even though I resized to 100x100. – Liam Coates Oct 17 '13 at 15:01
  • Have you tried placing your text on another row of the table? Outlook will try it's best to float elements within a single table cell, but it can't guess what you were really trying to do. The trick with html-emails is to separate elements by type if possible. If you have both text and images, then texts should be in their own cells, as well as images. One element by table cell will also help you to see exactly where the problem is located. – R Lacorne Oct 17 '13 at 15:06

1 Answers1

2

I'm with R Lacome. What exactly is the rendering issue?

Also, there seems to be a few "sloppy" coding things. Sometimes this doesn't make a difference, but if your code is "sloppy" you won't know where your real issue is.

Below is cleaned up HTML with a few tweaks. Try running that and see if it fixes your rendering issue. I should also note that without a lot of inline CSS <p> tags don't offer a lot of consistency in email clients.

  <table id="contentArea" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left">
        <p>Welcome to the TeraTitan family ${user['FirstName']},</p>
        <p>Please tell us which services you are interested in currently:</p>
      </td>
    </tr>
    <tr>
      <td align="left">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td align="center">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center">
              <a href="http://www.teratitan.com/info/mortgage">
                <img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg">
                <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</p>
              </a>
            </td>
            <td align="center">
              <a href="http://www.teratitan.com/info/savings">
                <img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9">
                <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</p>
              </a>
            </td>
            <td align="center">
              <a href="http://www.teratitan.com/info/homeequity">
                <img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg">
                <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</p>
              </a>
            </td>
          </tr>
        </table>
      </td>
    </td>
    <tr>
      <td align="left">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td align="left">
        <p>You can also visit us on-line at <a href="http://www.teratitan.com">TeraTitan</a>, or call us with any questions you may have at 800-555-1212.</p>
      </td>
    </tr>
  </table>

  <!-- End Table for content-->
Darryl Vos
  • 329
  • 1
  • 6