Emailer problems – Image padding?

Hello. Hope someone can help. I have a deadline of tomorrow to send out this emailer. All seems fine and on a Mac the emailer functions how i want it to. Problem is, i have just been approached by the client to say one of the styles has been knocked out of the emailer, making the text crash into the images. Can anyone help? I believe the problem is in Outlook, but also in Yahoo (PC) the emailer really breaks apart. Beside that its all good to go.

The emailer can be viewed by clicking:

http://andrewhussey.createsend.com/t/ViewEmail/y/1AD285E1C78B9F1E/C67FD2F38AC4859C/

Anyone know how i can post an image so you can all see the problem?

Many thanks

Andy

andy@thirteen.co.uk

davidaf davidaf, 7 years ago

Hi Andy,

I did run your email through my Outlook 07 and to my yahoo account (I checked both in IE and FF). I also checked in Thunderbird and Gmail to be sure and it looks consistent. Everything looked great, padding was fine, so I wasn't able to replicate the issue at all on my machine. That's good news but doesn't help with your client seeing the problem. Maybe someone else in the forums can replicate the issue and help out with a solution here.


The Campaign Monitor Blog – HTML email smarts to go with your good looks
BThies BThies, 7 years ago

Andy,

cellspacing is not supported in Yahoo! Classic Mail.

The alternative is "border-spacing", which of course is not supported in Outlook and Lotus Notes.

The solution?  Use both "border-spacing" as well as cellspacing in order to be fully compatible.  One will override the other, so it won't double up.

Note: Border-spacing requires border-collapse:separate

Example code:

<table width="200" cellspacing="10" cellpadding="0" border="0" style="border-collapse:separate;
border-spacing:10px;">

Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

Okay, so I've gone ahead and ran it through a standard test, and your document is stretching out horizontally - much wider than the 600px.

It's breaking in all versions of Outlook, Lotus Notes 8, Gmail (IE), Live/Hotmail (IE), Yahoo! Mail (IE), and Mail.com/AOL Mail (IE).

I'll look into it further to see what's causing the issue.


Brian Thies
Professional Email Developer
Thies Publishing
davidaf davidaf, 7 years ago

Brian,

Thanks so much for taking this on, you're an asset to our forums! I've been in email communication with Andy and will let him know that you are in here helping him out!


The Campaign Monitor Blog – HTML email smarts to go with your good looks
BThies BThies, 7 years ago

Andy,

You'll need to check the links and relink the images.

Here you go (fully tested):

<!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" />
<meta name="ROBOTS" content="NOFOLLOW" />
<title>Hannah Turner Ceramics - October 2009</title>
<style type="text/css" media="screen">
body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}
a {
    color: #000000;
    text-decoration:none;
}
p {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11px;
    line-height:15px;
    font-weight: normal;
    color: #000000;
}
h2 {
    font-family: Georgia;
    font-size: 11px;
    line-height:15px;
    color: #000000;
    margin: 0;
    padding: 0;
}
h3 {
    font-family: Georgia;
    font-size: 11px;
    line-height:14px;
    font-weight: normal;
    color: #000000;
    margin: 0;
    padding: 0;
}
h4 {
    font-family: Georgia;
    font-size: 11px;
    line-height:14px;
    font-weight: normal;
    color: #d3661f;
    margin: 0;
    padding: 0;
}
table.back {
}
table.main {
}
td.permission p {
    font-family: Arial;
    font-size: 10px;
    color:#888888;
}
td.permission a {
    border-color:#888888;
    color:#888888;
}
</style>
<style type="text/css" charset="utf-8">
.andy {
    color: #000;
}
offer {
    color: rgb(211, 102, 31);
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
</head>
<body>
<table align="center" width="620" border="0" cellpadding="0" cellspacing="10" style="border-collapse:separate; border-spacing:10px;" class="main">
  <tr>
    <td width="600" align="left" class="permission"><p style="line-height:15px;font-weight:normal;font-family:Arial;font-size:10px;color:rgb(136, 136, 136);" >Having trouble reading this email?
        <webversion style="border-color:rgb(136, 136, 136);border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:rgb(136, 136, 136);text-decoration:none;color:rgb(136, 136, 136);" >Click here</webversion>
        to view it in your browser. </p></td>
  </tr>
  <tr>
    <td align="center"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="439" align="left"><img src="http://i3.cmail1.com/ei/y/F5/9D9/946/215949/csimport/hannahturner-oct-logo_2.jpg" alt="Hannah Turner logo" height="143" width="318" style="display:block;" /></td>
          <td width="161" valign="top"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><br />
              <span style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" ><a href="http://www.hannahturner.co.uk/" target="_blank" style="color:#000000;text-decoration:none;" ><img src="http://i4.cmail1.com/ei/y/F5/9D9/946/215949/csimport/visitwebsite_3.jpg" alt="Visit website button" width="161" height="23" border="0" align="top" style="display:block" /></a></span></h2>
            <forwardtoafriend style="color:#000000;text-decoration:none;" ><img src="http://i5.cmail1.com/ei/y/F5/9D9/946/215949/csimport/forwardtofriend_4.jpg" alt="Forward to a friend image" width="161" height="23" border="0" style="display:block" /></forwardtoafriend></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="600" align="left" class="header"><h3 style="font-family:Arial;font-size:11px;line-height:14px;font-weight:normal;color:rgb(0, 0, 0);" ><span class="mainbar">October 2009 Trade Newsletter</span></h3>
      <img src="http://i6.cmail1.com/ei/y/F5/9D9/946/215949/csimport/hr-big_5.gif" alt="Line" height="15" width="600" style="display:block;" />
      <h2 style="font-family:Georgia;font-size:13px;line-height:16px;color:rgb(211, 102, 31);" >Welcome to the first Hannah Turner <br />
        Ceramics newsletter</h2>
      <p style="font-family:Georgia, 'Times New Roman', Times, serif;font-size:11px;line-height:15px;font-weight:normal;color:#000000;" >Every month we'll update you with information about what we are up to in the studio, any new products in the process of being created, display ideas, plus the latest promotional offers. Here in Bristol we have been very busy getting Christmas orders dispatched as well as developing new ideas for  creations in the new year. The range is growing, along with the decorative handmade ceramic birds and cats, we now have eggcups, adding function to the charm.</p></td>
  </tr>
  <tr>
    <td width="600"><img src="http://i7.cmail1.com/ei/y/F5/9D9/946/215949/csimport/hr_6.gif" alt="Hr" height="7" width="600" style="display:block;" /></td>
  </tr>
  <tr>
    <td width="600" align="center"><table align="center" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="323" align="left" class="mainbar"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><img src="http://i8.cmail1.com/ei/y/F5/9D9/946/215949/csimport/autumn-offer_7.jpg" alt="Autumn Offer image - Cats and Birds" height="234" width="318" style="display:block;" /></h2></td>
          <td width="10">&nbsp;</td>
          <td width="267" align="left" valign="top"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><span style="font-family:Georgia;font-size:12px;line-height:12px;color:rgb(211, 102, 31);" >October Offer</span></h2>
            <h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" >&nbsp;</h2>
            <h4 style="font-family:Arial;font-size:11px;line-height:15px;font-weight:bold;color:rgb(0, 0, 0);" ><span style="font-family:Georgia;font-size:11px;line-height:15px;color:#d3661f;font-weight:bold;" >Buy any 10 from the cat and bird ranges <br />
              and get 1 mid range piece free!!</span></h4>
            <p style="font-family:Georgia, 'Times New Roman', Times, serif;font-size:11px;line-height:15px;font-weight:normal;color:#000000;" >Making the most of this offer means you will have a range and display that gives customers choice and a visual story – that's if you choose to sell it! </p>
            <p style="font-family:Georgia, 'Times New Roman', Times, serif;font-size:11px;line-height:15px;font-weight:normal;color:#000000;" ><strong>Be quick, offer ends on November 5th.</strong></p></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td colspan="3" width="600"><img src="http://i7.cmail1.com/ei/y/F5/9D9/946/215949/csimport/hr_6.gif" alt="Hr" height="7" width="600" style="display:block;" /></td>
  </tr>
  <tr>
    <td width="600" align="center"><table align="center" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="323" align="left" class="permission"><span class="mainbar"><img src="http://i9.cmail1.com/ei/y/F5/9D9/946/215949/csimport/owl_8.jpg" alt="Owl sketch image" height="234" width="318" style="display:block;" /></span></td>
          <td width="10">&nbsp;</td>
          <td width="267" align="left" valign="top" class="permission"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><span style="font-family:Georgia;font-size:12px;line-height:12px;color:rgb(211, 102, 31);" >Owls are being hatched</span></h2>
            <p style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" >Hannah has been developing ideas for this new range for January 2010. They sit very well with the birds and cats, remaining strongly stylised with a liberal dose of cartoon humour!</p>
            <p style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" > The innocent wide-eyed personalities will hopefully cause a real flurry amongst collectors.</p>
            <p class="andy" style="line-height:15px;font-weight:normal;font-family:Arial;font-size:10px;color:#888888;" ><span style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:#000000;" ><a href="http://www.hannahturner.co.uk/about-us-1-w.asp" target="_blank" style="border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:rgb(211, 102, 31);color:rgb(0, 0, 0);text-decoration:none;border-color:#888888;" >Click here to find out more.</a></span></p></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td colspan="3" width="600"><img src="http://i7.cmail1.com/ei/y/F5/9D9/946/215949/csimport/hr_6.gif" alt="Hr" height="7" width="600" style="display:block;" /></td>
  </tr>
  <tr>
    <td width="600" align="center"><table align="center" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="323" align="left" class="permission"><span class="mainbar"><img src="http://i10.cmail1.com/ei/y/F5/9D9/946/215949/csimport/stickers_9.jpg" alt="Hannah Turner sticker image" height="234" width="318" style="display:block;" /></span></td>
          <td width="10">&nbsp;</td>
          <td valign="top" width="267" align="left" class="permission"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><span style="font-family:Georgia;font-size:12px;line-height:12px;color:rgb(211, 102, 31);" >Packaging and point of sale</span></h2>
            <p style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" >Each order can now include point of sale information and packaging stickers to elevate the quality of the sale experience and cut packing time. Wrapping up one of Hannah&rsquo;s pieces in a few layers of tissue, and then lovingly finished with a beautifully designed sticker makes being behind the till more fun, and buyers love the attention to detail too. Simply request stickers at the time of order.</p></td>
        </tr>
      </table></td>
  </tr>
  <tr valign="top">
    <td width="600" colspan="3" align="left" class="permission"><span class="mainbar"><img src="http://i7.cmail1.com/ei/y/F5/9D9/946/215949/csimport/hr_6.gif" alt="Hr" height="7" width="600" style="display:block;" /></span></td>
  </tr>
  <tr>
    <td width="600" align="center"><table align="center" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="323" align="left" class="permission"><span class="mainbar"><img src="http://i1.cmail1.com/ei/y/F5/9D9/946/215949/csimport/birds-hello_10.jpg" alt="Cheeky bird image" height="234" width="318" style="display:block;" /></span></td>
          <td width="10">&nbsp;</td>
          <td valign="top" width="267" align="left" class="permission"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><span style="font-family:Georgia;font-size:12px;line-height:12px;color:rgb(211, 102, 31);" >Hannah Turner online</span></h2>
            <p style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" >The website has finally gone live! Crammed with information it is a valuable tool for any outlet as images and text can easily be lifted from the site to use in  promotional material. Please visit: <a href="http://www.hannahturner.co.uk/index.asp" target="_blank" style="border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:rgb(211, 102, 31);color:rgb(0, 0, 0);text-decoration:none;border-color:#888888;" >www.hannahturner.co.uk</a></p></td>
        </tr>
      </table></td>
  </tr>
  <tr valign="top">
    <td width="600" colspan="3" align="left" class="permission"><span class="mainbar"><img src="http://i7.cmail1.com/ei/y/F5/9D9/946/215949/csimport/hr_6.gif" alt="Hr" height="7" width="600" style="display:block;" /></span></td>
  </tr>
  <tr>
    <td align="center"><table align="center" width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td valign="top" width="318" align="left" class="permission"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><span style="font-family:Georgia;font-size:12px;line-height:12px;color:rgb(0, 0, 0);" >Keep in touch</span></h2>
            <p style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" >Planning something special for Autumn? The newsletter has been designed  with you in mind, enabling  you to lift text and images straight from the web to your desktop. Can&rsquo;t find what you want? <a href="mailto:babybirds@hotmail.co.uk?subject=Emailer enquiry" target="_blank" style="border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:rgb(211, 102, 31);color:rgb(0, 0, 0);text-decoration:none;border-color:#888888;" >Contact us</a> and we&rsquo;re happy to work with you on promo material. Story to share? Drop us a line, we&rsquo;d love to hear from you.</p>
            <p style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" >&nbsp;</p></td>
          <td width="15" align="left" class="permission">&nbsp;</td>
          <td valign="top" width="267" align="left" class="permission"><h2 style="font-family:Arial;font-size:14px;line-height:14px;font-weight:bold;color:rgb(0, 0, 0);" ><span style="font-family:Georgia;font-size:12px;line-height:12px;color:rgb(211, 102, 31);" >Blaze</span></h2>
            <p style="font-family:Georgia;font-size:11px;line-height:15px;font-weight:normal;color:rgb(0, 0, 0);" >84 Colston Street <br />
              Bristol BS1 5BB <br />
              Telephone: 0117 904 7067<br />
              Mobile: +44(0)77654822<br />
              Email: <a href="mailto:babybirds@hotmail.co.uk?subject=Emailer enquiry" target="_blank" style="border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:rgb(211, 102, 31);color:rgb(0, 0, 0);text-decoration:none;border-color:#888888;" >babybirds@hotmail.co.uk</a> <br />
              Opening times: Tues-Sat 10.30am-5.30pm</p></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left" class="permission"><span style="line-height:15px;font-weight:normal;font-family:Arial;font-size:10px;color:rgb(136, 136, 136);" >This email was sent to you by <a href="mailto:babybirds@hotmail.co.uk?subject=Emailer enquiry" style="border-color:rgb(136, 136, 136);border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:rgb(136, 136, 136);text-decoration:none;color:rgb(136, 136, 136);" >Hannah Turner</a><a href="mailto:babybirds@hotmail.co.uk?subject=Emailer enquiry" style="text-decoration:none;border-color:#888888;color:#888888;" ></a>.<br />
      Please
      <unsubscribe style="text-decoration:none;border-color:#888888;color:#888888;" >click here</unsubscribe>
      if you do not wish to receive such newsletters in the future.</span></td>
  </tr>
</table>
<div>&nbsp;</div>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
hussey83, 7 years ago

I can't thank you all enough. You are a credit to the forum. I only hope i can repay the favour some time.

Take care

Andy

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