How do I center this HTML button - html

I'm having trouble centering my HTML button.
JsFiddle:
http://jsfiddle.net/huskydawgs/j1rpupgx/
Html:
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
</tr>
</tbody>
</table>
</div>


For your specific example you can simply add the following CSS:
table{margin:0 auto;}
Here is a full working snippet:
table{margin:0 auto;}
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
</tr>
</tbody>
</table>
</div>


table {
width: 100%;
}
.btn {
text-align: center;
border-radius: 0px;
background-color: #f66511;
display: block;
color: #ffffff;
font-size: 15px;
font-family: sans-serif;
text-decoration: none;
line-height: 30px;
width: 138px;
margin: 0 auto;
}
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> <a class="btn" href="https://www.onvia.com/">Get Started</a>
</td>
</tr>
</tbody>
</table>
</div>


Just put <center>before opening div and end it after ending div, like this:
<center>
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
</tr>
</tbody>
</table>
</div>
</center>
I've also made a JSFiddle for you:
https://jsfiddle.net/k1krs98z

Related

outlook media# problems outlook not responsive

we are tryin to make modify an email for making it work in outlook and media# don't seem to work. im out of idea,
this doesn't seem to work to
here the base model i took for outlook specification with css but it don't seems to work
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
soo i tried simple test with changing the background color first with a nice looking red
but it doesn't seem to actually do something. i don't realy know what i can do
<!--[if mso]>
<style>
.table {
background-color : red !important;
}
.body {
background-color : red !important;
}
</style>
<![endif]-->
</head>
<body
class="clean-body"
style="
margin: 0 auto;
padding: 0 auto ;
-webkit-text-size-adjust: 100%;
color-scheme: light only;">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
background="https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png" width="600" height="auto"
style="
max-width: 600px;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-image: url('https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png'); width:600px; display: block;
background-color : rgb(33, 34, 34);
color-scheme: light only;
width: 100%;
color: #ffffff;
font-family: 'Roboto', sans-serif;
top : -50px;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td style="min-width: 180px; width: 210px; padding-bottom: 37px;">
<table style="margin: 0; padding: 0">
<tbody>
<tr>
<td
style="
padding-left: 42px;
padding-bottom: 1px;
min-width: 83px;
padding-top: 40px;
padding-right: 0px;
"
>
<table>
<tbody>
<tr>
<td style="min-width: 180px">
<div
style="
font-size: 15px;
font-weight: 800;
line-height: 1;
color:rgb(126, 122, 122);filter: brightness(100);
"
>
Inès AZUELOS
</div>
</td>
</tr>
<tr>
<td>
<div
style="
font-size: 13px;
font-weight: 600;
padding-top: 5px;
padding-left: 1px;
color: #3399ff;"
>
Direction - Assistante
</div>
</td>
</tr>
<tr>
<td style="
padding-top: 16px;
padding-left: 2px;
color:rgb(126, 122, 122);filter: brightness(100);
font-size: 13px;
font-weight: 600;"
>
EICIAM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="
padding-left: 41px;
padding-bottom: 2px;
padding-right: 0px;
padding-top: 15px;
min-width: 83px;
"
>
<table>
<tbody>
<tr>
<td alt="logo facebook" title="logofacebook" style="padding: 3px; width : 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block;border :0;"/>
</td>
<td alt="logo linkedin" title="logolinkedin" style="padding: 3px; width: 20px; height: 20px;">
<img style="width: 20px; height: 20px; display: block; border :0;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<!-- --------------------- -->
<td style="padding: 33px 0 0 0; width: 226px; margin-left: 5px ">
<table>
<tbody>
<tr>
<td style="border-left: 1px solid #ffffff67; padding: 7px 0 0 19px;">
<table
style="
font-size: 11px;
color: #212222;
letter-spacing: 0.7px;
"
>
<tbody>
<tr>
<td style="min-width: 170px">
<table>
<tbody>
<tr>
<td alt="phone" title="phone" style="min-width: 19px; padding-top: 2px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td href=""style="color:rgb(126, 122, 122);filter: brightness(100%); padding-top: 5px; padding-left: 10px; font-size: 12px;"> </td>
</tr>
<tr>
<td alt="mail" title="mail" style="padding-top: 13px; width: 20px; height : 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px; font-size: 12px;">
<a href="" style="color:rgb(126, 122, 122);filter: brightness(100);" > </a>
</td>
</tr>
<tr>
<td alt="web" title="web" style="padding-top: 12px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border: 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px;font-size: 12px;">
eiciam.fr
</td>
</tr>
<tr>
<td alt="print" title="print" style="padding-top: 15px;width: 20px; height: 20px; display:inline; border:0;">
<img style="width: 20px; height: 20px; display: block; border :0;" onerror="this.src=';"/>
</td>
<td style="padding-top: 16px; padding-left: 10px">
<a style="color:rgb(126, 122, 122);filter: brightness(100); font-size: 9px" style="color: white;"> N'imprimez que si nécessaire </br> Pensez à l'environnement</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td alt="" title="" style="min-width: 50px; width: 100px; height: 100px; border:0;">
<img src="" style="min-height: 50px; min-width: 50px; width: 100px; height: auto; display: block; border: 0;margin-top: 50px;"/>
</td>
<!-- ------------------------------ -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>

The media element is not supported. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The fact is that Outlook uses Word as an editor and rendering engine for message bodies.

White spaces in the html for email design using table tags

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<title></title>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
img {
display: block;
border-style: none;
line-height: 0px;
}
div,
p,
a,
li,
td,
th {
-webkit-text-size-adjust: none;
}
table {
display: table;
border-spacing: 0px;
padding: 0;
}
td {
border: 0;
padding: 0;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 294px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.mobile-show {
display: none !important;
font-size: 0 !important;
max-height: 0 !important;
line-height: 0 !important;
padding: 0 !important;
mso-hide: all !important;
/* hide elements in Outlook 2007-2013 */
}
.IconText {
font-size: 11px!important;
line-height: 13px!important;
}
input {
display: none !important;
}
input[id=effect]+div[class=em_show_g] {
display: block;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
#media only screen and (max-width:480px) {
.mobalign {
text-align: center !important;
}
.FullWidth {
width: 100%!important;
height: auto;
}
.mobile-hide {
display: none;
}
.mobile-show {
display: block !important;
margin: 0 !important;
overflow: visible !important;
visibility: visible !important;
width: auto !important;
max-height: inherit !important;
}
.mobile-brands {
width: 95% !important;
max-width: 95% !important;
}
.StackColumn {
display: block;
width: 100% !important;
text-align: center;
}
.OneFromTwo {
display: block;
width: 100% !important;
}
.CentreText {
text-align: center!important;
}
.CTA-Full {
width: 100% !important;
}
.SpacerHeight {
width: 1px;
height: 35px;
}
input[id=effect]+div[class=em_show_g] {
display: none;
}
input[id=effect]:checked+div[class=em_show_g] {
display: block !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
}
</style>
<!--[if mso]>
<style>
span, td, th, table, div, a {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
</head>
<body background="" bgcolor="#eceef3" style="">
<table cellpadding="0" cellspacing="0" style="border: 0px; padding: 0px; margin: 0px; position: absolute; display: none; float: left">
<tr>
<td height="1" style="font-size: 1px; line-height: 1px; padding: 0px;">
<!--Start BK pixel-->
<IMG SRC="" HEIGHT="1" WIDTH="1" /><br/><br/>
<!--End BK pixel-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<!--<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-family:Helvetica, Arial, sans-serif;">
<tr>
<td align="center">-->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="content" style="margin:0 auto; table-layout:fixed; max-width:600px; width:100%; font-family: 'Lato', Helvetica, Arial, sans-serif; background:#ffffff; font-weight: 300;">
<!-- Preheader -->
<tbody>
<tr>
<td align="center" bgcolor="#FFFFFF" width="100%">
<div data-content-region-name="Pre_Header">
<!-- Preheader -->
<tr class="mobile-hide">
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
<tr>
<td align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; color:#1e1e1e; font-weight: 300; font-size:12px; line-height:18px; padding:20px;" width="100%">
</td>
</tr>
</table>
</td>
</tr>
<!-- Pre-Header End -->
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th align="center">
<table align="center" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" style="background:#ffffff;" width="100%">
<tbody>
<tr>
<th align="left" style="padding-left: 20px; padding-bottom: 20px; padding-top: 20px;" width="50%">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="170">
<tbody>
<tr>
<th align="center" width="20">
<img alt="" border="0" height="20" src="" style="display: block; padding-right: 5px" width="16" />
</th>
<th align="center" style="width: 20px">
<img alt="" border="0" height="20" src="" style="display: block;" width="16" />
</th>
</tr>
</tbody>
</table>
</th>
<th align="right" style="padding-right: 20px" width="50%">
<table align="right" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="150">
<tbody>
<tr>
<th align="right" width="23">
<img alt="View in browser" border="0" class="mobile-hide" height="16" src="" style="display: block;" width="23" />
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
<!-- Header Image End -->
<!-- Header -->
<!-- Header Image End -->
<!-- Desktop Navigation -->
<!-- Desktop Navigation End -->
<!-- Content Starts Here -->
<tr>
<td width="100%" align="center">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<a href="#" target="_blank">
<img style="display:block;border:0;" src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
I've been trying to design an email template which has images. I use table structure to create the email with HTML and CSS. However, I see white lines between the images in different platforms. I don't have a problem in Gmail desktop, but I see white lines when opened in Gmail mobile app. How can this be fixed? I've also tried adding display: block; and font-size: 0px; but the issue still exists.

Try this code brother
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Hi there,</p>
<p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Call To Action </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p>Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? Unsubscribe.
</td>
</tr>
<tr>
<td class="content-block powered-by">
Powered by HTMLemail.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>

Place <a> over the border ? Mail Newsletter

I want to put the <a> tag over the border like the image, but it must be responsive in outlook 2013.
Outlook doesn't support Max-Height , paddings only in table elements ( td, th, tr ) , any question https://www.campaignmonitor.com/css/
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
border="0">
<tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left; padding: 20px 20px 0px 20px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Example</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
xxxx</p>
<table style="color:white;border-left: 10px solid #ffffff;
border-right: 10px solid #ffffff;"
width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" style="padding:0px 0px 0px 0px;" bgcolor="#ed1c2e">
<a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

Update
Okay so i didn't see the image because I'm an idiot.
So here is what I've done
I made the a position:relative
Then added the follwoing to the inline style:
border: white solid 10px;
bottom: -37px;
because your using outlook I'm doing things that i wouldn't recommend you use in real world css. There are better ways of doing things.
I then added the following to your table:
margin-top: -30px;
This just moves it up in the air so it doesn't create such a big gap between text and button.
<table style="padding-left:28px;padding-right:27px;position: relative;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody><tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left; padding: 20px 20px 0px 20px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Example</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px;padding: 20px;">Example
xxxx</p>
<table style="
color:white;
padding-bottom: 0px;
" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" valign="" style="padding:0px 0px 0px 0px;padding: -20px;position: relative;width: 100%;top: bottom;bottom: 20px;text-align: center;">
<a href="#" target="_blank" style="text-decoration:none;color:#ffffff;outline:none;width:90%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700;text-align: center;background: #ed1c2e;display: block;position: absolute;border: white solid 10px;top: 0px;z-index: 200;left: 50%;transform: translateX(-50%);">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
OLD AWNSER
Ill be honest im not 100% sure what you want. I'm guessing its this?
What are you using max-height for?
Is this what you would like?
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
border="0">
<tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left; padding: 20px 20px 0px 20px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Example</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
xxxx</p>
<table style="color:white;border-left: 10px solid #ffffff;
border-right: 10px solid #ffffff;"
width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" style="padding:0px 0px 0px 0px;">
<a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center; background: #ed1c2e; display: block">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
All you were missing was display: block; In the a Tag.
If this isn't what you wanted please comment and ill adjust

Here it is, an working example of what you are looking for:
<html>
<head>
<style>
button:focus {
outline: none;
cursor: pointer
}
body {
font-family: 'Arial';
}
</style>
</head>
<body>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody>
<tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left;padding: 20px 20px 0px 20px;border-bottom: 0px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Campanha</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Estratégia
nacional de Turismo 2027</p>
</td>
</tr>
</tbody>
</table>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody>
<tr>
<td style="margin: 0px;padding: 0px;width: 10px;">
<table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-right: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ed1c2e" style="
text-align: center;
padding-left: 20px;
padding-top: 24px;
width: 23px;
background-color: white;
">
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" valign="top" style="padding: 0px 0px 0px 0px;" bgcolor="#ed1c2e">
<a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">Ver
mais <i style="font-size: 29px; vertical-align: -5px; font-style: normal;">?</i>
</a>
</td>
<td style="margin: 0px; padding: 0px; width: 10px;">
<table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-left: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ed1c2e" style="
text-align: center;
padding-right: 20px;
padding-top: 24px;
width: 23px;
background-color: white;
">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>

Responsive outlook emailer not center

Hi I am having problem with outlook not centering my table part.
it consists of two columns which are left aligned.They are centering in gmail and outlook on desktop but not on mobile.I guess that align left in two columns is giving me an issue.Please help me out.
<table border="0" cellpadding="0" cellspacing="0" align="center" style="padding:0 0 0 10px;">
<tr>
<td align="center" class="middle">
<div align="center">
<center>
<!--[if mso]>
<table style="width: 300px;"><tr><td>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" height="158" bgcolor="#006699"><tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
<img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
</tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" bgcolor="#0093d4" height="158px"><tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email: </td>
<td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">EPM_columbia#eruditus.com</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone: </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
</table>
</td> </tr>
</table>
</center>
</div>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600" class="content" style="border-collapse: collapse; width: 100%; max-width: 600px;">
<tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr>
<tr><td style="font-family:Arial, Helvetica, sans-serif; color: #666666; padding: 0;" align="center" class="responsive-image">
<a href="http://www.eruditus.com/programmes/columbia/columbia-mc.html" style="display: block; margin: 0 auto;" target="_blank">
<img src="http://www.eruditus.com/emailer/0419_columbia/clickhere.png" align="middle" width="277" height="58" alt="click_program" style="display: block; max-width: none !important; margin: 0 auto;" /></a>
</td>
</tr></table></td>
</tr><tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr></table><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>

What you'll want to do is use a Media Query to check whether the screen size is less than a certain size to display responsive layouts. e.g:
#media only screen and (max-width: 500px;) {
//Responsive CSS styling
}
Using this you can center those tables as you would with a normal webpage. e.g:
#media only screen and (max-width: 500px;) {
td[class="responsive-align"] {
margin: 0 auto !important;
float: none !important;
align: center !important; //If this line centers your text, remove it.
}
}
Email clients are very pedantic, and take a long time to understand what you can do with each one, and what their limits are.
From my experience with responsive designs and Outlook especially you need to lay out your tables like this for them to drop down effectively:
<table align="left">
<tr>
<td>
</td>
</tr>
</table>
<table align="right">
<tr>
<td>
</td>
</tr>
</table>
With Outlook, it's best to make sure you have 5px or larger in between the two tables so that it can add it's own spacing in (That you can't do anything about). So, for a table of 600px width, you'd have each of your tables with a width of 295px for a good enough amount of spacing.
Hope this helps :)

trouble with gmail rendering email

<style type="text/css">
#media only screen and (max-width: 480px) {
.secondary img {
width: 100%;
}
}
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200);
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
}
body {
font-family:'Source Sans Pro', Arial, Helvetica, sans-serif;
}
h1 {
font-size: 50px;
font-weight: 200;
color: #FFFFFF;
line-height: 50px;
margin-bottom: 40px;
}
h2 {
font-size: 36px;
font-weight: 200;
color: #444444;
margin-bottom: 30px;
}
h2 strong {
font-weight: 400;
color: #51a33d;
}
h3 {
font-size: 24px;
font-weight: 400;
color: #444444;
}
p {
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: #AEAEAE;
margin-bottom: 20px;
}
p.light {
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: #999999;
margin-bottom: 30px;
}
p.quote {
font-size: 24px;
font-weight: 200;
line-height: 30px;
color: #444444;
}
table {
text-align: center;
}
table.wrap {
width: 640px;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
table.flat-bottom {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
table.block {
width: 250px;
margin: 0 10px;
}
table.btn {
width:260px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
table.btn a {
width: 250px;
display: block;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
table.single a {
font-size: 24px;
padding: 15px 0;
}
table.double a {
font-size: 18px;
padding: 10px 0;
}
table.green {
background: #51a33d;
}
table.gray {
background-color: #999999;
}
table.orange {
background-color: #F57B20;
}
table img {
margin: 0 auto;
}
a img {
border: none;
}
.main-img {
display: block;
width: 640px;
margin: 0 auto;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.icon-img {
width: 90px;
height: 90px;
}
.main {
background-color: #444444;
}
.main a {
color: #FFFFFF;
text-decoration: none;
}
.secondary {
background-color: #EEEEEE;
}
.secondary a {
color: #51A33D;
text-decoration: none;
}
.secondary-logo img {
display: inline-block;
margin:0 auto 20px auto;
}
icon img {
display: inline-block;
margin:0 auto;
}
.unsubscribe {
font-size: 14px;
color: #999999;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<div style="width:640px; text-align:center; margin: 0 auto;">
<p style="font-size: 14px; margin-bottom: 0px;">Trouble viewing? View it in your web browser.</p>
</div>
<table cellpadding="0" cellspacing="0" class="main wrap flat-bottom">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" width="540" height="60"> </td>
</tr>
<tr>
<td colspan="3">
<img src="http://img03.en25.com/EloquaImages/clients/SnagajobcomInc/{33384eb5-e6b0-4030-a8f8-332c77753d99}_logo.png" alt="When I Work" />
</td>
</tr>
<tr>
<td colspan="3" height="30"> </td>
</tr>
<tr>
<td colspan="3">
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h1>Building the Team to Make Scheduling Easier</h1>
<p>Last month we teamed up with When I Work to give our customers an extended free trial of their awesome scheduling software. There was such a great response that we wanted to make sure that you had another chance to easily schedule your employees.</p>
</font>
</td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td colspan="3">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="110"> </td>
<td>
<table class="" style="width: 320px;">
<tr>
<td valign="middle" height="55"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">Schedule My Employees</font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="50"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<img src="http://staging.thisclicks.net/email/wiw/v4/images/main-img-phone.jpg" class="main-img" />
<br />
<table cellpadding="0" cellspacing="0" class="secondary wrap">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" height="70"> </td>
</tr>
<tr>
<td colspan="3">
<div class="secondary-logo">
<img src="http://staging.thisclicks.net/email/wiw/v4/images/wiw-logo.jpg" />
</div>
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h2>Employee Scheduling. <strong>Reinvented.</strong></h2>
<p class="light">When I Work is the easiest way for a business to schedule and communicate with its employees using the web, mobile, text messaging, and social media.</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td width="110"> </td>
<td>
<table class="btn single green" style="width: 320px">
<tr>
<td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">Schedule My Employees</font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
<tr>
<td colspan="3" height="80"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" class="secondary wrap">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" width="540" height="70"> </td>
</tr>
<tr>
<td colspan="3">
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h2>Make Life Easier for You<br />and Your Company</h2>
<p>When I Work is offering an extended free trial to<br />Snagajob customers for a limited time.</p>
<p class="light">Click below to begin receiving applications today!</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td width="110"> </td>
<td>
<table class="btn single green" style="width: 320px">
<tr>
<td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">Schedule My Employees</font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
<tr>
<td colspan="2" height="60"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<br />
<div class="unsubscribe"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">If you are no longer interested you can <unsubscribe>unsubscribe</unsubscribe> instantly.</font></div>
</center>
</body>
</html>
Its working in most of my email clients but looks awful in gmail. Do they not support something I'm doing? I know I had some trouble with gmail and margin in previous emails that we have done. Not really sure how I should reformat it from here?

Gmail strips out anything inside style tags, so you need to make sure all your styles are inline.
Here is a CSS Inliner tool tool from Zurb.