CODEWITHSUNDEEP
html-tablehtml-emailmarginpadding
Gordon Mcleod
Gordon Mcleod

Reputation: 1

Space between td's in my table?

I've created an email to send out to current subscribing customers, its image heavy so its been created in a table and it previews just fine, but as soon as I insert it into a yahoo mail message or send it through an email client to my yahoo mail, every row gets around 10px of margin/padding at the bottom, separating the images.

I've been going mad for hours trying anything I could find, so I thought I would upload my own code and see if anyone could help me :) 

    <table style="margin:0 auto; border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="566">
    <th style="border:none;padding:0;margin:0;" ><p style="float:left; padding-left:10px;font-size:9px; text-align:center; color:#999999; text-decoration:none;"><a style="color:#999999;" href="http://www.purecollection.com/pages/be-inspired">Shop contemporary Design with 10% off plus free delivery and free returns</a></p></th>
    <tr style="border:none;padding:0;margin:0;">
    <td> <a href="http://www.purecollection.com/default.aspx"><img src="http://images.mailermailer.com/image/50064636L/148258/o/2.png"/></a></td></tr>
    <tr style="border:none;padding:0;margin:0;"><td><img src="http://images.mailermailer.com/image/50064636L/148259/o/3.png"/></td></tr>
    <tr style="border:none;padding:0;margin:0;"><td><a href="http://www.emagcloud.com/aw12-hosting/UK_Autumn_Main_Book/index.html" style="margin:0;padding:0; "><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148260/o/4.png" alt="View our Autumn E-Catalogue"/></a><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148328/o/5.png"/></td></tr>
    <tr style="border:none;padding:0;margin:0;"><td><a href="http://www.purecollection.com/pages/style-guide"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148262/o/6.png" alt="BE INSPIRED - Style guide"/></a><a href="http://www.purecollection.com/pages/be-inspired"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148263/o/7.png" alt"View our be inspired collection"/></a></td></tr>
    <tr style="border:none;padding:0;margin:0;"><td><a href="http://www.purecollection.com/default.aspx"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148321/o/8.png"/></a></td></tr>
    <tr><td><a href="http://www.purecollection.com/info/static.aspx?page=newsletter&email="><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148322/o/9.png" alt="send this to a friend"/></a><a href="http://www.purecollection.com/pages/requestcatalogue"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148323/o/10.png" alt="request a catalouge"/></a><a href="http://www.purecollection.com/pages/christinanoblechildrensfoundation#page=page-1"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148324/o/11.png" alt="Christina Noble Children's Foundation"/></a><a href="http://example.com/maps/Asbxy"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148325/o/12.png" alt="find out UK stores"/></a><a href="https://www.facebook.com/PureCollection"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148326/o/13.png" alt="join us on facebook"/></a><a href="https://twitter.com/PureCollection"><img style="margin:0;padding:0; border:none;" src="http://images.mailermailer.com/image/50064636L/148327/o/14.png" alt="follow us on twitter"/></a></td></tr>
    <tr><td>
      <p style="font-size:9px; text-align:center; color:#999999;"></ br>Terms and Conditions: 1 Your offer code = AW13KAS 2. This offer code will be automatically added into your shopping basket. 3. Offer expires midnight 7th October 2013. 4 Cannot be used in conjunction with any other offer. 5. Offer does not apply to gift vouchers. 6. No adjustments prior purchases. 8. 10% off includes free delivery and free returns. 9. Free delivery applies to standard UK delivery £4.95.</p>
      <p style="font-size:9px; text-align:center; color:#999999;"></ br>Please add [email protected] to your address book to ensure our emails reach your inbox. If you received this email from a friend and would like to subscribe to our newsletter. <a style="color:#999999;" href="http://www.purecollection.com/info/static.aspx?page=newsletter&email=">click here</a>
      <p style="font-size:9px; text-align:center; color:#999999;"></ br>Pure Collection LTD | Mowbray House | Mowbray Square | Harrogate | HG1 5AU | 0844 848 1030</p>
  <p style="font-size:9px; text-align:center; color:#999999;"><a style="color:#999999;" href="http://www.purecollection.com/pages/securityandprivacy"></ br>Privacy</a></p></td></tr>
</table>

Upvotes: 0

Views: 272

Answers (2)

Scott Rowell
Scott Rowell

Reputation: 1130

Oh you poor soul. You can tell a programmer is annoyed when he adds in-line styling.. This is just mayhem.

I'm afraid you won't like the answer much, its one line of code. Here you go: http://jsfiddle.net/w5MJM/

td img {
    vertical-align:top;
}

Upvotes: 1

marceloogeda
marceloogeda

Reputation: 36

I've been through something similar, add a display: block; in your images. Hope this helps

Upvotes: 0

Related Questions