Spent all day troubleshooting in Outlook :(

how can I get the middle css content part to allign with the header and footer images in outlook mail
:(

http://dylandgeorge.com/email/advizex.html

that is the link to the email - the black borders width looks smaller in outlook than it does in gmail to .. last i checked 15px in gmail equaled 15px in outlook ... errr

i will thank someone for eternity if they can help me with this .. thanks.

dylangeorge, 3 years ago

here is a link showing the bottom one how it looks in gmail and the top image is outlook

http://i.imgur.com/YHbPu.png

roshodgekiss roshodgekiss, 3 years ago

Hi dylangeorge, I found there was a little invalid code in the design (eg. invalid CSS, unclosed tags), so I just cleaned it up for you. However, I see you're using background: white url('./advizex_files/bg2.jpg') 10px 0 repeat-y; - the '10px 0 repeat-y' bit is not supported in Outlook, so I'd recommend recutting your background image so it doesn't rely on the margin or repeat.

Here's the cleaned-up code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <tbody style="background: grey url('./advizex_files/bg.jpg') 0 0 repeat-y;"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AdvizeX eMail</title>
<meta name="robots" content="noindex,nofollow" />
<meta property="og:title" content="AdvizeX Invitation" />
</head>
<body>
<table width="660" border="0" align="center" cellpadding="0" cellspacing="0" style="border-width:1px; border-style:solid; border-color:#999999;">
  <tbody>
    <tr>
      <td align="center" valign="top" width="680" height="640"><img src="./advizex_files/1header.jpg" alt="AdvizeX" width="680" height="640" border="0" align="top" style="display:block;" /></td>
    </tr>
    <tr>
      <td align="center"><table width="680" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <!-- <table background="./advizex_files/bg2.jpg" alt="bg-image" width="680px" height: "350px;" >
    <tbody style="background: white url('./advizex_files/bg2.jpg') 10px 0 repeat-y;"> -->
            <tr>
              <td valign="top" style="border-left-width: 13px;border-left-style: solid;border-left-color: #232122;border-right-width: 15px;border-right-style: solid;border-right-color: #232122;background-color: #e9e8e6;"><p style="font-family:'Times New Roman', Arial, sans-serif;color:#4b4340;font-size:18px;line-height:1.4em;text-align: center;">Born from the inspiration of industry behemoths Cisco, EMC and VMware<br />
                  – VCE will take center stage on February 13th. At this private event,<br />
                  VCE’s President will explore how the company has evolved<br />
                  to meet the ever-changing needs of IT environments. Additionally,<br />
                  Mr. Hauck will delve into the solutions that businesses are using today to<br />
                  improve their productivity and transition to cloud-enabled business models.<br />
                  He will also share his views on the future for the cloud and<br />
                  how VCE is impacting this.<br />
                  <br />
                  This executive event includes an intimate cocktail reception with Mr. Hauck,<br />
                  followed by a dinner presentation. Bringing the power of the cloud<br />
                  further into your hands – all guests will receive an iPad.<br />
                  <br />
                  <img src="./advizex_files/ipad.jpg" alt="AdvizeX" width="229" height="100" align="center" style="display:block; margin: 0;" /> <br />
                  <br />
                  <a href="http://www.advizexevents.com/event.php?441766"> <img src="./advizex_files/rsvp.jpg" alt="CTA" width="105" height="26" border="0" align="center" style="display:block; margin: 0;" /></a> <br />
                  <br />
                  Registration &amp; Cocktail Reception: 5:00-6:00PM<br />
                  AdvizeX Welcome: 6:00-6:15PM<br />
                  Presentation: 6:15-7:00PM<br />
                  Q&amp;A: 7:00-7:30PM<br />
                  <br />
                  Questions?<br />
                  Please contact Mika Bostaph at (614) 318-0386 x5220<br />
                  or by email to mbostaph@advizex.com</p></td>
            </tr>
            <tr>
              <td align="center" valign="top" width="680" height="282"><img src="./advizex_files/1footer.jpg" alt="AdvizeX" width="680" height="282" border="0" align="top" style="display: block; margin: 0;"></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Hopefully this will help you get your design working in Outlook, but be sure to let us know how you go here :)


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

Thank you very much for your response and feedback roshodgekiss!

So I made the changes you submitted to me, and this is the result I am now getting in Outlook.

http://i.imgur.com/CM3ZX.jpg

The black borders for some reason are smaller in Outlook. They seem to be shifting or something, does this have to do with padding within the table around the text? I am not sure what is causing this issue :(

You can view the code at the link below.
view-source:http://dylandgeorge.com/email/upload.html

Thank you so much for your help!

dylangeorge, 3 years ago

I have discovered this thread (https://www.campaignmonitor.com/forums/post/26602/#p26602) but adding the code didn't seem to fix the issue.

Do I need to do something more than just add {border-collapse: collapse;} in the code?

roshodgekiss roshodgekiss, 3 years ago

Hi Dylan, sorry for the incomplete answer earlier. I've had a look at your code and it was 99% there! However, there were a few things:

- the width of the header/footer images is really 660px, not 680px
- borders in CSS are in addition to the width you set a table/td. So if you use <td width="660" ... style="border: 15px solid #cccccc;">, then the true width of the td will be 690px
- CSS borders tend to be a bit problematic in email clients. A better bet is to use a td background color and a table nested on top to create a 'faux border'

These are things you learn over time (generally the hard way), so don't fret - this is email and we're all learning. :) My final, cleaned up code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <tbody style="background: grey url('./advizex_files/bg.jpg') 0 0 repeat-y;"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AdvizeX eMail</title>
<meta name="robots" content="noindex,nofollow" />
<meta property="og:title" content="AdvizeX Invitation" />
<style type="text/css">
table, td {
    border-collapse: collapse;
}
img {
    display: block;
    border: 0;
}
p {
    font-family: 'Times New Roman', Arial, sans-serif;
    color:#4b4340;
    font-size:18px;
    line-height:1.4em;
    text-align: center;
}
a, a:visited { font-family: 'Times New Roman', Arial, sans-serif; color:#4b4340;}
</style>
</head>
<body>
<table width="660" border="0" align="center" cellpadding="0" cellspacing="0" style="border-width:1px; border-style:solid; border-color:#999999;">
  <tr>
    <td><img src="http://dylandgeorge.com/email/advizex_files/1header.jpg" alt="AdvizeX" width="660" height="652" border="0" /></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#232122"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="13">&nbsp;</td>
                <td bgcolor="#e9e8e6"><p>Born from the inspiration of industry behemoths Cisco, EMC and VMware<br />
                    – VCE will take center stage on February 13th. At this private event,<br />
                    VCE’s President will explore how the company has evolved<br />
                    to meet the ever-changing needs of IT environments. Additionally,<br />
                    Mr. Hauck will delve into the solutions that businesses are using today to<br />
                    improve their productivity and transition to cloud-enabled business models.<br />
                    He will also share his views on the future for the cloud and<br />
                    how VCE is impacting this.<br />
                    <br />
                    This executive event includes an intimate cocktail reception with Mr. Hauck,<br />
                    followed by a dinner presentation. Bringing the power of the cloud<br />
                    further into your hands – all guests will receive an iPad.<br />
                    <br />
                    <img src="http://dylandgeorge.com/email/advizex_files/ipad.jpg" alt="AdvizeX" width="229" height="100" style="margin: 0 auto;" /> <br />
                    <br />
                    <a href="http://www.advizexevents.com/event.php?441766"><img src="http://dylandgeorge.com/email/advizex_files/rsvp.jpg" alt="Click Here to RSVP" width="105" height="26" border="0" style="margin: 0 auto;" /></a> <br />
                    <br />
                    Registration &amp; Cocktail Reception: 5:00-6:00PM<br />
                    AdvizeX Welcome: 6:00-6:15PM<br />
                    Presentation: 6:15-7:00PM<br />
                    Q&amp;A: 7:00-7:30PM<br />
                    <br />
                    Questions?<br />
                    Please contact Mika Bostaph at (614) 318-0386 x5220<br />
                    or by email to mbostaph@advizex.com</p></td>
                <td width="15">&nbsp;</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td><img src="http://dylandgeorge.com/email/advizex_files/1footer.jpg" alt="AdvizeX" width="660" height="271" border="0"></td>
        </tr>
      </table></td>
  </tr>
</table>
<p>
  <unsubscribe>Unsubscribe</unsubscribe>
  from this email.</p>
</body>
</html>

And this is how it looks in Outlook 2010: http://cl.ly/image/2r1L2j1e0j3T

Thanks, Dylan! I hope it's full speed ahead from here :D


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

Wow, thank you so much Rosanne!

I can not describe how thankful I am for your help (: I am definitely a new-comer to HTML email development, so I am sure this won't be the last time you hear from me haha.. I'm so happy and grateful for your help, have a great weekend!

roshodgekiss roshodgekiss, 3 years ago

Ha, you're more than welcome Dylan - sorry for not giving this a proper go earlier :) Feel free to pop by with questions anytime and enjoy the weekend, too!


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