HTML emails and Outlook 2007

Hi!
I read some posts in the forum but I can't find any related topic so I am starting this new one.
I'm using Zen Cart 1.3.8a and Outlook 2007 to receive the emails.
I've some problems with HTML emails, in fact when I receive an email, if I open it in fullscreen, the text scatters in all the screen.
I've also modified the width of the tables and other classes from percentage to fixed sizes, but nothing changed.

Does anyone have my same problem?
Thank you in advance, any help will be appreciated!

I know this is an old thread, but I am having this problem as well.

Outlook 2007 no longer uses Internet Explorer as its HTML renderer (like Outlook 2003). Instead, MS pulled a fast one and changed the HTML renderer to Microsoft Word. Which means that it won't respect many CSS 2 instructions, including, regrettably, positioning and size directives. There is also no respect for css-directed background images and no display of animated GIFs or flash plugins.

Basically with Outlook 2007, we have been thrown back to the styling days of 1999 where in order to get positioning and width desires fulfilled you must use a table layout with fixed widths instead of CSS-styled DIVs.

Is there a module to replace the HTML email for Zen-Cart to be compatible with the insanity of Outlook 2007?

You can fine-tune all your email templates directly. They're in the /email/ folder.

DrByte:

You can fine-tune all your email templates directly. They're in the /email/ folder.Yes, thanks, I had already tweaked them. Not being an HTML/table/css guru, every one of them needs to be nearly entirely rewritten to be compatible with Outlook 2007. The CSS and <div> has to be replaced. It's been a couple years now, I thought someone might have done the whole batch by now. :yuck:

Maybe somebody can help me. I've got the Microsoft plugin for Dreamweaver to validate HTML for Outlook 2007 (MS Word actually).
It shows no errors. If I preview the email template in IE, Firefox, and MS Word all look correct.

However, I found out that customers receive email and the css style syntax is being changed! The change is that all the elements inside the style have been prefixed with an extra ".", Firefox, IE have no problem rendering this. MS Word/Outlook 2007 cannot handle it.

For example elements such as ".holder" comes "..holder", ".comments" becomes "..comments" in the emails. I have no idea what is doing this, but more simply, does anyone have a suggestion for changing the css syntax so that this might not happen?

dhcernese:

Yes, thanks, I had already tweaked them. Not being an HTML/table/css guru, every one of them needs to be nearly entirely rewritten to be compatible with Outlook 2007. The CSS and <div> has to be replaced. It's been a couple years now, I thought someone might have done the whole batch by now. :yuck:
Correct me if I'm wrong but I understand the Zen Cart email system of going to be completely overhauled for v2.0, so I doubt you'll see any changes to the current batch.

I've rebuilt a few of these templates in the past and documented the process. You can find some useful info on my site. I don't think I'm allowed to post a direct link but a search in Google for my username should get you there.

On the site there's a complete zip of updated email templates, based on the Cherry Zen theme, you should be able to change a few colours, insert a new logo and be able to use them fine. Bear in mind there are some changes to be made to a couple of site files too, but nothing drastic.

There bad news is that things are not going to improve for Outlook 2010. Microsoft are keeping the Word HTML engine :ohmy:

dhcernese:

However, I found out that customers receive email and the css style syntax is being changed! The change is that all the elements inside the style have been prefixed with an extra ".", Firefox, IE have no problem rendering this. MS Word/Outlook 2007 cannot handle it.
Although I run the risk of being run out of town by saying this in the day and age of CSS, the simple truth is that tables are the only way to achieve safe layouts in emails.

Styles should only be used inline to control font's, sizes, and colours. If your styles are inline then you won't experience these syntax changes :)

mooxmail:

There bad news is that things are not going to improve for Outlook 2010. Microsoft are keeping the Word HTML engine :ohmy:I read about that. Just great. :(

mooxmail:

Although I run the risk of being run out of town by saying this in the day and age of CSS, the simple truth is that tables are the only way to achieve safe layouts in emails.

Styles should only be used inline to control font's, sizes, and colours. If your styles are inline then you won't experience these syntax changes :)That's what's I've read also. I did try adding component names before all the styles, almost all (but not all) of it worked. I'll check out your examples, thanks for posting!

No problem, if anything doesn't make sense, let me know and I'll try to clear things up.

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:

<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     $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>

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!)

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.