Borders not lining up in Outlook 2010!

Afternoon all,

I have been pulling my hair out trying to work out why these borders are lining up in Outlook 2010, but don't elsewhere?

It appears as though they count the 1px borders differently, so it get it looking right in Outlook, which is email client most of our customers use, its displays incorrectly for everything else. Does anyone know a way around this?

http://www.theaccessgroup.com/email/NEWEMAIL/aCloud/Browser-aCloud-borders.jpg

http://www.theaccessgroup.com/email/NEWEMAIL/aCloud/Outlook-aCloud-borders.jpg

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test email</title>
</head>
<body>

<style>

  font {line-height: 20px !important;}
  .yshortcuts {color:#E5173F}
  .yshortcuts a span { color:#E5173F }
  .ReadMsgBody {width: 100% !important;}
  .ExternalClass {width: 100% !important;}
  img {display: block;}
  li {color:#E5173F; margin-top:5px; margin-right:0px; margin-bottom:5px; margin-left:0px; line-height:18px}
  ul {margin-top: 0px; margin-bottom:0px;}
  li font {color: #E5173f;}
  
</style>
<table cellpadding="0" cellspacing="0" border="0" align="center"><tr><td width="100%">
<table cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td width="550" height="95">

<table cellpadding="0" cellspacing="0" border="0"><tr><td width="550" height="95">
<table cellpadding="0" cellspacing="0" border="0">
  <tbody><tr><td width="14" height="77"><img src="http://www.theaccessgroup.com/email/NEWEMAIL/aCloud/aCloud-header-left-edge.jpg" alt="aCloud Collaborate" width="14" height="77" style="display:block" /></td>
  <td width="112" height="77"><img src="http://www.theaccessgroup.com/email/NEWEMAIL/aCloud/aCloud-logo-header_part1.jpg" alt="aCloud logo" width="112" height="77" style="display:block" /></td>
<!--Part 2-->
<td width="389" height="77">
<table cellpadding="0" cellspacing="0" border="0">
  <tbody><tr><td bgcolor="#FFFFFF" width="389" height="34"><p style="font-family: Arial,Calibri,Verdana,Sans-serif; font-size: 11px; color: #58585a; margin: 5px 0px 5px 10px;" align="right">No images? See the online version</p></td>
</tr>
<tr>
  <td width="389" height="43" bgcolor="#4D4D4D" style="font-family:Arial, Helvetica, sans-serif; font-size: 28px; color:#FFFFFF">aCloud</td>
</tr>
<tr></tr></tbody></table>
</td>
<td width="35" height="77"><img src="http://www.theaccessgroup.com/email/NEWEMAIL/aCloud/aCloud-header-right-edge.jpg" alt="" width="35" height="77" style="display:block" /></td>
  </tr>
  <tr>
<td width="13" height="18" valign="top" style="border-left:1px solid #cccccc;">&nbsp;</td>
<td width="112" height="18" valign="top"><img src="http://www.theaccessgroup.com/email/NEWEMAIL/aCloud/aCloud-logo-header_part2.jpg" alt="" width="112" height="18" border="0" align="top" style="display:block"/></td>
<!--Part 2-->
<td width="389" height="18" valign="top">&nbsp;</td>
<!--Part 3-->
<td width="34" height="15" valign="top" style="border-right:1px solid #cccccc;">&nbsp;</td>
  </tr></tbody></table>
</td></tr></table>
</td></tr></tbody></table>
<!--Header Finish-->
<!--Email Body-->
<table border="0" cellpadding="0" cellspacing="0" width="548" align="center" style="border-bottom:solid 1px #cccccc; border-left: solid 1px #cccccc; border-right:solid 1px #cccccc; vertical-align:top">
<tr>

<!--LeftColumn-->
<td valign="top" width="548" style="vertical-align:top">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width="15">&nbsp;</td>
<td width="518" align="center" valign="top">




<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr><td width="518"  style="margin:10px 0px 0px 0px">
</td></tr></tbody></table>




</td>

<td width="15">&nbsp;</td>
</tr>
<tr><td width="15">&nbsp;</td>

<td valign="top" width="520" align="center"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td width="520" style="border-collapse: collapse;">&nbsp;</td></tr></tbody></table>

</td><td width="15">&nbsp;</td></tr>
<!--LeftColumn-Here to help-->

</table>
</td>
<!--End of LeftColumn-->
                                            
<!--RightColumn-Text-->
</tr>
</table>
<!--End of RightColumn-->
<!--End of Email Body-->
                                    
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" valign="top" width="550">


<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="0" cellspacing="10" width="550" id="templateFooter" align="center">
<tr><td width="92"><img src="http://www.theaccessgroup.com/email/NEWEMAIL/aCloud/aCloud-footer-logo.jpg" alt="aCloud logo" width="77" height="72" style= "margin:0px 0px 0px 0px" /></td>

<td width="418"><p style="color: #58585a;font-family: Arial;font-size: 11px; line-height: 18px; text-align: left; margin: 5px 0px 0px 0px; padding: 0px">We know you will love using aCloud, but if you run into any issues or have a question, comment or suggestion you can contact us at <strong><a href="mailto:support@theaccessgroup.com" style="text-decoration:none; color:#58585a">support.acloud@theaccessgroup.com</a></strong></p></td></tr></table></td></tr><tr>
                  <td width="500" style="border-collapse: collapse; border-top:solid 1px #cccccc;"><p style="font-family: arial,calibri,verdana,helvetica,sans-serif; font-size: 11px; color: #58585a; text-align: left; line-height: 18px; margin: 10px 10px 10px 10px;" align="left"> Access UK Ltd, registered in England &amp; Wales. Registration Number: 2343760. Registered office:<br />
                      The Old School, Stratford St Mary, Colchester, Essex, CO7 6LZ, UK</p>
                    <p style="margin: 10px 10px 10px 10px; font-family: arial,calibri,verdana,helvetica,sans-serif; font-size: 10px; color: rgb(229, 23, 63); text-align: left;"><span style="color: rgb(229, 23, 63);"><strong>Notify us to unsubscribe from this email</strong></span></p>
                     </td>
                </tr></table>
                </td></tr></table>
</body>
</html>
JohnP JohnP, 1 year ago

I didn't look through the code, but assuming that Outlook is the cause, try adjusting it with mso-table-rspace or  mso-table-lspace. For example,

putting style="mso-table-rspace:-1pt;" in your table will bump the right edge of the table by 1 pixel in Outlook only.

roshodgekiss roshodgekiss, 1 year ago

Hey there jodygibbons, this is a fairly common issue - I recommend adding table {border-collapse: collapse;} to your CSS styles. Kindly give that a try and let us know how you go :)


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

Afternoon both,

@JohnP - Thanks for your comment I tried this initially but it had no effect on this occasion. I didn't know of these 'extra' outlook properties.

@roshodgekiss - Cheers Ros, I added this into my code and it nearly corrected itself. I was able to make the minor tweaks to get it looking right!

Thanks both for your help, problem sorted!

Cheers
Jody

roshodgekiss roshodgekiss, 1 year ago

Jody, you're very welcome. the -mso prefixed CSS properties are Microsoft proprietary, which means that they only work with their software. There's remarkably little documentation on these properties, which is why very few people know about them at all!

Glad you got your design looking great in the end :D


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

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account