CMS Development

drong
Contributor

Email template padding issue

When we build the email with Atom, the preview and also test sends work perfectly. when we enter the code onto hub spot, the header added unnecessary padding. I've attached screen shot of what i was expecting vs what i get.

 

I'm using the old designer tool still. 

What i wantWhat i wantWhat i get - extra bottom padding on the lineWhat i get - extra bottom padding on the lineHere is the code we use for the line:



<div class="mj-container" style="background-color:#ffffff;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="margin:0px auto;max-width:600px;background:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:middle;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:5px;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:600px;">
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-wrap:break-word;font-size:0px;padding:0px;"><p style="font-size:1px;margin:0px auto;border-top:1px solid #696969;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:1px solid #696969;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:0px;"><p style="font-size:1px;margin:0px auto;border-top:1px solid #7e7e7e;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:1px solid #7e7e7e;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:0px;"><p style="font-size:1px;margin:0px auto;border-top:1px solid #939393;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:1px solid #939393;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:0px;"><p style="font-size:1px;margin:0px auto;border-top:1px solid #bdbdbd;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:1px solid #bdbdbd;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:0px;"><p style="font-size:1px;margin:0px auto;border-top:1px solid #e4e4e4;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:1px solid #e4e4e4;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:0px;"><p style="font-size:1px;margin:0px auto;border-top:1px solid #f1f1f1;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:1px solid #f1f1f1;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:0px;"><p style="font-size:1px;margin:0px auto;border-top:1px solid #fafafa;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:1px solid #fafafa;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
</td></tr></table>
<![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
</td></tr></table>
<![endif]--></div>

 

Thanks for all the help!

0 Upvotes
7 Replies 7
drong
Contributor

Email template padding issue

Also on outlook it is rendering weird by making all the lines equally spaced out 

 

outlook testoutlook test

0 Upvotes
benvanlooy
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Email template padding issue

could you perhaps post a html preview link? 

0 Upvotes
drong
Contributor

Email template padding issue

0 Upvotes
benvanlooy
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Email template padding issue

Thanks, I know that some e-mail clients often give too much spacings in td's..

Try giving the table that surrounds table of that "shadow" a line-height of 0px..
(I only quickly tried in the inspector of my browser and that seems to work)

I think the other issue with the spacing between the lines is the same as the bigger spacing, so also try giving the TR or the TD a line-height of 0px 🙂

 

Worth a try 🙂

0 Upvotes
drong
Contributor

Email template padding issue

I tried adding that line height and it still not working. I am wondering if hub spot just have an auto padding that we don't know about. I've tried to over write that extra padding but it just isn't working. 

0 Upvotes
benvanlooy
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Email template padding issue

Hmm - when I add it in the inspector, it goes away 🙂 (talking about the first issue), try adding it to the table, tr and td - just to test!

 

In this case, I don't think it's Hubspot that is causing the issue.. It's just a fact that e-mail templates are not that easy to get right, as there are so many annoying old e-mail clients.

 

 

0 Upvotes
drong
Contributor

Email template padding issue

I've tried it on both TR and TD, but it still didn't work. i also added it as a class in hopes it will over write whatever, but something is causing it to have that extra padding. 

0 Upvotes