A strange Outlook 2007/Word 2007 problem.. need help!

Hi everyone,


I was done coding the Photoshop layout I've created, and I've also tested it in the major browsers and in all the IE variants (using IETester), and everything was looking great.

Then I tested for Outlook 2007 (it's the version that's installed on my computer running Windows 7), and also tried to open it using MS Word 2007 (again, that's the one installed). And I lost a lot of hair from the strange results I got from these two.


First, here's the simplified HTML file of what I was working on:

MyLogoHere


As you'll see if you view the source code of that file, the top and bottom areas of the header container are both images, to preserve their rounded corners (and the footer's shadows), while the main body has a logo-image, a white background, and 1px borders on the left and on the right.


Here's the look I got when I opened it using Firefox 12.0, Chrome 19.0, Opera 11.64, Internet Explorer 9.0, Safari 5.1.7, and, believe it or not, all the variants of IE-- from IE 5.5 to the latest IE (although I was just using an emulator, IETester v0.4.11), and also Yahoomail, Gmail, Hotmail, and AOLmail (using only Chrome):

http://i1263.photobucket.com/albums/ii636/sporkweb/allOthers.png

Everything looks good, right?



Here's what I got with Outlook 2007:

http://i1263.photobucket.com/albums/ii636/sporkweb/Outlook2007.png

As you can see, the top and bottom images are moved to the LEFT by 1px.


Finally, here's what I got when I opened it using MS Word 2007:

http://i1263.photobucket.com/albums/ii636/sporkweb/MSWord2007.png

Here, the top and bottom images are moved to the RIGHT by 1px.


Anybody got any idea what's happening here? Thanks so much in advance for any help.

PS. If you want to play with some possible solutions, you can download the HTML file and images here: http://www.sendspace.com/file/5hr4ww


Thanks again!

--sporkweb--

EvertBouw, 4 years ago

In my experience it works better if the top and bottom images are part of the same table as the middle content, so like this

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed">
  <tr>
    <td><table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td><img src="_img/headertop.png" width="600" height="30" /></td>
        </tr>
        <tr>
          <td style="border-left:1px solid #aeaeae; border-right:1px solid #aeaeae;" bgcolor="#FFFFFF"><table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                <td><img src="_img/logo/Fleximail_blue_OutlookFix.jpg" width="291" height="63"></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td><img src="_img/footerbottom.png" width="600" height="35" /></td>
        </tr>
      </table></td>
  </tr>
</table>
sporkweb, 4 years ago

Thanks EvertBouw! I'll try your workaround and see if that fixes it.

sporkweb, 4 years ago

OK. I tried EvertBouw's solution but it seemed to open up new problems that weren't there before.

Here's what I got in Chrome, Safari, and Opera:
http://i1263.photobucket.com/albums/ii636/sporkweb/EvertBouw-solution.png

As you can see, the left side looks great but on the right side, there appears a 1px movement of the top and bottom images to the left.

And using Firefox:
http://i1263.photobucket.com/albums/ii636/sporkweb/EvertBouw-solution_Firefox.png

We get the same result, but in reverse (the right side looks OK; left side is problematic).

Surprisingly, only IE9 got it right. :D


And since I'm already having these problems at the browser level, I didn't bother testing them for the IE variants, Outlook, or in Word.


Anybody please, help me...

EvertBouw, 4 years ago

Done some research, the example I gave I've only used without setting the border-collapse, and then it works fine.

sporkweb, 4 years ago

Hi EvertBouw,


Did it work fine on your test when you added "table td{border-collapse:collapse;}" to the embedded styles? I did that too and I'm still having the same problems.

Could you give a bit more explanation as to how you did it?


I've tried the following possible solutions, but still the problem persists in one form or another:

1. Added "table {mso-table-lspace:0pt; mso-table-rspace:0pt;}" to my embedded styles, still with the same results.
2. Added style="padding-right:1px" to both top and bottom images, but the whole header just moved 1px to the left.
3. Added style="margin-right:1px" to both top and bottom images, got the same result, but IE9 now shows top and bottom images moving 1px to the right.
4. Added align="left" to both top and bottom images, with align="center" or no alignment declaration for the table at the middle, but the IE9 rendering just went berserk. :D

I'm running out of ideas to solve this problem.. help me please..

PS. I've updated the files if you want to play with it; you can download them here. Thanks in advance.

EvertBouw, 4 years ago

It worked fine when I didn't do anything with border-collapse. I made the template for the following newsletter last year, it wasn't send with the campaign monitor tool but you get the idea.

http://nieuwsbrief.voedingscentrum.nl/x/plugin/?pName=last_mailing&MIDRID=S7Y1BAAA38&pLang=nl&Z=-1153949884

If all else fails, you could do the following trick.

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed">
  <tr>
    <td><table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td><img src="_img/headertop.png" width="600" height="30" /></td>
        </tr>
        <tr>
          <td bgcolor="#aeaeae"><table width="598" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                <td bgcolor="#FFFFFF"><table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
                    <tr>
                      <td><img src="_img/logo/Fleximail_blue_OutlookFix.jpg" width="291" height="63"></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td><img src="_img/footerbottom.png" width="600" height="35" /></td>
        </tr>
      </table></td>
  </tr>
</table>

Basically make the whole cell grey, and put a table inside it that is 2px smaller.

sporkweb, 4 years ago

EvertBouw,


Again, thank you so much for taking the time and for your efforts.

Your solution worked for all the major browsers (Chrome, Firefox, IE9, Safari, and Opera) and all the IE variants. I had to add a style="display:block;" to the three images though to make it look good in Hotmail, Gmail, Yahoomail, and AOLmail (just a minor fix).

But have you tried opening it up in MS Word 2007/2010? What results do you get? Or even sending it and opening up your Outlook 2007/2010 inbox? Again, thank you so much for taking the time.

It looks good to me now in Outlook 2007 (I'm using Windows 7), but it's still broken in MS Word 2007:
http://i1263.photobucket.com/albums/ii636/sporkweb/EvertBouw-newfix_Word2007.png


To anyone out there who might want to weigh in on what's probably happening, thanks in advance.

roshodgekiss roshodgekiss, 4 years ago

Hi there sporkweb, would you be able to paste in your full HTML code for this campaign? Using a different doctype (or none at all) can even make a difference, so we'd love to take a look :)


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

Hi Ros,


Thanks for taking the time to comment. First of all I'd like to thank you for all the great stuff you're sharing at the CM blog (I'm learning a lot!), and of course the whole CM team for giving us such a wonderful email service in Campaign Monitor.

Hmm.. I purposely reduced the code to its barest essentials to remove any possible extraneous factor that might be causing the hiccup; also, to isolate the problem if I ever find it.

Besides, what I'm creating is an email template for a client, so there's no particular campaign yet, and there are no full HTML code to paste yet.

Again, you can check out the source code here. I did some minor modifications to the code (as when I first posted it), but the results I got are essentially the same for Word/Outlook 2007.


As for the doctypes, I've tried each one (the ones you'll find here)-- HTML 5, HTML 4.01 Strict, HTML 4.01 Transitional, and even XHTML 1.0 Strict and XHTML 1.0 Transitional-- but, to no avail (I still got the same results). So I just left it with no doctype.

roshodgekiss roshodgekiss, 4 years ago

Hey there sporkweb, the good news is that I've seen this issue before and there is a workaround. The bad news is that I don't know why Outlook 2007 is so funny about borders.

Your best bet is to create a border by setting the background color of the cell to the border color (#aeaeae). Then, nest a new table that's -2px the width of the surrounding cell. This cell is #fff and contains the logo. Don't forget to set align="center" on the surrounding cell. I coded this up to make sure it still works in Outlook 2007 and huzzah, straight borders! Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=650, initial-scale=1.0">
<title>Help!</title>
<style type="text/css">
/* Client-specific Styles */
     /* Force Hotmail to display emails at full width */
     .ExternalClass {
    width:100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
}
body {
    width:100% !important;
}
.ReadMsgBody {
    width:100%;
}
body { /* Prevent Webkit and Windows platforms from changing default text sizes. */
    -webkit-font-smoothing:antialiased;
    width:100% !important;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}
/* Reset Styles */
    body {
    margin-top:0;
    margin-bottom:0;
}
img {
    border:0;
    outline:none;
    text-decoration:none;
}
table td {
    border-collapse:collapse;
}
table {
    mso-table-lspace:0pt;
    mso-table-rspace:0pt;
}
img {
    display:block;
}
.container {
    background-color: #aeaeae;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#ededed" >
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ededed">
  <tr>
    <td><table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed" align="center">
        <tr>
          <td style="padding-top:30px;"><img src="http://sporkweb.freehostia.com/headertop.png" width="600" height="30" />
            <table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
              <tr>
                <td align="center" class="container"><table width="598" border="0" cellspacing="0" cellpadding="15" bgcolor="#FFFFFF">
                    <tr>
                      <td><img src="http://sporkweb.freehostia.com/myLogoHere.jpg" width="291" height="63"></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <img src="http://sporkweb.freehostia.com/footerbottom.png" width="600" height="35" /></td>
        </tr>
      </table></td>
  </tr>
</table>
<unsubscribe>Unsub</unsubscribe>
</body>
</html>

Thanks sporkweb - hopefully you'll sleep easier tonight :)


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

Hi Ros.. I'm so sorry for the delayed reply.. and thank you, thank you, thank you for your solution! It worked like a charm. However, I'd like to give credit to EvertBouw too who first suggested a similar workaround (see his posts above).

The only worry I have for now is Outlook 2010, which I understand is using MS Word 2010 as its rendering engine. I opened it up using Word '10, and the right side appears to still have an issue. However, I'll try to use Outlook '10 later and see if the problem persists.

Again, thank you so much, Ros! You're the best!

sporkweb, 4 years ago

I've already done my Outlook 2010 test and the header looks great. Hurray!

Again, many thanks to EvertBouw and Ros for the solutions you gave. I'm sleeping soundly now. :)

roshodgekiss roshodgekiss, 4 years ago

Hah, you're welcome - glad it all worked out in the end! :D


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

This post save my life. Very useful when the client ask you for two borders instead of one and use the most buggy Outlook.

Thanks for this fix!

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