Paul Karam Paul Karam -4 years ago 134
CSS Question

HTML on Outlook for Android not showing buttons as expected

I am creating an HTML Email template following the next one: transactional html email templates and in particular: this one.

I have inlined my css using zurb foundation inliner, and hosted the template on SendGrid.

Inline HTML/CSS:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta name="viewport" content="width=device-width" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<title style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title>
</head>

<body style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important">
<style type="text/css">
@media only screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600!important;
margin: 20px 0 5px!important
}
h1 {
font-size: 22px!important
}
h2 {
font-size: 18px!important
}
h3 {
font-size: 16px!important
}
.container {
width: 100%!important
}
.content,
.content-wrapper {
padding: 10px!important
}
.invoice {
width: 100%!important
}
}

</style>
<table class="body-wrap" style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top">&nbsp;</td>
<td class="container" style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"
width="600">
<div class="content" style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px">
<table cellpadding="0" cellspacing="0" class="main" style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="alert alert-warning" style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You&#39;re approaching your limit. Please upgrade.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-wrap" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top">
<table cellpadding="0" cellspacing="0" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strong style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don&#39;t miss out on any reports.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top"><a class="btn-primary" href="http://www.mailgun.com" style="background-color:#348eda;border:solid #348eda;border-radius:5px;border-width:10px 20px;box-sizing:border-box;color:#FFF;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;line-height:2;margin:0;padding:0;text-align:center;text-decoration:none;text-transform:capitalize">Upgrade my account</a></td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<div class="footer" style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%">
<table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="aligncenter content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top"><a href="http://www.mailgun.com" style="box-sizing:border-box;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0;text-decoration:underline">Unsubscribe</a> from these alerts.</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top">&nbsp;</td>
</tr>
</tbody>
</table>
</body>

</html>





When I send it to Gmail:
Gmail screenshot

When I send it to outlook (problem):
Outlook screenshot

Question: How could I fix the button to look on Outlook for Android like intended?

Note that this doesn't happen on Desktop Outlook application, nor the outlook application for iOS.

Answer Source

There are a few different ways to add buttons to email using html, you can read more about the best ways here

I used a nested table padding approach which will work for outlook mobile, code below. Please bare in mind that this will only make the actual link clickable and not the whole button.

If you absolutely need the whole button to be clickable, use one of the other methods in the linked page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
    <meta name="viewport" content="width=device-width" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
    <title style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title>
</head>

<body style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important">
    <style type="text/css">
        @media only screen and (max-width:640px) {
            h1,
            h2,
            h3,
            h4 {
                font-weight: 600 !important;
                margin: 20px 0 5px !important;
            }

            h1 {
                font-size: 22px !important;
            }

            h2 {
                font-size: 18px !important;
            }

            h3 {
                font-size: 16px !important;
            }

            .container {
                width: 100% !important;
            }

            .content,
            .content-wrapper {
                padding: 10px !important;
            }

            .invoice {
                width: 100% !important;
            }
        }
    </style>
    <table class="body-wrap" style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%">
        <tbody>
            <tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
                <td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top">&nbsp;</td>
                <td class="container" style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"
                    width="600">
                    <div class="content" style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px">
                        <table cellpadding="0" cellspacing="0" class="main" style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
                            <tbody>
                                <tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
                                    <td class="alert alert-warning" style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You&#39;re approaching your limit. Please upgrade.</td>
                                </tr>
                                <tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
                                    <td class="content-wrap" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top">
                                        <table cellpadding="0" cellspacing="0" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
                                            <tbody>
                                                <tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
                                                    <td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strong style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td>
                                                </tr>
                                                <tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
                                                    <td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don&#39;t miss out on any reports.</td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <table width="185" style="Margin:0;border-spacing:0;max-width:185px;">
                                                            <tr>
                                                                <td width="100%" style="padding:15px 5px 17px 5px;border-radius:4px;background-color:#348eda;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:bold;color:#ffffff;text-align:center;vertical-align:top;">
                                                                    <a href="http://www.mailgun.com" style="text-decoration:none;color:#ffffff;display:block;">
                                                                        Upgrade My Account
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
                                                    <td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="footer" style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%">
                            <table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
                                <tbody>
                                    <tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
                                        <td class="aligncenter content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top"><a href="http://www.mailgun.com" style="box-sizing:border-box;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0;text-decoration:underline">Unsubscribe</a> from these alerts.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </td>
                <td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download