1

I'm having an issue with a section of an email on 2013. What should look like so (and is rendering as such in all platforms except Outlook 2013):

enter image description here

Shows up in Outlook 2013 like so:

enter image description here

(Please don't mind the FullMurray images.)

It seems like Outlook 2013 is adding extra padding around the images and is breaking the border effect. I've tried line-height: 1px and padding: 0px, on the Table, TD and IMG respectively and had no success. Does anyone have any ideas of how to fix? I will post my code for this section below.

<table class="" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding: 0px;">
                            <tr>
                                <td align="left" valign="top" style="padding: 0px; border-bottom: 2px solid #F98234;" width="60px" >
                                    <img src="http://www.fillmurray.com/60/90" alt="" title="" style="height:90px;padding: 0px;" />
                                </td>
                                <td align="left" style="font-family: Verdana, Helvetica, Arial, sans-serif; mso-line-height-rule: exactly; line-height: 25px;padding-top:5px; padding-bottom:5px;padding-left:15px;padding-right:5px;border-top:1px solid #F98234; border-bottom:1px solid #F98234;border-left:1px solid #F98234" width="325px">
                                    <p style="margin:0px; color:#031359;font-weight:bold;text-transform:uppercase; font-size: 19px; ">Reward Points Balance<sup style="font-size: 12px; line-height:1.5px;">&dagger;</sup></p>
                                </td>
                                <td align="left" style="font-family: Verdana, Helvetica, Arial, sans-serif; mso-line-height-rule: exactly; line-height: 25px;padding-top:5px; padding-bottom:5px;padding-left:15px;padding-right:5px;border-top: 1px solid #F98234; border-bottom: 1px solid #F98234" width="30px">
                                    <hr width="1" size="50px" style="background-color:#D1D2D3; border:none">
                                </td>
                                <td align="left" style="font-family: Verdana, Helvetica, Arial, sans-serif; mso-line-height-rule: exactly; line-height: 25px;padding-top:5px; padding-bottom:5px;padding-left:5px;padding-right:15px;border-top:1px solid #F98234; border-bottom:1px solid #F98234;border-right:1px solid #F98234">
                                    <p style="margin:0px; color:#031359;font-weight:bold;text-transform:uppercase; font-size: 19px; ">5,000</p>
                                </td>
                            </tr>
                        </table>
0

I wouldn't use the padding style or p tags in any emails to keep compatibility across all platforms.

I use this guide as a compatibility reference:

https://www.campaignmonitor.com/css/

I would try creating 3 separate tables instead of 1 row in a single table.

Basically, you want to keep everything very simple with HTML for emails, stick to margins instead of padding, and br instead of p as a general rule.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.