VML Hack stops images from aligning

Hello,

apologies if this has been talked about elsewhere - I can't find it!

I've been applying to VML hack for Background images in Outlook 07/10 and have hit a bit of a brick wall when it comes to aligning images chosen by the client.

I'm using something similar to

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:600px;">
                <v:fill type="tile" src="http://towardconsulting.com/images/mailer/bg-table.png" /></v:fill>
                <v:textbox style="mso-fit-shape-to-text:true">
                <![endif]-->

                          <img editable="true" width="212" height="168" alt="Image Description" align="right" style="border: none; padding-bottom:20px;padding-top:20px;text-decoration:none;line-height:100%;display:block;width:212px;height:168px;outline-style:none;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;" />


           <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->

however, the image aligns left or right at what appears to be block level. I've tried removing display: block but that hasn't had an impact ...

Has anyone out there had any experience of this and any suggestions that would solve this?

roshodgekiss roshodgekiss, 4 years ago

Hi atopping, welcome to the forums. It's hard to say if it's the VML hack that's causing the weird alignment and suggest fixes without seeing the surrounding code - would you be able to post the full code and a screenshot of the issue? We'll do our best to test this out on our end. Thank you!


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

Hi Ros,

thanks for getting back to me. Code below. I'm fairly sure it's the VML. When I remove it the background obviously disappears but the images seem to align ... feel free to kick me if I'm doing something stupid!

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Toward Consulting</title>
       <style type="text/css">
.eoa_kkw {
    width:100% !important;
}
.eoa_wn3 {
}
#outlook a {
    padding:0;
}
body {
    width:100% !important;
}
.ReadMsgBody {
    width:100%;
}
.ExternalClass {
    width:100%;
}
body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 14px;
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
}
body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background-color: rgb(155,155,157);
    color: rgb(255,255,255);
    margin:0;
    padding:0;
}
img {
    height:auto;
    line-height:100%;
    outline:none;
    text-decoration:none;
}
#backgroundTable {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background-color: rgb(155,155,157);
    color: rgb(255,255,255);
    height:100% !important;
    margin:0;
    padding:0;
    width:100% !important;
}
table {
    border-collapse:collapse;
    mso-table-lspace:0pt;
    mso-table-rspace:0pt;
}
p {
    margin: 1em 0;
}
body {
    font-size: 14px;
    line-height: 16px;
}
body a {
    color: rgb(155,155,157) !important;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    color: rgb(255,255,255) !important;
    line-height: 100% !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: rgb(155,155,157) !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: rgb(155,155,157) !important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: rgb(155,155,157) !important;
}
#mainTable h1 {
    border-bottom: 1px solid rgb(102,102,102);
    color: rgb(255,255,255);
    font-size: 16px;
    line-height: 15px;
    padding: 0 0 10px 0;
}
#mainTable h2 {
    color: rgb(155,155,157) !important;
    font-size: 24px;
    line-height: 25px;
    text-transform: uppercase;
}
#mainTable img {
    border: none;
    height:168px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 212px;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
    color: rgb(155,155,157) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    background: none !important;
}
</style>
       </head>
       <body style="line-height:16px;color:#ffffff;background-color:#9b9b9d;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;width:100% !important;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;" class="eoa_kkw">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="width:100% !important;height:100% !important;mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;color:#ffffff;background-color:#9b9b9d;line-height:16px;color:#ffffff;background-color:#9b9b9d;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;width:100% !important;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;" class="eoa_kkw">
         <tr>
    <td valign="top"><table style="mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" width="600" align="center">
        <tr>
          <td background="/csimport/bg-table.png" style="font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;background-repeat:repeat;" width="600"><!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:600px;">
                <v:fill type="tile" src="http://towardconsulting.com/images/mailer/bg-table.png" /></v:fill>
                <v:textbox style="mso-fit-shape-to-text:true">
                <![endif]-->
            
            <table align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;">
              <tr>
                <td height="190" valign="top" width="600" style="width:600px;vertical-align:top;height:190px;"><a href="http://www.towardconsulting.com" target="_blank" style="text-decoration:none;color:#9b9b9d;" class="eoa_wn3"><img src="/header.jpg" alt="Toward Consulting Ltd" style="border: none; text-decoration:none;line-height:100%;width:600px;height:190px;display:block;outline-style:none;" height="190" width="600" /></a></td>
              </tr>
              <tr>
                <td background="/halo.png" valign="top" style="background-repeat:no-repeat;padding-bottom:21px;padding-left:0;padding-right:0;padding-top:21px;"><table cellpadding="0" cellspacing="0" border="0" id="mainTable" style="width:548px;mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;" align="center">
                    <tr>
                      <td valign="top"><h1 style="line-height:15px;font-size:16px;color:#ffffff;padding-bottom:10px;padding-left:0;padding-right:0 ;padding-top:0 ;border-bottom-style:solid;border-bottom-width:1px;">
                          <currentdayname>
                            <currentday>
                              <currentmonthname>
                                <currentyear></currentyear>
                              </currentmonthname>
                            </currentday>
                          </currentdayname>
                        </h1></td>
                    </tr>
                    <repeater>
                      <tr>
                        <td style="padding-bottom:0 ;padding-left:0;padding-right:0 ;padding-top:10px;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgb(102,102,102);" valign="top">

                              <img editable="true" width="212" height="168" alt="Image Description" align="right" style="border: none; padding-bottom:20px;padding-top:20px;text-decoration:none;line-height:100%;display:block;width:212px;height:168px;outline-style:none;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;" />
                        
                            <h2 style="text-transform:uppercase;line-height:25px;font-size:24px;color:#9b9b9d;">
                            <singleline label="Title">Item Title</singleline>
                          </h2>
                          <multiline label="Content">
                            <p style="margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;">Item Contents</p>
                          </multiline></td>
                      </tr>
                    </repeater>
                    <tr>
                      <td style="width:548px;vertical-align:top;padding-bottom:10px;padding-left:0;padding-right:0;padding-top:10px;" valign="top" width="548"><table border="0" cellpadding="0" cellspacing="0" style="width:548px;mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;">
                          <tr>
                            <td width="234" valign="top" style="width:234px;vertical-align:top;line-height:14px;font-size:12px;-webkit-text-size-adjust:none;padding-bottom:0 ;padding-left:0;padding-right:40px;padding-top:0 ;"><br />
                              <multiline label="Footer Text">
                                <p style="margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;"> Toward Ltd<br />
                                  255a Upper Newtownards Road, Belfast<br />
                                  BT4 3JF, Northern Ireland<br />
                                  Email: <a href="mailto:%20info@towardconsulting.com" style="text-decoration:none;color:#9b9b9d;" class="eoa_wn3">info@towardconsulting.com</a><br />
                                  Twitter: <a href="http://twitter.com/@TOWARDLtd" target="_blank" style="text-decoration:none;color:#9b9b9d;" class="eoa_wn3">@TOWARDLtd</a> </p>
                              </multiline></td>
                            <td width="234" valign="top" style="width:234px;vertical-align:top;line-height:14px;font-size:12px;-webkit-text-size-adjust:none;padding-bottom:0 ;padding-left:0;padding-right:40px;padding-top:0 ;"><p style="line-height:14px;font-size:12px;color:#979595;-webkit-text-size-adjust:none;margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;"><br />
                                <webversion style="line-height:14px;font-size:12px;color:#979595;-webkit-text-size-adjust:none;">View this newsletter on your browser</webversion>
                                <br />
                                <unsubscribe style="line-height:14px;font-size:12px;color:#979595;-webkit-text-size-adjust:none;">Unsubscribe from this newsletter</unsubscribe>
                              </p>
                              <p style="margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;">&copy; Toward Ltd 2006-2012</p></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            
            <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]--></td>
        </tr>
      </table></td>
  </tr>
       </table>
</body>
</html>

http://www.towardconsulting.org/images/mailer/outlook.png
http://www.towardconsulting.org/images/mailer/everything-else.png

roshodgekiss roshodgekiss, 4 years ago

Hi atopping, I've seen this behaviour before. While I'm not entirely sure how to fix it, my best advice at present is to move the http://towardconsulting.com/images/mailer/bg-table.png background image into the table cell below that of the header, ie. into the content cell. I'll continue to experiment, but your best bet is to simply not have the header image nested in the VML code.

Sorry I can't provide a more sufficient solution for now! That said, Brian Thies may be lurking around and he usually has more answers than I do when it comes to Outlook.


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

Hi Ros,

thanks for the tip on the header one ... thats fixed that up. If you'd any further thoughts on the images in the body of the email not aligning correctly I'd be grateful. The work around would be to add another column and put the image in it. The downside would be that the text wouldn't flow around the image. Code and screenshots below. If you can't help anymore it's no problem! I know you're not here to answer coding queries! If Brian was about and willing to help that would be appreciated! I know he was the brains behind the VML work.

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toward Consulting</title>
<style type="text/css">
.eoa_kkw {
    width:100% !important;
}
.eoa_wn3 {
}
#outlook a {
    padding:0;
}
body {
    width:100% !important;
}
.ReadMsgBody {
    width:100%;
}
.ExternalClass {
    width:100%;
}
body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 14px;
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
}
body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background-color: rgb(155,155,157);
    color: rgb(255,255,255);
    margin:0;
    padding:0;
}
img {
    height:auto;
    line-height:100%;
    outline:none;
    text-decoration:none;
}
#backgroundTable {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background-color: rgb(155,155,157);
    color: rgb(255,255,255);
    height:100% !important;
    margin:0;
    padding:0;
    width:100% !important;
}
table {
    border-collapse:collapse;
    mso-table-lspace:0pt;
    mso-table-rspace:0pt;
}
p {
    margin: 1em 0;
}
body {
    font-size: 14px;
    line-height: 16px;
}
body a {
    color: rgb(155,155,157) !important;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    color: rgb(255,255,255) !important;
    line-height: 100% !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: rgb(155,155,157) !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: rgb(155,155,157) !important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: rgb(155,155,157) !important;
}
#mainTable h1 {
    border-bottom: 1px solid rgb(102,102,102);
    color: rgb(255,255,255);
    font-size: 16px;
    line-height: 15px;
    padding: 0 0 10px 0;
}
#mainTable h2 {
    color: rgb(155,155,157) !important;
    font-size: 24px;
    line-height: 25px;
    text-transform: uppercase;
}
#mainTable img {
    border: none;
    height:168px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 212px;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
    color: rgb(155,155,157) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    background: none !important;
}
</style>
</head>

<body style="line-height:16px;color:#ffffff;background-color:#9b9b9d;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;width:100% !important;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;" class="eoa_kkw">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="width:100% !important;height:100% !important;mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;color:#ffffff;background-color:#9b9b9d;line-height:16px;color:#ffffff;background-color:#9b9b9d;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;width:100% !important;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;" class="eoa_kkw">
  <tr>
    <td valign="top"><table style="mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" width="600" align="center">
        <tr>
          <td background="/bg-table.png" style="font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;background-repeat:repeat;" width="600">

            
            <table align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;font-size:14px;font-family:Helvetica, Verdana, Arial, sans-serif;">
              <tr>
                <td height="190" valign="top" width="600" style="width:600px;vertical-align:top;height:190px;"><a href="http://www.towardconsulting.com" target="_blank" style="text-decoration:none;color:#9b9b9d;" class="eoa_wn3"><img src="/header.jpg" alt="Toward Consulting Ltd" style="border: none; text-decoration:none;line-height:100%;width:600px;height:190px;display:block;outline-style:none;" height="190" width="600" /></a></td>
              </tr>
              <tr>
                <td background="/halo.png" valign="top" style="background-repeat:no-repeat;padding-bottom:21px;padding-left:0;padding-right:0;padding-top:0;">
                
                <!--[if gte mso 9]>

                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:600px;">

                <v:fill type="tile" src="http://towardconsulting.com/images/mailer/bg-table.png" /></v:fill>

                <v:textbox style="mso-fit-shape-to-text:true">

                <![endif]-->

                <table cellpadding="0" cellspacing="0" border="0" id="mainTable" style="width:548px;mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse; padding-top: 21px;" align="center">
                    <tr>
                      <td valign="top"><h1 style="line-height:15px;font-size:16px;color:#ffffff;padding-bottom:10px;padding-left:0;padding-right:0 ;padding-top:0 ;border-bottom-style:solid;border-bottom-width:1px;">
                          <currentdayname>
                          <currentday>
                          <currentmonthname>
                          <currentyear>
                        </h1></td>
                    </tr>
                    <repeater>
                      <tr>
                        <td style="padding-bottom:0 ;padding-left:0;padding-right:0 ;padding-top:10px;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgb(102,102,102);" valign="top"><img editable="true" width="212" alt="Image Description" align="right" style="border: none; padding-bottom:20px;padding-top:20px;text-decoration:none;line-height:100%;display:block;width:212px;height:168px;outline-style:none;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;" />
                          <h2 style="text-transform:uppercase;line-height:25px;font-size:24px;color:#9b9b9d;">
                            <singleline label="Title">Item Title</singleline>
                          </h2>
                          <multiline label="Content">
                            <p style="margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;">Item Contents</p>
                          </multiline></td>
                      </tr>
                    </repeater>
                    <tr>
                      <td style="width:548px;vertical-align:top;padding-bottom:10px;padding-left:0;padding-right:0;padding-top:10px;" valign="top" width="548"><table border="0" cellpadding="0" cellspacing="0" style="width:548px;mso-table-rspace:0pt;mso-table-lspace:0pt;border-collapse:collapse;">
                          <tr>
                            <td width="234" valign="top" style="width:234px;vertical-align:top;line-height:14px;font-size:12px;-webkit-text-size-adjust:none;padding-bottom:0 ;padding-left:0;padding-right:40px;padding-top:0 ;"><br />
                              <multiline label="Footer Text">
                                <p style="margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;"> Toward Ltd<br />
                                  255a Upper Newtownards Road, Belfast<br />
                                  BT4 3JF, Northern Ireland<br />
                                  Email: <a href="mailto:%20info@towardconsulting.com" style="text-decoration:none;color:#9b9b9d;" class="eoa_wn3">info@towardconsulting.com</a><br />
                                  Twitter: <a href="http://twitter.com/@TOWARDLtd" target="_blank" style="text-decoration:none;color:#9b9b9d;" class="eoa_wn3">@TOWARDLtd</a> </p>
                              </multiline></td>
                            <td width="234" valign="top" style="width:234px;vertical-align:top;line-height:14px;font-size:12px;-webkit-text-size-adjust:none;padding-bottom:0 ;padding-left:0;padding-right:40px;padding-top:0 ;"><p style="line-height:14px;font-size:12px;color:#979595;-webkit-text-size-adjust:none;margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;"><br />
                                <webversion style="line-height:14px;font-size:12px;color:#979595;-webkit-text-size-adjust:none;">View this newsletter on your browser</webversion>
                                <br />
                                <unsubscribe style="line-height:14px;font-size:12px;color:#979595;-webkit-text-size-adjust:none;">Unsubscribe from this newsletter</unsubscribe>
                              </p>
                              <p style="margin-bottom:1em;margin-left:0;margin-right:0;margin-top:1em;">&copy; Toward Ltd 2006-2012</p></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table>
                              
            <!--[if gte mso 9]>

                  </v:textbox>

                  </v:rect>

                  <![endif]-->
                  </td>
              </tr>
            </table>

            </td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Outlook Version
http://towardconsulting.com/images/mailer/outlook-new.png

Mac Mail and correct version
http://towardconsulting.com/images/mailer/mail.png

roshodgekiss roshodgekiss, 4 years ago

Hi again atopping, your best bet is to wrap the editable image in a table, which is aligned right. This means you can still apply display: block; to the image and still have it aligned using attributes. Here's the simplified code for this:

<table border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
  <tr>
    <td><img editable="true" width="212" alt="Image Description" align="right" style="border: none; padding: 20px 0 20px 20px ;margin: 0;" /></td>
  </tr>
</table>

Note that I've not set a table width, so the table should collapse if the image is removed.

I'll call over Brian and see if he has an opinion on the spacing issue above. All the best!


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

Hi Ross,

thanks for that - unfortunately it doesn't wory :o( Oh well - I've had to split the centre column into two columns as I need to get this out the door now. It means the text doesn't flow under the image but it's a compromise I'll have to make.

Appreciate all the efforts with this! If Brian was about, I'd be up for finding out the cause of this if possible.

Thanks again!

roshodgekiss roshodgekiss, 4 years ago

Hi atopping, I received a great response from Brian, however it sounds like we're all stuck here:

Here’s the easiest way to explain what’s going on:

https://img.skitch.com/20120417-mr9aanq7qq5utmxemx1589nk1n.png

What we have is an Autoshape "Textbox" set to resize with the text inside, with a table inserted into the Autoshape.  Turning on formatting marks (CTRL+SHIFT+*), we can see there’s a paragraph symbol added after the table that can’t be deleted.

Here’s the actual code that’s auto added if you created this within Outlook:
<p class=MsoNormal><span style='mso-fareast-font-family:"Times New Roman" ><o:p>&nbsp;</o:p></span></p>

The only way that I know how to remove a paragraph like that is by highlighting the extra space in Outlook, selecting "Font"  from the menu, and then selecting "Hidden". This adds the style ‘display:none’ to the span.

Unfortunately I’ve been unable to find a way to apply those styles directly to the space, since that space’s code doesn’t exist in the original. ARGH!  I’ve even tried inserting the code preemptively to see if Outlook won’t add its own, but it still does.

We're both on the case, so if we get any updates, we'll be sure to let you know. Sorry we couldn't help you more prior to your deadline :P


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

Thanks for your help Ros. Seems I've thrown up a bit of a conundrum :o) Appreciate all the help on this! Would love an update if you can figure something out ... will play a bit myself when I get a spare moment.

BThies BThies, 4 years ago

Update and it's not good news:

Straight from Microsoft:

"A table in Word/Outlook is contained within a paragraph so there will be a ending paragraph mark that is not deletable.

Word is basically a paragraph-centric application in terms of how it handles formatting and document components. There always needs to be one paragraph in a document and a table will always have a paragraph associated with it. In this case, since Word is converting the HTML into Word-style formatting in the user interface, there will always be that paragraph mark that gets added after the table. As you noted, there is really nothing you can do about that since that's coming from the HTML->Word conversion. The only thing we can recommend would be to take this limitation into account and perhaps re-format the content to somehow avoid this particular scenario.

I realize this is not what you wanted to hear, but unfortunately I don't really see any other option here."


Brian Thies
Professional Email Developer
Thies Publishing
roshodgekiss roshodgekiss, 4 years ago

Thanks for the update, Brian - at least it's good to know that we should be designing around this problem, not throwing CSS at it in the vain hope that something may work out. As always, you're invaluable here!


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

Thanks for clearing that up Brian, appreciate the time you spent on this, both of you actually.

Keep up the good work!

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