Outlook 2000 image stretch, Outlook XP missing image

I'm trying to pull together my first email campaign utilizing a CM template. In my first round of testing, I had problems with a couple of email clients:

In Outlook 2000, the images stretch vertically.

In Outlook XP, the first image is missing, and the area that's blank seems to be stretched vertically as well.

I tried a few things trying to fix the issues, but it came back the same in my second round of testing.

Here is the code:

<!-- ***************************************************
********************************************************

HOW TO USE: Use these code examples as a guideline for formatting your HTML email. You may want to create your own template based on these snippets or just pick and choose the ones that fix your specific rendering issue(s). There are two main areas in the template: 1. The header (head) area of the document. You will find global styles, where indicated, to move inline. 2. The body section contains more specific fixes and guidance to use where needed in your design.

DO NOT COPY OVER COMMENTS AND INSTRUCTIONS WITH THE CODE to your message or risk spam box banishment :).

It is important to note that sometimes the styles in the header area should not be or don't need to be brought inline. Those instances will be marked accordingly in the comments.

********************************************************  
**************************************************** -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The PartnerShip Connection Newsletter - July 2011 - Issue 1</title>
<style type="text/css">
/***********
     The MailChimp Reset from Fabio Carneiro, MailChimp User Experience Design
     
     INLINE: Yes.
    ***********/  
    
        /* Client-specific Styles */
        #outlook a {
    padding: 0;
} /* Force Outlook to provide a "view in browser" button. */
body {
    width: 100% !important;
}
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
} /* Force Hotmail to display emails at full width */
body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
/* Reset Styles */
        body {
    margin: 0;
    padding: 0;
}
img {
    height: auto;
    line-height: 100%;
    outline: none;
    text-decoration: none;
}
#backgroundTable {
    height: 100% !important;
    margin: 0;
    padding: 0;
    width: 100% !important;
}
/** End Mail Chimp Reset **/ 

    /** Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. You do not need to move this inline. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em or 1.12 em.
       
       INLINE: Yes.
       **/
       
       p {
    margin: 1em 0;
}
/** Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support).  Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size. 
       
       INLINE: Yes.
       **/
       
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: #48709c !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: #48790c !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 {
    font-family: Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    color: #004fa3 !important;
    font-size: 20px;
    line-height: 100% !important;
}
h2 {
    font-family: Tahoma, Geneva, sans-serif;
    margin-top: 0px;
    margin-bottom: 12px;
    padding: 0;
    color: #ffffff !important;
    font-size: 13px;
    vertical-align: baseline;
    line-height: 100% !important;
}
h3 {
    font-family: Tahoma, Geneva, sans-serif;
    margin-top: 0px;
    margin-bottom: 12px;
    padding: 0;
    color: #004fa3 !important;
    font-size: 20px;
    font-weight:normal;
    line-height: 100% !important;
}
h4 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
    margin-top: 0px;
    padding: 0;
    color:#77c5c1 !important;
    font-weight: bold;
    line-height: 100% !important;
}
p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    margin-top: 0px;
    margin-bottom: 12px;
    margin-right: 15px;
    padding: 0;
    color:#004fa3;
    font-weight: normal;
}
a {
    color: #77c5c1 !important;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    font-style:italic;
    font-weight:bold;
    text-decoration:none;
}
.top p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    color: #004fa3;
    margin: 0;
    padding: 0;
    margin-right: 15px;
}
.intro p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color:#004fa3;
    font-style: italic;
    margin-right: 15px;
}
.sidebar p {
    font-style: italic;
}
ul {
    margin: 0px;
    padding: 0px;
    color:#ffffff;
}
li {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    margin-top: 0px;
    margin-left: 15px;
    margin-right: 15px;
    color:#004fa3;
    font-weight: normal;
}
/** Outlook 07, 10 Padding issue: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table.  The issue can cause added space and also throw off borders completely.  Use this fix in your header or inline to safely fix your table woes. 
       
       INLINE: No
       **/
       
       table td {
    border-collapse: collapse;
}
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
  <!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
  <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" bgcolor="#b2cae3" style="margin: 0;">
    <tr>
      <td><!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td valign="top" class="preheaderContent"><table class="top" width="550" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="middle" align="center" height="34" width="550" bgcolor="#b2cae3">
                          <a href="https://www.partnership.com/newsletter/welcome.html"><span style="color:#FFFFFF;">
                          <webversion style="text-decoration:none;color:#ffffff;">
                          <font style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#FFFFFF; font-weight:bold;">
                          WEB VERSION
                          </font></webversion>
                          </span></a>
                          </td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="top" width="550"><table border="0" cellpadding="0" cellspacing="0" width="550" id="templateHeader">
                      <tr>
                        <td class="headerContent" colspan="4"><!-- Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers.  This can be especially painful when you putting images on top of each other or putting back together an image you spliced for formatting reasons.  Either way, you can add 'style="display: block;"' to remove that space below the image.  Make sure to set alignment (don't use float) on your images if you are placing them inline with text.-->
                          <img style="margin: 0; padding: 0; display: block;" 
                          src="http://www.partnership.com/newsletter/images/Header.jpg" 
                          width="550" 
                          height="148" 
                          alt="The PartnerShip® Connection Newsletter" 
                          title="The PartnerShip® Connection Newsletter" 
                          align="top" /></td>
                      </tr>
                    </table>
                    <table bgcolor="#FFFFFF" width="550" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>        
                        <td valign="top" width="21"  align="left" bgcolor="#FFFFFF">
                        </td>
                        <td width="320" valign="top" align="left" bgcolor="#FFFFFF"><p style="font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:12px;">
                            July 2011
                          </p>
                          <h1 style="font-size:20px; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; align:left;">
                            Inaugural Letter:
                          </h1>
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:12px; text-align:left;"><br />
                          Welcome to the 1st edition of the PartnerShip Connection. The staff here at PartnerShip understands that every business — in every industry — has two priorities at the top of its list:</p>
                          <p style="margin-right:15px; margin-bottom:12px; align:left; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:12px;"> 1. Sell more product or services<br />
                            2. Lower overall operating expenses</p>
                          <img style="margin: 0; display: block;" src="https://www.partnership.com/newsletter/images/Picture1.jpg" width="319" height="202" alt="We've put this newsletter together with your business priorities in mind" title="Picture1" align="top" />
                          <br />
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:12px; text-align:left;">We’ve put this new monthly newsletter together with your business priorities in mind. Since we’re a shipping management company that offers you discounts on small package and freight shipping, we’re going to provide you with the most up-to-date shipping trends and news, as well as tips to help you save money on all of your shipping needs.</p>
                          <!-- Yahoo Link color fix: Simply override the styling color and decoration inline. -->
                          <p align="right" style="margin-right: 20px"><a href="https://www.partnership.com/newsletter/welcome.html" style="text-align:right; font-size:12px; font-weight:bold; font-style:italic; color: #006a65; text-decoration: underline;" target ="_blank" title="More on Welcome Message"><span style="color:#006a65">MORE</span></a></p>
 <img src="https://www.partnership.com/newsletter/images/arrow.jpg" width="319" height="21" alt="arrow" border="0" style="margin: 0; display: block;" title="arrow" align="top" /><br />
                          <h3 style="align:left; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:20; font-weight:bold;">
                            Shipping &amp; Transportation News
                            </h3>
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#006a65; font-size:12px; text-align:left; font-weight:bold; font-style:italic;">
                            Budget for surging fuel surcharges</p>
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:12px; text-align:left;">With the cost of diesel at more than $4 a gallon, we’re all feeling the sting of rising fuel surcharges. Because they are based on the cost of oil and diesel, fuel surcharges will always be variable costs that are included in the price of everything you ship — inbound and outbound.</p>
                          <!-- Yahoo Link color fix: Simply override the styling color and decoration inline. -->
                          <p align="right" style="margin-right: 20px"><a href="https://www.partnership.com/newsletter/shippingNews-July2011.html" style="text-align:right; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; color: #006a65; text-decoration: underline;" target ="_blank" title="More on Shipping News &amp; Trends"><span style="color:#006a65">MORE</span></a></p>
 <img src="https://www.partnership.com/newsletter/images/arrow.jpg" width="319" height="21" alt="arrow" border="0" style="margin: 0; display: block;" title="arrow" align="top" /><br />
                          <h3 style="align:left; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:20; font-weight:bold;">
                            Shipping Tip
                            </h3>
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#006a65; font-size:12px; text-align:left; font-weight:bold; font-style:italic;">
                            Make sure you’re using the correct mode and service level</p>
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:12px; text-align:left;">Examine where you spend your transportation dollars. Is your spending concentrated in less-than-truckload (LTL) freight rather than small package, or air instead of ground? These distinctions are called modes of transportation.</p>
                          <!-- Yahoo Link color fix: Simply override the styling color and decoration inline. -->
                          <p align="right" style="margin-right: 20px"><a href="https://www.partnership.com/newsletter/shippingTip-July2011.html" style="text-align:right; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; color: #006a65; text-decoration: underline;" target ="_blank" title="More on Shipping Tips"><span style="color:#006a65">MORE</span></a></p>
<img src="https://www.partnership.com/newsletter/images/arrow.jpg" width="319" height="21" alt="arrow" border="0" style="margin: 0; display: block;" title="arrow" align="top" /><br />
                          <h3 style="align:left; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:20; font-weight:bold;">
                            About Your Business
                            </h3>
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#006a65; font-size:12px; text-align:left; font-weight:bold; font-style:italic;">
                            <u>Ignite Selling Productivity by Using a Creative-Problem-Solving Selling Method</u><br />
by Dan Coleman
</p>
                          <p style="margin-right:15px; margin-bottom:12px; font-family:Tahoma, Geneva, sans-serif; color:#004fa3; font-size:12px; text-align:left;">One of the most effective ways for sales professionals to ignite selling productivity is to use a <em>Creative-Problem-Solving Selling Method</em>. In using a <em>Creative-Problem-Solving Selling Method</em>, the sales professional looks at interests and needs through the lens of the customer, and not through a self-serving lens.</p>
                          <!-- Yahoo Link color fix: Simply override the styling color and decoration inline. -->
                          <p align="right" style="margin-right: 20px"><a href="https://www.partnership.com/newsletter/aboutBusiness-July2011.html" style="text-align:right; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; color: #006a65; text-decoration: underline;" target ="_blank" title="More About Your Business"><span style="color:#006a65">MORE</span></a></p>
                          </td>
                        <td bgcolor="#006a65" valign="top" width="200" align="left">
                        <!-- Yahoo Link color fix: Simply override the styling color and decoration inline. -->
                          <p style="margin-left:17px; padding-top:10px"> <span style="color:#77c5c1"> <a href="https://www.partnership.com/pdffiles/whitepapers/PSwhitepaperTemplate.pdf" style="text-align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; text-decoration:underline; vertical-align:middle; color:#77c5c1;" target ="_blank" title="The 5 key ways to save money on shipping and freight"> The 5 key ways to save money on shipping and freight </a></span></p>
                          <img src="https://www.partnership.com/newsletter/images/dottedLine.jpg" width="200" height="20" style="margin: 0; display: block;" alt="dotted line" title="dotted line" align="top" />
                          <p style="margin-left:17px"> <span style="color:#77c5c1"> <a href="https://www.partnership.com/pdffiles/whitepapers/PSwhitepaperTemplate.pdf" style="text-align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; text-decoration: underline;  vertical-align:middle; color:#77c5c1;" target ="_blank" title="Tradeshow Shipping 101"> Tradeshow Shipping 101 </a></span></p>
                          <img src="https://www.partnership.com/newsletter/images/dottedLine.jpg" width="200" height="20" style="margin: 0; display: block;" alt="dotted line" title="dotted line" align="top" />
                          <p style="margin-left:17px"> <span style="color:#77c5c1"> <a href="https://www.partnership.com/pdffiles/whitepapers/PSwhitepaperTemplate.pdf" style="text-align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; text-decoration: underline;  vertical-align:middle; color:#77c5c1;" target ="_blank" title="How to properly pack your shipment"> How to properly pack your shipment </a></span></p>
                          <img src="https://www.partnership.com/newsletter/images/dottedLine.jpg" width="200" height="20" style="margin: 0; display: block;" alt="dotted line" title="dotted line" align="top" />
                          <p style="margin-left:17px"> <span style="color:#77c5c1"> <a href="https://www.partnership.com/pdffiles/whitepapers/PSwhitepaperTemplate.pdf" style="text-align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; text-decoration: underline;  vertical-align:middle; color:#77c5c1;" target ="_blank" title="Advantages of using a 3PL"> Advantages of using a 3PL </a></span></p>
                          <img src="https://www.partnership.com/newsletter/images/dottedLine.jpg" width="200" height="20" style="margin: 0; display: block;" alt="dotted line" title="dotted line" align="top" />
                          <p style="margin-left:17px"> <span style="color:#77c5c1"> <a href="https://www.partnership.com/pdffiles/whitepapers/PSwhitepaperTemplate.pdf" style="text-align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; text-decoration: underline;  vertical-align:middle; color:#77c5c1;" target ="_blank" title="Freight Shipping 101"> Freight Shipping 101 </a></span></p>
                          <img src="https://www.partnership.com/newsletter/images/dottedLine.jpg" width="200" height="20" style="margin: 0; display: block;" alt="dotted line" title="dotted line" align="top" />
                          <h2 style="margin-left:17px; text-align:left; font-family:Tahoma, Geneva, sans-serif; color:#FFFFFF"> CONTACT US </h2>
                          <p style="margin-left:17px; padding-bottom:10px; align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#FFFFFF;">PartnerShip<br />
                            29077 Clemens Rd.<br />
                            Cleveland, OH 44145<br />
                            P: 800.599.2902<br />
                            F: 800.439.8913</p>
                          <p style="margin-left:17px" align="left">
                            <!-- Yahoo Link color fix: Simply override the styling color and decoration inline. -->
                            <span style="color:#FFFFFF"> <a href="http://www.PartnerShip.com" style="text-align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; color:#FFFFFF; text-decoration: none;" target ="_blank" title="www.PartnerShip.com"> www.PartnerShip.com </a></span></p>
                          <p style="margin-left:17px" align="left"> <span style="color:#FFFFFF"> <a href="mailto:newsletter@PartnerShip.com" style="text-align:left; font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:bold; font-style:italic; color:#FFFFFF; text-decoration: none;" target ="_blank" title="EMAIL US"> EMAIL US
                            </a></span></p>
                          <img src="https://www.partnership.com/newsletter/images/dottedLine.jpg" width="200" height="20" style="margin: 0; display: block;" alt="dotted line" title="dotted line" align="top" /></td>
                        <td valign="top" width="9" bgcolor="#006a65"></td>
                      </tr>
                    </table></td>
                </tr>
                <tr>
                  <td align="center" valign="top" bgcolor="#b2cae3" width="600">
                  <!-- // Begin Template Footer \\ -->
                    <table bgcolor="#b2cae3" width="550" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="footerContent" bgcolor="#b2cae3">
                        <!-- // Begin Module: Standard Footer \\ -->
                          <table border="0" cellpadding="10" cellspacing="0" width="95%" align="center">
                            <tr>
                              <td bgcolor="#b2cae3"><p style="font-family: Tahoma, Geneva, sans-serif; text-align:center; font-size:11px; margin:0; padding:0; color:#004fa3; font-weight:normal; font-style: italic;">
                                  This message is a commercial email from PartnerShip. You have the option of opting out of receiving commercial messages from PartnerShip. If you no longer wish to receive these emails from PartnerShip, please reply to this message with &quot;Unsubscribe&quot; in the subject line or simply click on the following link: <unsubscribe style="text-decoration:none;color:#ffffff;"><font color="#FFFFFF" style="font-weight:bold;">UNSUBSCRIBE</font></unsubscribe>
                                </p></td>
                            </tr>
                          </table>
                          <!-- // End Module: Standard Footer \\ --></td>
                      </tr>
                    </table>
                    <!-- // End Template Footer \\ --></td>
                </tr>
              </table>
              <br /></td>
          </tr>
        </table></td>
    </tr>
  </table>
  <!-- End of wrapper table -->
</center>
</body>
</html>

Any help would be greatly appreciated! Thanks.

Bteleha Bteleha, 5 years ago

Is there anybody that might have an answer to this?

I've Googled until my Googler hurts, but haven't found an answer.

TIA!

toddprouty toddprouty, 5 years ago

Your HTML needs some work. For instance, the img tag for Header.jpg is broken up across several lines, not a common or recommended practice in HTML. I changed it to the following and it shows up correctly:

<img style="margin: 0; padding: 0; display: block;" src="http://www.partnership.com/newsletter/images/Header.jpg" width="550" height="148" alt="The PartnerShip® Connection Newsletter" title="The PartnerShip® Connection Newsletter" align="top" />

Most of your images have width & height attributes that don't match the dimensions of the image being referenced. Images should be resized to the desired dimensions in a graphics program (Dreamweaver allows you to do this without leaving the program if you have it), and the width & height attributes should match those dimensions to avoid stretching.

I'm pretty sure you can't add a style attribute to proprietary Campaign Monitor tags like <webversion> and <unsubscribe>. You would need to style the links that those tags will generate through styles inside <head>. I generally insert standard links while designing, and replace them with the CM tags prior to upload. CM will move styles inside <head> inline for you during import.

The proper XHTML 1.0 Transitional doctype is as follows:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

I don't think that's causing any of your problems, but it's a good idea to get it right.

These points might not resolve the issues you're running completely, but they should get you on the right track. Let us know how it goes.

Bteleha Bteleha, 5 years ago

Thanks for the reply, Todd.

The img tag for Header.jpg is broken up across several lines because I read that it might fix the issue of the image not loading, since some versions of Outlook have a problem with long lines of code. I've changed it back.

And you're right on the images. Good catch. I had to reduce the size of the layout, and forgot to reimport the re-sized images.

I'm a designer, not a coder, so I'm testing and retesting all over, and some places had me changing out the doctype. Thanks for giving me the proper code. I've changed it a few times, and I'm so boggled with all the different "help" out there that I don't know what I should really use. ;-)

That all said, I did everything you mentioned, and it still doesn't work properly in Outlook 2000 and Outlook XP. *sigh*

Thanks for your help, anyway.

toddprouty toddprouty, 5 years ago

Glad it helped a little anyway. If you don't have someone who's more of a coder to hand this off to, post your latest HTML and describe the problems a bit more (posting screenshots somewhere helps) and someone might be able to help. I'm a bit busy this week, but I will if I can.

You'll never get perfect consistency across e-mail clients, but you can get pretty close in most of the recent ones once you know what you're doing. Believe me, even the most experienced front-end web developers have a hard time with e-mail templates at first. All the best practices of modern HTML & CSS go out the window and there's a lot to learn, but if you stick with it you'll get it figured out.

Diana Diana, 5 years ago

Hey Bteleha,

If you want to send an email in to support we could take a look for you. Just let us know which template or draft it is in your account. It's been pretty busy with the new editor updates, though, so it might take a while.

Also, just to note, you can definitely add inline style tags to tags like webversion and unsubscribe. Works just fine.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Bteleha Bteleha, 5 years ago

Thanks, Diane. I'll do that.

I've put in a request to our IT guys to find out if any of our email recipients even use these email clients. I thought I could get around it by ignoring it completely. Unfortunately, I was informed that one even used Outlook 95!

Bteleha Bteleha, 5 years ago

Here are screenshots of the problems:

http://i51.tinypic.com/okamw2.jpg

http://i52.tinypic.com/315ltet.jpg

roshodgekiss roshodgekiss, 5 years ago

Hi Beteleha, another of our customers had the exact same issue earlier on the forums. Here's the thread, complete with fix.

The issue is the 'Mailchimp reset', featuring the following CSS styles:

img {
    height: auto;
    line-height: 100%;

Simply remove the height and line-height styles and the header image should be restored in Outlook.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Bteleha Bteleha, 5 years ago

Thank you, thank you, thank you!!! I can't tell you how happy I am right now!

We were planning on sending this out very soon, and fixing this issue is a great relief!

Yay for CM!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098