Outlook 2007 removing MailBuild links?

This problem has me utterly stumped.

In Outlook 2007, the content that is placed inside of <webversion></webversion>, <forwardtoafriend></forwardtoafriend>, and <unsubscribe></unsubscribe> in the MailBuild template has totally vanished from my test email as it is presented in my Outlook 2007 window.

I've scoured the web and haven't been able to find any other complaints of this bizarre behavior.

Some caveats - these templates are composed of almost 100% standards compliant code (no tables!) - I don't feel like completely converting these templates to tables only to find out that that wasn't the reason and it doesn't seem like that should matter, anyway.

Has anyone experienced similarly puzzling Outlook 2007 behavior? Could it be a security thing?

By the by, the MailBuild template tags as listed above work fine in Gmail, Apple Mail, Outlook 2004, etc. The links show up in the webversion that I can open via that dorky "Other Actions -> View in Browser" rigamarole that Outlook 2007 forces up on me.

I'm hoping for some clue as to what is happening here. It seems particularly cruel that Outlook 2007 would hide my webversion links since it breaks my pretty code so utterly.

-abberdab

Diana Diana, 8 years ago

Abberdab, that's an odd one! I've never seen Outlook strip content like you're describing. If you could post your code here or send an email into support we'd be happy to take a look at your code and see if we spot anything.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
abberdab, 8 years ago

Certainly! This will look a little mucky since this is a mailbuild template - but you are probably used to that. :) I could send you a test mailbuild email, too, if that would be more helpful.

=====

<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Regent eNewsletter MailBuild Template</title>
    <style type="text/css" title="text/css" media="screen">
    /* <![CDATA[ */
        
        /*
        Green:     #8da335
        Blue:     #649FA8
        Gold:    #CD8D0A
        Raisin: #855E4E
        */
        
        /* begin: reset */
        body,div,h1,h2,h3,h4,h5,h6,p { 
            margin:0;
            padding:0;
        }
        #masthead ul,
        #masthead ol,
        #masthead li,
        #footer ul,
        #footer ol,
        #footer li,
        #sidebar ul,
        #sidebar ol,
        #sidebar li { 
            margin:0;
            padding:0;
        }
        fieldset,img { 
            border:0;
        }
        #masthead ol,
        #masthead ul,
        #footer ol,
        #footer ul {
            list-style:none;
        }
        ol,ul {
            list-style:square;
        }
        h1,h2,h3,h4,h5,h6 {
            font-size:100%;
            font-weight:normal;
        }
        /* end: reset */    
            
        body {
            font-size:12px;
            font-family:Arial, sans-serif;
            text-align:center;
            background:#D7DFDA;
            color:#4d4d4d;
        }
        div.left {
            float:left;
            width:438px;
            padding:0 16px;
            border-right:1px solid #3A4640;
        }
        em {
            font-family:Georgia, serif;
        }
        div.right {
            float:right;
            width:137px;
            padding:0 16px;
        }                
        div#outerwrapper {
            width:640px;
            margin:auto;
            text-align:left;
            background:url(images/bg_wrapper.gif) left top repeat-y;
        }
        p#webversion {
            background:#D7DFDA url(images/arc.gif) left 25px no-repeat;
            height:63px;
            padding-top:25px;
        }
        p#webversion a {
            color:#8B9C96;
            font-size:10px;
        }
        div#masthead {
            float:left;
            padding:0 0 16px 0;
            background:#CD8D0A /* GREEN */ url(images/bg_volumedate.gif) top left repeat-x;    
            color:#fff;        
        }
        div#masthead ul {    
            color:#3A4640;    
            list-style:square;
            padding-left:15px;
        }
        div#masthead a {    
            color:#fff;    
            position:relative;
            left:-5px;
            text-decoration:none;
        }
        div#volume {
            border-right:none;
            padding-bottom:16px;
            color:#4D5B53;
        }
        div#date {
            padding-bottom:16px;
            font-size:11px;
            color:#CD8D0A; /* GREEN */
            text-transform:uppercase;
            font-weight:bold;
            text-align:right;
        }
        div#inthisissue {
            clear:both;
            font-size:11px;
            line-height:13px;
        }
        div#aboutregent {
            font-size:11px;
            line-height:13px;
        }
        div#sidebar {
            float:left;
            width:138px;
            padding:16px;
            color:#fff;
            font-size:11px;
            background:#778884;
        }
        div#sidebar h2 {
            font-size:22px;    
        }
        div#sidebar a {
            color:#fff;
        }
        div#sidebar p,
        div#sidebar ul {
            line-height:13px;
            margin:10px 0;
        }
        div#sidebar ul {
            padding-left:14px;
        }
        div#sidebar li {
            padding-bottom:2px;
        }
        div#sidebar div#sidetwo {
            margin:16px 0;
            border-top:1px solid #fff;
            border-bottom:1px solid #fff;
            padding:16px 0;
        }
        div#main {
            clear:both;
            float:left;
            width:470px;
            font-family:Georgia, serif;
            background:#fff;
        }
        div#main h2 {
            font-size:28px;
            color:#CD8D0A; /* GREEN */
            line-height:32px;    
            padding-bottom:5px;    
        }
        div#main div#topword h2,
        div#main div#gude h2 {
            color:#8B9C96;    
            margin-top:50px;
        }
        img.portrait {
            float:right;
            margin:0 0 6px 6px;
        }
        img.placeholder {
            float:right;
            margin:12px 0 10px 12px;
            border:8px #D7DFDA solid;
        }
        div#main h3 {
            font-family:Arial, sans-serif;
            text-transform:uppercase;    
            font-size:10px;        
            padding-bottom:14px;    
        }
        div#main h3 strong {    
            font-size:11px;    
        }
        div#main div.block {
            background:url(images/bg_mainblock.gif) left bottom repeat-x;
            padding:16px 16px 28px 16px;
            clear:both;
            float:left;
            width:438px;
        }
        div#main p {
            line-height:18px;
            margin:9px 0;
        }
        div#main ul {
            line-height:18px;
            margin-top:9px;
            margin-bottom:9px;
        }
        div#main a {
            line-height:18px;
            margin:9px 0;
            color:#CD8D0A; /* GREEN */
        }
        div#footer {
            clear:both;
            float:left;
            padding:16px 0;
            background:#CD8D0A; /* GREEN */
            line-height:12px;
            width:640px;
        }
        div#footer ul,
        div#footer li {
            float:left;
            padding-right:24px;
        }
        div#footer a {
            color:#fff;
        }
        div#footer .right {
            font-size:10px;
            color:#fff;
        }
        p#copyright {
            clear:both;
            font-size:10px;
            color:#3A4640;
            padding-top:60px;
        }
        span.print {
            display:none;
        }
        
    /* ]]> */
    </style>
    <style type="text/css" title="text/css" media="print">
    /* <![CDATA[ */
        
        /*
        Green:     #CD8D0A
        Blue:     #CD8D0A
        Gold:    #CD8D0A
        Raisin: #855E4E
        */
        
        /* begin: reset */
        body,div,h1,h2,h3,h4,h5,h6,p { 
            margin:0;
            padding:0;
        }
        #masthead ul,
        #masthead ol,
        #masthead li,
        #footer ul,
        #footer ol,
        #footer li,
        #sidebar ul,
        #sidebar ol,
        #sidebar li { 
            margin:0;
            padding:0;
        }
        fieldset,img { 
            border:0;
        }
        #masthead ol,
        #masthead ul,
        #footer ol,
        #footer ul {
            list-style:none;
        }
        ol,ul {
            list-style:square;
        }
        h1,h2,h3,h4,h5,h6 {
            font-size:100%;
            font-weight:normal;
        }
        /* end: reset */    
            
        body {
            font-size:12px;
            font-family:Arial, sans-serif;
            text-align:center;
        }
        a {
            color:#000;
        }
        div.left {
            float:left;
            width:438px;
            padding:0 16px;
            border-right:1px solid #CCC;
        }
        em {
            font-family:Georgia, serif;
        }
        div.right {
            float:right;
            width:137px;
            padding:0 16px;
        }                
        div#outerwrapper {
            width:600px;
            margin:auto;
            text-align:left;
        }
        p#webversion {
            display:none;
        }
        p#webversion a {
            color:#8B9C96;
            font-size:10px;
        }
        div#masthead {
            float:left;
            padding:16px 0 16px 0;
            border-top:1px solid #ccc;    
            border-bottom:1px solid #ccc;    
            margin-bottom:16px;    
            width:600px;
        }
        div#masthead ul {    
            list-style:square;
            padding-left:15px;
        }
        div#masthead a {
            position:relative;
            left:-5px;
            text-decoration:none;
        }
        div#volume {
            padding-bottom:8px;
        }
        div#date {
            padding-bottom:8px;
            font-size:11px;
            text-transform:uppercase;
            font-weight:bold;
            text-align:left;
        }
        div#date p {
            margin-bottom:0;
            padding-bottom:0;
        }
        div#inthisissue {
            clear:both;
            font-size:11px;
            line-height:13px;
        }
        div#aboutregent {
            font-size:11px;
            line-height:13px;
        }
        div#sidebar {
            float:left;
            width:136px;
            padding:16px;
            font-size:11px;
        }
        div#sidebar h2 {
            font-size:22px;    
        }
        div#sidebar a {
            color:#000;
        }
        div#sidebar p,
        div#sidebar ul {
            line-height:13px;
            margin:10px 0;
        }
        div#sidebar ul {
            padding-left:14px;
        }
        div#sidebar li {
            padding-bottom:2px;
        }
        div#sidebar div#sidetwo {
            margin:16px 0;
            border-top:1px solid #ccc;
            border-bottom:1px solid #ccc;
            padding:16px 0;
        }
        div#main {
            clear:both;
            float:left;
            width:430px;
            font-family:Georgia, serif;
            background:#fff;
            border-right:1px solid #ccc;
        }
        div#main h2 {
            font-size:28px;
            line-height:32px;    
            padding-bottom:5px;    
        }
        div#main div#topword h2,
        div#main div#gude h2 {    
            margin-top:50px;
        }
        img.title {
            display:none;
        }
        span.print img.title {
            display:block;
            padding:16px;
            page-break-after: avoid;
        }
        span.print {
            page-break-after: avoid;
        }
        img.portrait {
            float:right;
            margin:0 0 6px 6px;
        }
        img.placeholder {
            float:right;
            margin:12px 0 10px 12px;
            border:8px #CCC solid;
        }
        div#main h3 {
            font-family:Arial, sans-serif;
            text-transform:uppercase;    
            font-size:10px;        
            padding-bottom:14px;    
        }
        div#main h3 strong {    
            font-size:11px;    
        }
        div#main div.block {
            border-bottom:1px solid #ccc;
            padding:16px 16px 28px 16px;
        }
        div#main p {
            line-height:18px;
            margin:9px 0;
        }
        div#main ul {
            line-height:18px;
            margin-top:9px;
            margin-bottom:9px;
        }
        div#main a {
            line-height:18px;
            margin:9px 0;
        }
        div#footer {
            clear:both;
            float:left;
            padding:0 0;
            line-height:12px;
            width:600px;
        }
        div#footer div.left {
            padding-top:52px;
            padding-bottom:52px;
        }
        div#footer ul {
            display:none;
        }
        div#footer div.right {
            font-size:10px;
            padding-top:16px;
            float:left;
        }
        p#copyright {
            font-size:10px;
            display:inline;
        }
        a {
            text-decoration:none;
        }
        
    /* ]]> */
    </style>
    <style type="text/css" title="text/css" media="print">
        div#main {
            clear:both;
            float:none;
            width:600px;
            border-right:none;
        }
        div#sidebar {
            clear:both;
            float:none;
            width:600px;
            padding:0;
        }
        div#masthead {    
            margin-bottom:0;
        }
        div#sidebar div.block {
            border-bottom:1px solid #ccc;
            padding:16px 16px 28px 16px;
        }
        div#sidebar div#sidetwo {
            margin:0;
            border-top:none;
            padding:16px 16px 16px 16px;
        }
        div#inthisissue {
            border-right:none;
        }
        div#volume {
            border-right:none;
        }
        div#footer div.left {
            border:none;
        }
        div#main div#topword h2,
        div#main div#gude h2 {    
            margin-top:0px;
        }
    </style>    
</head>
<body>

<div id="outerwrapper">
    <p id="webversion">
        <webversion>View this newsletter online.</webversion>
    </p>
    <img src="images/regentchronicle.gif" alt="Regent Connection" width="640" height="68" border="0" class="title" /><br />
    <span class="print"><img src="images/print_regentchronicle.gif" alt="image" width="624" border="0" class="title" /><br /></span>
    <div id="masthead">
        <div class="left" id="volume">
            <p>
                <$title default='VOLUME 1 ISSUE 3'$>
            </p>
        </div>
        <div class="right" id="date">
            <p>
                1st QUARTER <$currentyear$>
            </p>
        </div>
        <div class="left" id="inthisissue">
            <p>
                <strong>IN THIS ISSUE</strong>
            </p>
            <ul>
                <li><a href="#topword">A Word From the Top</a></li>
                <li><a href="#gude">Gude Corner</a></li>
                <tableofcontents>
                    <li><$repeatertitle$></li>
                </tableofcontents>
            </ul>
        </div>
        <div class="right" id="aboutregent">
            <p>
                <strong>ABOUT REGENT</strong>
            </p>
            <ul>
                <li><a href="http://www.regenteducation.com/solutions/" target="_blank">Solutions</a></li>
                <li><a href="http://www.regenteducation.com/partnerships/" target="_blank">Partnerships</a></li>
                <li><a href="http://www.regenteducation.com/support/" target="_blank">Customer Support</a></li>
                <li><a href="http://www.regenteducation.com/contact/" target="_blank">Contact Us</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="block" id="topword">
            <img src="<$imagesrc$>" alt="Portrait" width="90" height="116" border="0" class="portrait" />
            <h2>A Word From the Top</h2>
            <h3><strong><$title default='Michael Ratti'$></strong>, <$title default='Chief Executive Officer'$></h3>
            <!-- Editable -->
            <$description$>
        </div>
        <div class="block" id="gude">
            <img src="images/portrait-gude.jpg" alt="Portrait" width="90" height="116" border="0" class="portrait" />
            <h2>Gude Corner</h2>
            <h3><strong>Leonard Gude</strong>, Vice President of Financial Aid Solutions</h3>
            <!-- Editable -->
            <$description$>
        </div>
        <!-- Begin: Repeating Block -->
        <repeater>
        <div class="block">
            <!-- Editable -->
            <h2><$title$></h2>
            <!-- Editable -->
            <img src="<$imagesrc$>" alt="Photo" width="168" height="134" class="placeholder" border="0" />
            <$description$>
        </div>
        </repeater>
        <!-- End: Repeating Block -->
    </div>
    <div id="sidebar">
        <div class="block" id="sideone">
            <h2><$title default='Upcoming Regent Events'$></h2>
            <!-- Editable -->
            <$description$>
        </div>
        <div class="block" id="sidetwo">
            <h2><$title default='Financial Aid Now'$></h2>
            <!-- Editable -->
            <$description$>
        </div>
        <div class="block" id="sidethree">
            <h2><$title default='Online Resources'$></h2>
            <!-- Editable -->
            <$description$>
        </div>
    </div>
    <div id="footer">
        <div class="left">
            <ul>
                <li><unsubscribe>Unsubscribe</unsubscribe></li>
                <li><forwardtoafriend>
Forward to a Friend</a></forwardtoafriend>
</li>
                <li><webversion>View This Newsletter Online</webversion></li>
            </ul>
            <p id="copyright">
                &copy; <$currentyear$> Regent Education Inc. All rights reserved.
            </p>
        </div>
        <div class="right">
            <p>
                <strong>Regent Education, Inc.</strong><br />
                47 E. South Street,<br />
                Suite 201<br />
                Frederick, MD 21701<br />
                <br />
                800.639.0927 
            </p>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
</body>
</html>
Diana Diana, 8 years ago

Thanks! I took a look at your code and it's beautifully standards compliant, which as I'm sure you know, means the display isn't going to work particularly well in a number of major email clients and Outlook 2007 is one of the shining examples. I think your issue is around the floats (not supported in Outlook '07) and other css in the footer. If you're okay with the way your email displays in those annoying non-standard compliant emailing clients I'd suggest just converting the footer to tables. You should be able to mimic your display pretty easily and won't have to mess up your code too much (just a couple tables). I tested a simplified version (missing colors and such) and it worked pretty well. Don't forget to use inline styles as well if you want the font colors and such to display in other email clients (Gmail for example).


~*~~*~~*~~*~
D. Potter
Campaign Monitor
abberdab, 8 years ago

Thanks, dpotter, for the really useful observations! I bet the floated items do account for the lower items not appearing.  The top webversion link isn't floated but --- comparing the specs on it to my little list of Outlook 2007 dos and don'ts --- I see that there is a height set on that element - I have a theory that the element is being collapsed into nothing.

Anyway, thanks for the direction! I will check back in when/if I prove these theories correct. :)

abberdab, 8 years ago

Well, I tested out these theories and they were all wrong. :)

After hours of testing and changing the order and positioning of things...

The culprit was the print stylesheet. Outlook 2007 didn't distinguish between the screen and the print stylesheet and was combining/cascading the two together. The elements that were not appearing were set to display:none; in the print stylesheet.

This about had me tearing out my hair!
Thanks for the help - I hope this answer will help someone else in the future!

Mathew Mathew, 8 years ago

Thanks for the update, that's helpful. For email, print styles generally are not applied, so best to remove them before importing into Campaign Monitor to avoid complications.


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

A print stylesheet was a deal breaker for this client - and we had it working quite well in their target email apps (this was developed well before Outlook 2007 was  a concern for them). However, this wrinkle definitely presents a compelling reason to advise against accommodating print versions in the future.

charliebist, 4 years ago

Hi . i' ve got the same problem. links <webversion> and <unsubscribe> aren't clicable in outlook 2007 and 2010.


<tr>
        <td valign="middle" align="center" height="45">
        <p style="font-size:14px;line-height:24px;font-family:Georgia, 'Times New Roman', Times, serif;color:#b0a08b;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;" >
        Cet email ne s'affiche pas correctement ? <a href="http://barmag.createsend1.com/XXXX"  href="#" style="color:#bc1f31;text-decoration:none;" >Essayez la version web.</a></p></td>
    </tr>

Someone can help me please ?

roshodgekiss roshodgekiss, 4 years ago

Hi charliebist, I notice there are two href="" attributes in your code:

<a href="http://barmag.createsend1.com/XXXX"  href="#" style="color:#bc1f31;text-decoration:none;" >

Can you kindly remove the href="#" from your <webversion>? That should fix this issue.


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

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