I am creating html templemate because I want to send some mails. But I have problem. In my templemate on the left side is padding on th I think. But I can not delete it and I do not know how to delete it. I want to have that left elements on the same level like this on the right side. Can you help me? I am appreciate help. It is very important for me.
<html>
<head>
<style type="text/css">
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
line-height: 100%;
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
border-collapse: collapse;
}
.tablereset {
margin: 0 auto;
width: 640px !important;
line-height: 100% !important
}
.button {
margin: 0 auto !important;
}
.devicewidthsocial {
margin: 0 auto;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
td.boxesfont {
font-size: 17px !important;
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[class*=font-resize] {
font-size: 140%!important
}
#media only screen and (max-width:640px) {
a[href="tel"],
a[href="sms"] {
text-decoration: none;
color: #ffffff;
pointer-events: none;
cursor: default;
}
tr.removemobile {
display: none;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=button] {
float: none;
}
table.removemobile {
display: none;
}
table.tablereset {
margin: 0 auto;
width: 440px !important;
line-height: 100% !important
}
table[class*=devicewidth] {
width: 440px!important;
text-align: center!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 400px!important;
text-align: center!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
img[class*=logoImg] {
width: 110px!important;
height: auto!important;
}
}
#media only screen and (max-width:479px) {
table.removemobile {
display: none;
}
table[class*=tablereset] {
margin: 0 auto;
width: 280px !important;
line-height: 100% !important
}
img[class*=logoImg] {
width: 100px!important;
height: auto!important;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=devicewidthright] {
width: 160px!important;
}
table[class*=devicewidth] {
width: 280px!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 240px!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
table[class*=button] {
float: none!important;
}
table[class*=button] td,
table[class*=button] td a {
font-size: 12px!important;
}
td[class*=oswaldfont] {
font-size: large!important;
}
}
</style>
</head>
<body style="margin:0; padding:0">
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="font-family:Open Sans; text-align: center; color: #606060;">Nowy outlet mebli tapicerowanych</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
<div class="strike">
<span style="font-weight: bold; color: #606060;">Lorem ipsum <p style="font-weight: 400;">Lorem ipsum</p></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20" width="640"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse; border: 1px solid #dddddd;" class="tablereset" align="center" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="left" width="200">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Open Sans, Helvetica, sans-serif;font-weight: 700; font-size: 22px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">Lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="1" valign="middle">
<span style="width:2px; height:80px; background:#ececec; margin-top: 70px; display:block;"></span>
</td>
<td width="317" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tbody>
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse; margin-top: 20px;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Open Sans, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 20px;">
<span style="margin-left:5px;">$</span></span>
</span>
</td>
</tr>
<tr>
<td align="center" height="5" width="640"></td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Open Sans, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold; color: #606060;">Lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px; margin-left: 30px;">$</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 15px; font-weight: 400;">Wymiary:</p>
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 10px;"><span style="font-weight: bold;">Długość: </span><span style="margin-left: 15px;">188 cm</span></p>
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 2px;"><span style="font-weight: bold;">Szerokość: </span>  85 cm</p>
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 2px"><span style="font-weight: bold;">Wysokość: </span>  90 cm</p>
</td>
</tr>
</tbody>
</table>
Try to add this :
table td {
border-collapse: collapse;
vertical-align: bottom;
}
I think the elements on the left are on the same level as the ones on the right
Related
New HTML email template for this client seems to work fine elsewhere but on Outlook it gets displayed too wide or entire screen. I understand that in MSO width rules have to be forced through conditional, but none of my "if mso" would work and it continue to render too wide instead of honouring my 600px request. First time so more in general I'm not too positive that the code I've got down is clean and essential as it should be. Would very much appreciate your expert cross check and if you could point out wherever you see mistakes in it.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>{email_subject}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="x-apple-disable-message-reformatting">
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style type="text/css">
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body { margin: 0; padding: 0; height: 100%!important; width: 100%!important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly;}
table,td {
border-collapse: separate !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100%!important; -ms-interpolation-mode: bicubic;}
img.aligncenter { display: block; margin: 0 auto;}
#media screen and (max-width: 525px) {
.pt-1, .padding-top-15 { padding-top: 15px!important; }
.pb-1, .padding-bottom-15 { padding-bottom: 15px!important; }
.responsive { width:100%!important; }
table.responsive { width:100%!important; float: none; display: table; padding-left: 0; padding-right: 0; }
table[class="responsive"] { width:100%!important; float: none; display: table; padding-left: 0; padding-right: 0; }
img { max-width: 100%!important }
img[class="responsive"] { max-width: 100%!important; }
/* "width: auto" restores the natural dimensions forced with attributes for Outlook */
.fluid { max-width: 100%!important; width: auto; }
img[class="fluid"] { max-width: 100%!important; width: auto; }
.block { display: block; }
td[class="responsive"]{width:100%!important; max-width: 100%!important; display: block; padding-left: 0 !important; padding-right: 0!important; float: none; }
td.responsive { width:100%!important; max-width: 100%!important; display: block; padding-left: 0 !important; padding-right: 0!important; float: none; }
td[class="section-padding-bottom-image"]{
padding: 50px 15px 0 15px !important;
}
.max-width-100 { max-width: 100%!important; }
/* Obsolete */
.tnp-grid-column {
max-width: 100%!important;
}
}
/* Text */
/* Html */
.html-td-global p {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
/* Last posts */
#media (max-width: 525px) {
.posts-1-column {
width: 100%!important;
}
.posts-1-image {
width: 100%!important;
display: block;
}
}
/* Gallery */
.gallery-medium {
box-sizing: border-box;
width: 280px;
height: 200px;
max-width: 100%!important;
overflow: hidden;
display: inline-block;
text-align: center;
padding: 0;
margin: 5px;
}
#media all and (max-width: 480px) {
.gallery-thumbnail-img {
max-width: 45%;
}
.gallery-medium {
max-width: 100%!important;
height: auto;
display: block;
margin-bottom: 10px;
}
}
/* A single full post */
#media all and (max-width: 480px) {
.single-post-gallery img {
max-width: 40%;
}
.single-post-1-column {
width: 100%!important;
}
.single-post-1-image {
width: 100%!important;
display: block;
}
}
/* List */
#media all and (max-width: 480px) {
.list-text .mobile {
font-size: 20px;
}
}
/* Columns */
#media only screen and (min-width:480px) {
.mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
}
#media only screen and (min-width:480px) {
.mj-column-per-33 {
width: 33.333333333333336% !important;
max-width: 33.333333333333336%;
}
}
#media only screen and (min-width:480px) {
.mj-column-per-25 {
width: 25% !important;
max-width: 25%;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; line-height: normal; word-spacing: normal;" dir="ltr">
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr>
<td bgcolor='#ffffff' valign='top'><!-- tnp --><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="image">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block">
<!--[if mso | IE]><!--[if mso]><table role=3D"presentation" align=3D"center" style=3D"width:600px;"><![endif]--> <table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MjAsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoyMCwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImh0bWwiOiJcdTAwM0NwIHN0eWxlPVwibWFyZ2luOiAwcHg7dGV4dC1hbGlnbjogcmlnaHRcIlx1MDAzRTI1IG5vdmVtYnJlMjAyMlx1MDAzQ1wvcFx1MDAzRSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoidGV4dCJ9" cellpadding="0" align="center" cellspacing="0" width="100%" style=" border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 15px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%"><tbody><tr><td align="center"><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px"></td></tr></tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="text">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MjAsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoyMCwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImh0bWwiOiJcdTAwM0NwIHN0eWxlPVwibWFyZ2luOiAwcHg7dGV4dC1hbGlnbjogcmlnaHRcIlx1MDAzRTI1IG5vdmVtYnJlMjAyMlx1MDAzQ1wvcFx1MDAzRSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoidGV4dCJ9" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 0px; padding-left: 15px; padding-right: 15px; padding-bottom: 10px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%" style="width: 100%!important" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="100%" valign="top" align="left" style="font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: normal; color: #313131; line-height: 1.5;">
<p style="margin: 0px;padding-top:0px;padding-bottom: 10px; text-align: right">16 febbraio 2023</p> </td>
</tr>
</tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="cpt">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImxhbmd1YWdlIjoiIiwicG9zdF90eXBlIjoicG9zdCIsIm1heCI6IjUiLCJpbWFnZSI6IjEiLCJkYXRlIjoiMSIsImF1dGhvciI6IjEiLCJ0aXRsZV9mb250X2ZhbWlseSI6IiIsInRpdGxlX2ZvbnRfc2l6ZSI6IiIsInRpdGxlX2ZvbnRfY29sb3IiOiIiLCJ0aXRsZV9mb250X3dlaWdodCI6IiIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImZvbnRfd2VpZ2h0IjoiIiwiYnV0dG9uX2xhYmVsIjoiQ09OVElOVUEiLCJidXR0b25fYmFja2dyb3VuZCI6IiIsImJ1dHRvbl9mb250X2NvbG9yIjoiIiwiYnV0dG9uX2ZvbnRfZmFtaWx5IjoiIiwiYnV0dG9uX2ZvbnRfc2l6ZSI6IiIsImJ1dHRvbl9mb250X3dlaWdodCI6IiIsInNob3dfcmVhZF9tb3JlX2J1dHRvbiI6IjEiLCJhdXRvbWF0ZWRfaW5jbHVkZSI6Im5ldyIsImF1dG9tYXRlZF9ub19jb250ZW50cyI6Ik5vIG5ldyBwb3N0cyBieSBub3chIiwiYXV0b21hdGVkIjoiIiwibGF5b3V0IjoiYmlnLWltYWdlIiwiaW5saW5lX2VkaXRzIjpbXSwiZXhjZXJwdF9sZW5ndGgiOiI2OCIsInRheF9jYXRlZ29yeSI6WyI0MyJdLCJ0YWdfcG9zdF90YWciOiIiLCJ0YWdfcG9zdF9mb3JtYXQiOiIiLCJibG9ja19pZCI6ImNwdCJ9" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<tbody><tr>
<td align="center">
<img src="https://ilborgodiparma.net/wp-content/uploads/2023/02/Monica_Cocconi_Borgo.jpeg" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding-top: 30px; border: 0; font-size: 12px" class=""> </td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
<tbody><tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
AUTONOMIA DIFFERENZIATA E PRINCIPI FONDAMENTALI di Monica Cocconi <hr style="width: 20%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
</tr>
<tr>
<td align="left" style="font-size: 16px;font-family: Open-sans, Geneva, sans-serif; font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9484" dir="ltr">
La recente proposta sull’attuazione dell’autonomia differenziata prevista dall’art. 116, comma terzo della Costituzione, ossia del riconoscimento alle regioni ordinarie di «ulteriori forme e condizioni ... </td>
</tr>
<tr>
<td align="right" inline-class="button">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 5px" align="right"><tbody><tr><td align="center" bgcolor="#ffff" role="presentation" style="border:1px solid #dd3333 !important; cursor:auto;mso-padding-alt:10px 25px; background:#ffff" valign="middle">CONTINUA</td></tr></tbody></table> </td>
</tr>
<tr>
<td style="padding-bottom:0px; padding-top:25px"> <hr align="left" noshade="noshade" color="#dd3333" size="1px"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<tbody><tr>
<td align="center">
<img src="https://ilborgodiparma.net/wp-content/uploads/2023/02/Veronica_valenti_parma.jpeg" width="570" height="297" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding-top: 30px; border: 0; font-size: 12px" class=""> </td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
<tbody><tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
LA TUTELA DEI DIRITTI DELLE PERSONE IN STATO DI DETENZIONE di Veronica Valenti <hr style="width: 25%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
</tr>
<tr>
<td align="left" style="font-size: 16px;font-family: Open-Sans, Geneva, sans-serif;font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9240" dir="ltr">
E’ davvero un onore per me ricoprire l’incarico di Garante comunale dei diritti delle persone private della libertà personale. E il fatto che il Comune di Parma abbia inteso istituire tale Ufficio dimostra la sensibilità della ... </td>
</tr>
<tr>
<td align="right" inline-class="button">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 5px" align="right"><tbody><tr><td align="center" bgcolor="#fff" role="presentation" style="border:1px solid #dd3333; cursor:auto;mso-padding-alt:10px 25px;background:#fff" valign="middle">CONTINUA</td></tr></tbody></table> </td>
</tr>
<tr>
<td style="padding-bottom:0px; padding-top:25px"> <hr align="left" noshade="noshade" color="#dd3333" size="1px"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<center><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/Oltrelemura_Newsletter.png" width="" alt="" border="0" style="display: block; max-width: 400px !important; width: 400px !important; padding: 0; border: 0; font-size: 12px"></center>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<tbody><tr>
<td align="center">
<img src="https://ilborgodiparma.net/wp-content/uploads/2022/10/Oltrelemura_web-e1667502181350-1170x535.jpeg" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding: 0; border: 0; font-size: 12px" class=""> </td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
<tbody><tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
OLTRELEMURA del 02.02.2023 a cura di Graziano Vallisneri <hr style="width: 25%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
</tr>
<tr>
<td align="left" style="font-size: 16px;font-family: Open-Sans, Geneva, sans-serif;font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9194" dir="ltr">
</td>
</tr>
<tr>
<td align="right" inline-class="button">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 0px" align="right"><tbody><tr><td align="center" bgcolor="#fff" role="presentation" style="border:1px solid #dd3333; cursor:auto;mso-padding-alt:10px 25px;background:#fff" valign="middle">CONTINUA</td></tr></tbody></table> </td>
</tr>
<td style="padding-top:25px"> <hr align="left" noshade="noshade" color="#dd3333" size="1px"> </td>
</tbody></table>
</tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="image">
<tb0;" class="edit-block"><!--[if mso | IE]><table ="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MCwiYmxvY2tfcGFkZGluZ19sZWZ0IjowLCJibG9ja19iYWNrZ3JvdW5kIjoiIiwiYmxvY2tfYmFja2dyb3VuZF8yIjoiIiwiYmxvY2tfd2lkdGgiOjYwMCwiYmxvY2tfYWxpZ24iOiJjZW50ZXIiLCJpbWFnZSI6eyJpZCI6IjE1MzM0IiwidXJsIjoiaHR0cDpcL1wvcHJvdmFib3Jnby5pdFwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTFcL2ZhY2Vib29rLW5ld2xldHRlci5qcGcifSwiaW1hZ2UtYWx0IjoiIiwidXJsIjoiIiwid2lkdGgiOiIxMDAiLCJhbGlnbiI6ImNlbnRlciIsImlubGluZV9lZGl0cyI6IiIsInBsYWNlaG9sZGVyIjoiIiwiaW1hZ2UtdXJsIjoiaHR0cDpcL1wvcHJvdmFib3Jnby5pdFwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTFcL2ZhY2Vib29rLW5ld2xldHRlci5qcGciLCJibG9ja19pZCI6ImltYWdlIn0=" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%"><tbody><tr><td align="center"><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/seguici-anche-su-facebook.jpg" width="100" height="43" alt="" border="0" style="display: block; max-width: 200px !important; width: 100%; padding: 0; border: 0; font-size: 12px"></td></tr></tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="footer">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="margin-top: 0; 600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsInZpZXciOiJHdWFyZGEgb25saW5lIiwidmlld19lbmFibGVkIjoiMSIsInByb2ZpbGUiOiJHZXN0aXNjaSBpIHR1b2kgYWJib25hbWVudGkiLCJwcm9maWxlX2VuYWJsZWQiOiIxIiwidW5zdWJzY3JpYmUiOiJEaXNpc2NyaXZpdGkiLCJ1bnN1YnNjcmliZV9lbmFibGVkIjoiMSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImZvbnRfd2VpZ2h0IjoiIiwidXJsIjoicHJvZmlsZSIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoiZm9vdGVyIn0=" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 0px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><a style="font-size: 11px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #dd3333; text-decoration: none; line-height: normal;" href="https://ilborgodiparma.net/contatti?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=contatti_link" target="_blank">Circolo Il Borgo di Parma - Via A. Turchi 15A Parma 43125 - Telefono: 0521284203</a><br><span style="font-size: 10px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;">Per aggiornare o cancellare la tua iscrizione</span><a style="font-size: 10px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;" href="{profile_url}" target="_blank"> clicca qui.</a><br><br><a style="font-size: 11px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;" href="https://www.p40.us/" target="_blank">Progetto e realizzazione</a><a style="font-size: 11px;font-family:'trebuchet ms', Geneva, sans-serif;font-weight: 700; color: #222222; text-decoration: none; line-height: normal;" href="https://www.p40.us/" target="_blank"> P40.</a></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table>
<!-- /tnp -->
</body>
</html>
Outlook desktop does this when you do not specify a width attribute in images (width="x"). It will then use the native width of the image, which of course could be 1000px+.
Ensure you add the correct width attribute to all your images that you want Outlook to use. Continue to use style="width:xx" for everything else (this will take priority on everything except for Outlook, which ignores it completely).
e.g. change this:
<img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px">
Into this:
<img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="500" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px">
Do not use "px" or other measurement in a width attribute. It should be just a number.
Outlook windows app problem:
problem is that I cant vertical-align(center) text and image in the button and also border-radius not working in the outlook app, any suggestions on how to fix it and make it the same as in Gmail for the outlook app.
it happens only in outlook application.
<!-- [if !mso]><!--> <!--<![endif]-->
<style>#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}</style>
<!-- [if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]--> <!-- [if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]--> <!-- [if !mso]><!-->
<style>#import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);</style>
<!--<![endif]-->
<style>#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}</style>
<style>.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}</style>
<style>[owa] .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}</style>
<style>#media only screen and (max-width:480px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}</style>
<div style="display: none; font-size: 1px; color: #ffffff; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">Pre-header Text</div>
<div style="background-color: #ffffff;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 600px;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; padding-bottom: 20px; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
<table style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="center">
<table style="border-collapse: collapse; border-spacing: 0px;" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 275px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#F0F2F5" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background: #F0F2F5; background-color: #f0f2f5; margin: 0px auto; max-width: 600px; width: 500px;">
<table style="background: #F0F2F5; background-color: #f0f2f5; width: 500px;" role="presentation" border="0" width="500px" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 500px;">
<table style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="center">
<table style="border-collapse: collapse; border-spacing: 0px;" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 60px;">
<img style="border: 0; display: block; outline: none; text-decoration: none; height: 60px; width: 100%; font-size: 13px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAABctJREFUaEPlW09MXEUY/82uBUFQaBsK9SIFjOxe2qonBU+tSbH1T2LXi9TEauFxEA+2NREP9mBbD64HFqo1sfXixkRta5vYngS9iLa9AKYsxYOWllSpFliB7hvzvd23fbvs+zvzELJzIWFnvvl+8/3/Zh6DT2Nz90TV/PziEwEW2AogzIFNADYCrBrgZeltWRLg0wCuMeAqgGGVqxdLS9f8eDlaf8sP1phMoo90TDzEgqkXmYqdYGgRos0xyAM4w1PBL3/tr/9NiJZhsRTAzV3jOxjnrwN4VhZjeXROccY+Hu1tOCdKXwhwGigOALxVlBFn69kAZzgiAtwTYFLdYCB1mAMRZ4zKncWAeEoNHvSi6q4BN3eO7WWMfQSgXC4M19TmOOdvjPY1HXez0hXgkJLoA9DhZoNlmNs/EmvsdLqPI8CbX7lUNV9eEWdg250SXs55HPx86dxM5PJnW2xDmS3gkDJRC6ROA3h8OUF42GsICO4aidVft1prCZgku1BeeV4m2KaNa1BxbwBbG0pxcXweM/+qGLu26AFfwSVDJXO3t1tJ2hJwszL2nSw1jjxZiUhLBeqq71nC6eT0HcQHZxD/4bYwcFLv0VjT02aETAHLclAk0Z7d60B/7QZJ+sCJm6ADEBymjqwg4Ezo+URwUw1kbF8NKsoCjknNJFUox6aE1Zxz/lqhkLUEMCUVgUBqWEacPdldmyNZstezP89iYDiZPYDWcBnaHrtPs2t9kKTbo5a+x8kBzqlqMJyfnCwBHFYSX8jIoPZuewCvbrv/LojJRRyK/1lQcpraR9ahqe6u2n964R8cv/C3E2CmcygjG441vmSckAM4UwScFdols/irt+uyDook2/7hDUvb1NS/oyYrabLjF96fFGaFM9ZmzL1zAIeU8e9lFALEPKmzPsj7Rk/b5gTo3lUF8ub6ILUWD1lsYCTW8JROMwtYpnTJLo/sWZ9lvOvYlBZz7QbF5t59Ndlp5LGN9m633ux3o5SzgENK4htZ9WykpRLdO6tcA84/qOiZW4gPisdmAKdGYo3PEUMa4IxnnvB6goXWkT1u2VSq/eTE61LoohCmx+tLV+eh9E9JY0lVg/XksTXAzV2JtxjHUWnUAc1hnXxzQ9YJ2dnxO7vXauGJhhMn55ZXzrB/tLfxAw1wqDMxINyDKsBBvoqa2SQBJcD6kGW7OSxxDI70NbYy6i4uLKSoc+jL6ImsxY5HM5JLqmiP5oan/Gzs3C+zOBT/yxdeSkqC1ay580obY4FvfdkB0NLKz7s3oDZTNBjtOd9ur0/fwcvRG6D00o/BufoMCyuJHg6858cGOk2zuGy0W5orJ+6aI2HAuwRYSippd2D5qSbl1LqTorUyUkk7HijVZCEl8ZPMAt9qU2OoMs6THYIseBgiwL8DeNDudGT8nh+q/ApBFrz+wULK+CzAl63l6jRUyTjgpTTYHEmYXKJtM08mA3qo8jMEmfDL/xfAFI6O7lmP/Sdu+haCLACLqzTZJpV2FH4KNelEtYNqY4rfVGKK9bvSKi3ktEhaXx+sc9W38noAlJA8f3hSRCvIaYmFJWPq6BWIm3V2RYgNrSHhxMMYWyU31bO86817+odIzNYSD9HU0ghYhBmnCYvIHlpqKVo8rCbAWvEgWh6uJsBaeUiqJNIAyLHhpIor8i7Gslr+MF3AZW4vPKu03gAgqiItHrOCwI3ndTPXK+CcFo9IE2+1AM5p4mlq7bFNu0oA57Zp02qtvbVyfc2yGgAXbMSnpez+qmXlAza5avEq5ZUO2PIyjUC77XFRX8qPCsnMc1O1RP0wJ8P2upSIyLwQd8KUj3OcXYhrqp1+bSf85MFHMLakHT950CnJetRiy5k/E9w9atF5kPlsyR9cS6l6frZEpPx4mOYzcLGHaenYXERPD3VpFNXjUqMKrlBHJv/5sBF0UT0Q14EX1ScAOdIulo888kNL0XzGkw+8aD7UKpRMrNRP8f4DSZwmyI9btWIAAAAASUVORK5CYII=" width="60" height="60">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-bottom: 20px; word-break: break-word;" align="center">
<div style="font-family: 'Roboto', Arial, sans-serif; font-size: 40px; font-weight: 900; line-height: 24px; text-align: center; color: #2a6adc;">ACCESS REQUESTED</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="body-section-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="body-section" style="margin: 0px auto; max-width: 600px; width: 500px;">
<table style="width: 500px;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; padding-bottom: 0; padding-top: 0; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#F0F2F5" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background: #F0F2F5; background-color: #f0f2f5; margin: 0px auto; max-width: 600px; width: 500px;">
<table style="background: #F0F2F5; background-color: #f0f2f5; width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
<table style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: 'Roboto', Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; text-align: left; color: #000000;">Daniel [and others] [has/have] requested access to the [Entity Names] “[Names of Entities]” for the following research objective:
<br>“[Description of Analysis]”. The access is requested for until XX/XX/XXXX.
</div>
</td>
</tr>
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-bottom: 15%; word-break: break-word;" align="left">
<div style="font-family: 'Roboto', Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; text-align: left; color: #000000;">Plesae review the request by selecting View Request below.</div>
</td>
</tr>
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-bottom: 30px; word-break: break-word;" align="center">
<table style="border-collapse: separate; width: 240px; line-height: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" bgcolor="#2A6ADC" role="presentation" style="border:none;border-radius:27px;cursor:auto;mso-padding-alt:10px 25px;background:#2A6ADC;" valign="middle">
<a href="https://google.com" style="display:inline-block;background:#2A6ADC;color:#ffffff;font-family:'Roboto', Arial, sans-serif;font-size:13px;font-weight:normal;line-height:24px;margin:0;text-decoration:none;text-transform:uppercase;padding:10px 25px;mso-padding-alt:0px;border-radius:27px;" target="_blank">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACGSURBVHgB7dTRCYAgEAbgKxqgERypEdxEmqgRHMUV2uC6gx6MytROEPGDg6ijvzg5gK5qiGjxnaNS8Ae9QOO3rKDRu1YR/dzjIj5mo5qfQiQtVLp0CCv+JxehkHVIwP05IWKmwDNDJ8SAgLpnAoEZpISIaXMmO8hytzu80M7FJsH6C7KrzwEvztK5Nj8QJgAAAABJRU5ErkJggg==" style="vertical-align:middle;" width="25px" height="25px" />
<span style="vertical-align:middle;">View request</span>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</div>
GMail example
outlook app mail example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Superstore - Email template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
#media screen and (max-width: 525px) {
table {
width: 100%;
}
.header-padding {
padding-left: 10px;
padding-right: 10px;
}
.logo {
height: 50px;
width: auto;
}
.mobile-hide {
display: none !important;
}
.mobile-copy {
text-align: center !important;
}
.mobile-center-btn {
text-align: center !important;
}
.icon-image-tall {
width: auto !important;
height: 200px;
}
.icon-image-long {
width: 200px;
height: auto !important;
}
.icons_three_padding {
padding-bottom: 40px;
}
.iphone_icon_mobile {
width: 120px !important;
}
.money_icon_mobile {
width: 120px !important;
}
.share_icon_mobile {
width: 120px !important;
}
.icons_conatiners_height {
height: auto !important;
}
.main-image-mobile {
width: 90% !important;
}
}
</style>
</head>
<body>
<!-- hidden preheader text -->
<div style="display: none; font-size: 1px; color: #f2f2f2; line-height: 1px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Hi #FIRSTNAME#, You are officially a #[COMPANY]. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Social Superstars too.
</div>
<!-- /hidden preheader text -->
<!--container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f2f2f2" style="background-color: #f2f2f2;">
<tr>
<td>
<!--header container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadada;">
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;" class="header-padding">
<!--header-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" style="background-color: #ffffff; margin-left: auto; margin-right: auto;">
<tr>
<td>
<img src="http://placehold.it/64x64" alt="" style="font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #E72C7B; font-size: 24px;" width="64" class="logo">
</td>
</table>
</center>
<!--/header-->
</td>
</tr>
</table>
<!--/header container-->
<!--hero container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--hero copy-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;">
<tr>
<td style="font-size: 36px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #6a6a6a;" class="mobile-copy">
Hi #FIRSTNAME#,
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; color: #6a6a6a;" class="mobile-copy">
You are officially a <span style="font-weight: bold">#[COMPANY]</span>. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Superstars too.
</td>
</tr>
</table>
</center>
<!--/hero copy-->
</td>
</tr>
</table>
<!--/hero container-->
<!--fill it up and launch container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#6a6a6a" style="background-color: #6a6a6a;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--fill it up and launch-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;" align="center">
<tr>
<td style="font-size: 48px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #ffffff; text-align: center;" class="mobile-copy">More followers,<br>more money</td>
</tr>
<tr>
<td style="padding-bottom: 40px;"><img src="https://s3-eu-west-1.amazonaws.com/socialsuperstore-assets/emails/find-followers.png" alt="" style="width: 360px;" width="360" class="main-image-mobile">
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; padding-bottom: 40px; color: #ffffff; text-align: center;" class="mobile-copy">Don't be shy… share share share! <br>Remember... Stay Social. Stay Super. </td>
</tr>
<tr>
<td class="mobile-center-btn">Share now →</td>
</td>
</tr>
</table>
</center>
<!--/fill it up and launch-->
</td>
</tr>
</table>
<!--/fill it up and launch container-->
<!--footer container-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--footer-->
<center>
<table width="600" cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
<tr>
<td style="font-size: 18px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #999999; padding-bottom: 20px">Thanks,<br />
The [COMPANY]team
</td>
</tr>
<tr>
<td style="font-size: 24px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #282828; font-weight: bold;">COPY GOES HERE</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
</td>
</tr>
</table>
</center>
<!--/footer-->
</td>
</tr>
</table>
<!--/footer container-->
<!-- Unsubscribe container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#282828" align="center" style="padding: 20px 0px; background-color: #282828;">
<!-- unsubscribe -->
<center>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
<tr>
<td align="center" style="font-size: 10px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color:#ffffff;">
<span class="appleFooter" style="color:#999;">
[company]
</span>
<br><a class="original-only" style="color: #E72C7B; text-decoration: none;" href="http://$UNSUB$">Unsubscribe</a>
</td>
</tr>
</table>
</center>
<!--/unsubscribe-->
</td>
</tr>
</table>
<!--/Unsubscribe container-->
</td>
</tr>
</table>
<!--/container-->
</body>
</html>
I've created some responsive HTML emails and have noticed on a couple of them, they show a white space (approx 20-30px in width) on the right. it only appears on iPads? I've attached a screenshot. Any ideas on how to get rid of it? I've apply 100% widths and 0 padding/margin and overflow-x: hidden to body and html tags but didn't work. Is it something to do with the amount of content in the email? The other emails without this issue have a lot more content (ie. they are taller with more sections).
http://imgur.com/kBgYmLm
This one was a tough nut to crack. To fix it, I wrote a media query that targets only iPads, and specifies a minimum width for the body. In my testing, this fixes the issue.
https://www.emailonacid.com/app/acidtest/display/summary/H51ptRsq1CKfk3qClFhulAJfOoa7NeZ5uplotor0fc9kD/shared
#media screen and (device-width: 768px) and (device-height: 1024px) {
body {min-width: 701px}
}
I've got an Outlook 07/10 table alignment issue that I just can't seem to solve...
Here's what it looks like: http://postimg.org/image/lrizj0h0t/ and obviously the buttons are supposed to line up (ignore the weird text alignment - it's because it's been photoshopped very very quickly for anonymity!!)
I've tried adding extra tables around it, tried making the buttons narrower, tried adding valign to various parts of it (including the table it's in). I thought it might be the 'fun' "Outlook is really Word" rendering issue where it's adding a page break, but doesn't appear to be (in that none of the solutions I'd found to fix that, like adding extra tables to make it separate tables and thus not as long, have worked)
Here's the code (i've not included the html body etc tags, but rest assured, they're there.
<style type="text/css">
body{-webkit-text-size-adjust:none;}
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
#outlook a{padding:0;}
.showonmobile {
display: none!important;
}
#media only screen and (max-width: 480px) {
table[class="main"] {
width: 300px!important;
}
table[class="centermob"] {
text-align: center!important;
width: 300px!important;
}
td[class="hideonmobile"] {
display: none!important;
}
table[class="hideonmobile"] {
display: none!important;
}
tr[class="hideonmobile"] {
display: none!important;
}
img[class="hideonmobile"] {
display: none!important;
}
table[class="showonmobile"] {
display: initial!important;
}
td[class="showonmobile"] {
display: initial!important;
}
img[class="halfwidth"] {
width: 300px!important;
}
table[class="halfwidth"] {
width: 300px!important;
}
td[class="halfwidth"] {
width: 300px!important;
}
table[class="hidespace"] {
display: none!important;
}
table[class="thirdwidth"] {
width: 48%!important;
}
img[class="onethirdleft"] {
width: 48%!important;
}
img[class="onethirdright"] {
width: 48%!important;
}
table[class="thirdwidthcontact"] {
display: none!important;
}
table[class="thirdwidthwhy"] {
width: 300px!important;
}
td[class="centralise"] {
text-align: center;
}
span[class="showlinebreak"] {
display: initial!important;
}
table[class="hidingonweb"] {
display: initial!important;
}
td[class="nav"] {
width: 206px!important;
}
table[class="twocol"] {
width: 300px!important;
}
img[class="oneninethrees"] {
width: 140px!important;
}
table[class="bottombuttonright"] {
width: 140px!important;
float: right!important;
display: inline-block;
}
table[class="bottombuttonleft"] {
width: 140px!important;
float: left!important;
display: inline-block;
}
td[class="bottombuttoninner"] {
width: 82px!important;
font-size: 13px!important;
}
table[class="bottombuttoninner"] {
width: 82px!important;
font-size: 13px!important;
}
td[class="smallerfont"] {
font-size: 13px!important;
}
}
</style>
<table cellpadding="0" cellspacing="0" class="twocol" style="width: 620px; background-color: #ffffff; border-collapse: collapse; empty-cells: show;">
<tbody>
<tr>
<td valign="top" align="center">
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="empty-cells: show; border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<table align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<table align="left" class="showonmobile" width="20" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td></tr><tr><td><![endif]-->
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table height="55" align="left" valign="top" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:193px; color: #ffffff; width:193px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="193">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="135">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="135">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any ideas gratefully received!!
You need to put tds around all elements for outlook. There are several points at which you just have 2 table elements in one td. Another problem with Outlook is you can't completely hide a table, so even the showonmobile table you have needs to be in its own td.
I noticed you used <!--[if mso]> to add your tds for outlook. You should just have tds on all platforms as it's good practice for emails.
Here's the amended code (using <!--[if mso]> for the tds):
<table cellpadding="0" cellspacing="0" class="twocol" style="width: 620px; background-color: #ffffff; border-collapse: collapse; empty-cells: show;">
<tbody>
<tr>
<td valign="top" align="center">
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="empty-cells: show; border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="showonmobile" width="20" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td></tr><tr><td><![endif]-->
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table height="55" align="left" valign="top" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:193px; color: #ffffff; width:193px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="193">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="135">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="135">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">Text here</p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<meta name="viewport" content="width=device-width" />
<style>
body {
background-color: #e4e4e4;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.ExternalClass * {
line-height: 100%;
}
.bgimg {
background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}
.checkout-price {
position: absolute;
top: 590px;
margin-left: 25px;
width: 120px;
height: 120px;
font: 28px/120px Helvetica, Arial, sans-serif;
color: white;
text-align: center;
text-shadow: 0 -1px 1px rgba(black, .3);
text-indent: -1px;
letter-spacing: -1px;
background: #e54930;
border: 1px solid;
border-color: #b33323 #ab3123 #982b1f;
border-radius: 60px;
#include user-select(none);
#include linear-gradient(top, #f75a3b, #d63b29);
#include box-shadow(inset 0 1px 1px rgba(white, .3), 0 1px 2px rgba(black, .2));
}
.checkout-price:before {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 2px solid #f5f8fb;
border-radius: 60px;
#include box-shadow(inset 0 1px 1px rgba(white, .2), inset 0 -1px 1px rgba(black, .25), 0 -1px 1px rgba(black, .25));
}
.cheapest {
margin-left: 80px;
font-size: 14px;
padding-top: 22px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-width: 480px) {
div, p, a, li, td {
-webkit-text-size-adjust: none !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
/*.bgimg {
background-image: url('images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}*/
}
#media only screen and (max-width: 767px) {
div, p, a, li, td {
/*-webkit-text-size-adjust: none !important;*/
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
}
</style>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<div style="background-color: #e4e4e4">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td class="cell">
<table>
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser Click Here</span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td>
<img src="http://worldtravelhub.com.au/newsletter/201401/images/high_quality_logo_wth.png" width="500" height="108" border="0" style="display: block"></td>
</tr>
</table>
<table border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
</font>-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<!--<tr>
<td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>
<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>
</td>
</tr>-->
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<!-- <tr>
<td class="w100">
<img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<img src="images/600.png" border="0" style="display:block">-->
<div class="bgimg">
<p class="cheapest">
<span class="bold">We'll get you the CHEAPEST flights to the</span><br />
<span class="indsub">Indian Subcontinent</span>
</p>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<span class="checkout-price">
<span style="font-size: 10px;">FROM</span> $850*
<!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
<div style="text-align: center; margin-right: 30px;">
Toll Free: 1800 984 045<br />
info#worldtravelhub.com.au<br />
www.worldtravelhub.com.au
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<p style="text-align: center;">
<span style="font-size: 22px; color: #e62529; letter-spacing: 3px; font-weight: bold;">Book online <span style="color: #000;">24/7 </span>at worldtravelhub.com.au</span><br>
<span style="font-size: 8px;">*A Verifiable written quote from another Australian registered travel businesses must be aproved and fare quoted must be generally avaliable to the public in the market and must be for the same date,seat class,fare category and airline and given to us before we make a booking for the customer.The quote must be for booked fares originating in Australia to Indian subcontinent.Lics No<span style="font-weight: bold;"> 2TA6049</span></span>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#888888">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>WorldTravelHub</strong><br>
Suite 4, 2 Kendall St,<br>
Harris Park NSW 2150</font></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>Phone:</strong> +61 2 8005 2797<br>
<strong>Fax:</strong>+61 2 8005 4237<br>
<strong>Email:</strong> info#worldtravelhub.com.au</font></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser Click Here</span>
<br>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
My html page works fine in all version of Chrome Browsers and IE 10,But Doesn't seem to work properly in IE 8 and IE 9,The problem is with padding-bottom css in class .bgimg.The Bottom Part of the page goes right below,when I add px instead of % it moves upwards and works but the text below ie contact details in red are no longer visible..Please help
Thanks for help in advanced
you can view it on this link..
http://worldtravelhub.com.au/newsletter/201401/201401.html
You can try to apply display: block; to any element and after give it padding-bottom
Remove padding-bottom and apply the height for the div bgimg. Also keep the background-size:cover for that.
.bgimg {
background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
width: 100%;
background-size:cover;
background-repeat: no-repeat;
height:460px;
background-repeat: no-repeat;
}
<element style = "padding-bottom: 77%;"> </element>
been experience on css trouble like that , and some browser element needs to have their style in HTML, so try something like on the above rather than on css file.