HTML emails and Outlook 2007

**lat9** · 21 Nov 2009, 10:47 PM

You have to modify *all* the e-mail templates you're using to use a table-based layout instead of div's. Here's my checkout template (which has most all of the sections used in others) .. your colors may vary:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=$CHARSET" />
<base href="$BASE_HREF" />

<style type="text/css">
body {background-color:#c1d198; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center;}
a:link {color:#0066cc;}
a:hover {background-color:#eeeecc; color:#0066cc;}
a:visited {color:#0066cc;}
.holder {background-color:#f9f9f9; border:1px solid #696363; font-size:9px; text-align:left; width: 550px;}
.header {font-size:10px; padding:0px; width: 550px;}
.content {font-size:10px; padding:5px; width: 550px;}
.footer {border-top:1px solid #696363; font-size:9px; text-align:center; width: 550px;}
.extra-info {background-color:#cccc99; border:1px dashed #696363; font-size:10px; margin-top:10px; padding:5px; width: 550px;}
.content-line {padding:5px; font-size:10px;}
.content-line-title {font-weight:bold; font-size:11px; padding-top:3px;}
.order-detail-area {background-color:#CCCC99; border:1px #696363; padding:2px; font-size:10px; width: 542px;}
.product-details {font-size:10px;}
.product-details-num {font-size:10px; font-weight:bold;}
.order-totals-text {font-size:10px; font-weight:bold;}
.order-totals-num {font-size:10px; }
.comments {background-color:#BBCA93; border:1px #696363; padding:2px; font-size:10px; width: 542px;}
.address-block {background-color:#c8d79c; border:1px solid #696363; margin-top:3px;}
.address {font-size:10px;}
.payment-detail, .payment-footer {font-size:10px;}
.extra-info {background-color:#cccc99; border:1px solid #696363; font-size:10px; margin-top:10px; padding:5px; width: 550px;}
.extra-info-bold {font-weight:bold;}
.disclaimer {background-color:#f9f9f9; border:1px solid #696363; font-size:10px; margin-top:10px; padding:5px; width: 550px; text-align: center;}
.disclaimer1 {color:#666666; padding:5px;}
.disclaimer1 a:link {color:#666666;}
.disclaimer1 a:visited {color:#666666;}
.disclaimer2 {color:#666666; padding:5px;}
.copyright {border-bottom:0px solid #696363; padding:5px;}

</style>
</head>

<body>
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
      <table class="holder" width="550" border="0" cellspacing="0" cellpadding="0">

        <tr class="header">
          <td align="left" height="108">
            <img src="email/header.jpg" width="200" height="108" />
          </td>
        </tr>

        <tr class="content">
          <td>
            $EMAIL_TEXT_HEADER $INTRO_STORE_NAME<br/><br/>
            $EMAIL_FIRST_NAME $EMAIL_LAST_NAME,<br/>
            $EMAIL_THANKS_FOR_SHOPPING<br/>
            $EMAIL_DETAILS_FOLLOW
          </td>
        </tr>

        <tr class="content-line">
          <td>
            $INTRO_ORDER_NUM_TITLE $INTRO_ORDER_NUMBER&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$INTRO_DATE_TITLE $INTRO_DATE_ORDERED
          </td>
        </tr>

        <tr class="content-line">
          <td><a href="$INTRO_URL_VALUE">$INTRO_URL_TEXT</a><br/></td>
        </tr>

        <tr>
          <td class="content-line"><strong><br/>$PRODUCTS_TITLE</strong></td>
        </tr>

        <tr class="order-detail-area">
          <td>$PRODUCTS_DETAIL</td>
        </tr>
        <tr class="order-detail-area">
          <td>$ORDER_TOTALS</td>
        </tr>

        <tr class="comments">
          <td>$ORDER_COMMENTS</td>
        </tr>

        <tr class="content_line">
          <td><strong><br/>$HEADING_ADDRESS_INFORMATION<br/></strong></td>
        </tr>

        <tr>
          <td>
            <table class="address-block" border="0" width="550" cellspacing="0" cellpadding="2">
              <tr>
                <td valign="top" width="275">
                  <table border="0" width="275" cellspacing="0" cellpadding="2">
                    <tr>
                      <td class="content-line-title"><strong>$ADDRESS_DELIVERY_TITLE</strong></td>
                    </tr>
                    <tr>
                      <td class="address">$ADDRESS_DELIVERY_DETAIL</td>
                    </tr>
                    <tr>
                      <td class="content-line-title"><strong>$SHIPPING_METHOD_TITLE</strong></td>
                    </tr>
                    <tr>
                      <td class="content-line">$SHIPPING_METHOD_DETAIL</td>
                    </tr>
                  </table>
                </td>
                <td valign="top" width="275">
                  <table border="0" width="275" cellspacing="0" cellpadding="2">
                    <tr>
                      <td class="content-line-title">$ADDRESS_BILLING_TITLE</td>
                    </tr>
                    <tr>
                      <td class="address">$ADDRESS_BILLING_DETAIL</td>
                    </tr>
                    <tr>
                      <td class="content-line-title"><strong>$PAYMENT_METHOD_TITLE</strong></td>
                    </tr>
                    <tr>
                      <td class="payment-detail">$PAYMENT_METHOD_DETAIL</td>
                    </tr>
                    <tr>
                      <td class="payment-footer">$PAYMENT_METHOD_FOOTER</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr class="footer">
          <td class="copyright">$EMAIL_FOOTER_COPYRIGHT</td>
        </tr>

        <tr>
          <td>
            <table class="disclaimer" width="550" border="0" cellspacing="0" cellpadding="0">
              <tr class="disclaimer1">
                <td>$EMAIL_DISCLAIMER</td>
              </tr>
              <tr class="disclaimer2">
                <td>$EMAIL_SPAM_DISCLAIMER</td>
              </tr>
            </table>
          </td>
        </tr>

        <tr>
          <td>
            $EXTRA_INFO
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

**lausianne** · 10 Dec 2010, 09:21 PM

The mooxmail site is down, unfortunately. Does anyone know of another source for these table based templates, or would anyone be kind enough to share his?
(Thanks, lat9, for your checkout template!)

**torvista** · 12 Dec 2010, 09:47 AM

would anyone be kind enough to share his

I got so frustrated going round in circles with the pathetic html rendering of outlook I stripped out almost all the css and I used Dreamweaver library items and a template to be able at least to change all the common email code in one go.
I still hate my email styles but at least they look consistently bad in different readers.

pm me if you want them.

Thread: HTML emails and Outlook 2007

Thread Tools

Search Thread

Display

Re: HTML emails and Outlook 2007

Re: HTML emails and Outlook 2007

Re: HTML emails and Outlook 2007

Similar Threads

v151 Help with Emails. Site emails not going through to my emails on Outlook 2012

Help With Emails And Html Emails

Emails from my store being flagged as Phishing in outlook 2007

Posting Permissions