<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.
Related
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.
I create a custom email HTML signature for my outlook profile but when I add to my signatures and rewrite the file from HTML to HTM, this signature doesn't work. When I open signature in OUTLOOK for edit it is an empty editor page.
Can you write a comment and advise me on this problem?
I created this email signature the first time and I don't know where I have mistaken.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style media="screen" type="text/css">
.arial {
font-family: Arial;
}
.container {
max-width: 650px;
}
.font-14 {
font-size: 14px;
}
.font-12 {
font-size: 12px;
}
.font-10 {
font-size: 10px;
}
.bold {
font-weight: bold;
}
.i-block {
display: inline-block;
}
.blue {
color: rgb(24, 71, 132);
}
.image {
max-width: 600px;
height: auto;
}
.profile {
width: 90px;
height: 90px;
object-fit: cover;
object-position: center top;
}
.fa {
display: inline-block;
}
.height-space {
height: 20px;
}
.tr-height {
height: 20px;
}
#media only screen and (max-width: 1100px) {
.image {
width: 450px;
}
.container {
max-width: 450px;
}
.profile {
max-width: 70px;
max-height: 70px;
}
.fa {
display: none;
}
}
#media only screen and (max-width: 900px) {
.height-space {
height: 10px;
}
.tr-height {
height: 15px;
}
}
#media only screen and (max-width: 500px) {
.font-14 {
font-size: 12px;
}
.font-12 {
font-size: 10px;
}
.font-10 {
font-size: 8px;
}
.height-space {
height: 7px;
}
.image {
width: 350px;
}
.container {
max-width: 350px;
}
.profile {
max-width: 50px;
max-height: 50px;
}
}
</style>
</head>
</html>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial container"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<span class="sc-kgAjT cuzzPp" style="margin-right: 15px; display: block;">
<img src="https://paralympic.sk/wp-content/uploads/2021/01/AC4Q2271-scaled.jpg" role="presentation"
class="sc-cHGsZl bHiaRe profile">
</span>
</td>
<td style="vertical-align: middle;">
<h3 color="#184784" class="sc-fBuWsC eeihxG blue font-14" style="margin: 0px;">
<span>Tomáš</span><span> </span><span>Valach</span>
</h3>
<p color="#000000" font-size="large" class="sc-fMiknA bxZCMx font-12"
style="margin: 0px; color: rgb(0, 0, 0); line-height: 22px;">
<span><b>Motivátor</b></span>
</p>
<p color="#000000" font-size="large" class="sc-dVhcbM fghLuF font-12"
style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); line-height: 16px;">
<span><span class="fa">Národný projekt </span><b> SME SI ROVNÍ</b></span>
</p>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#184784" direction="vertical" width="1" class="sc-jhAzac hmXDXQ blue"
style="width: 0px; border-bottom: none; border-left: 2px solid;"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr class="tr-height" style="vertical-align: middle;">
<td style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Mobil:
</p><a href="tel:0914196212" color="#000000" class="sc-gipzik iyhjGb font-10 i-block"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>0914196212</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
E-mail:
</p>
<a href="mailto:tomas.valach#smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>tomas.valach#smesirovni.sk</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Web:
</p>
<a href="www.smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>www.smesirovni.sk</span></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td class="height-space"></td>
</tr>
<tr>
<td color="#184784" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ"
style="width: 100%; border-bottom: 2px solid rgb(24, 71, 132); border-left: none; display: block;"></td>
</tr>
<tr>
<td class="height-space"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="height-space">
<p class="font-10" style="text-align: center; padding: 0 30px;">Tento projekt sa realizuje vďaka podpore z
Európskeho sociálneho
a Európskeho fondu
regionálneho rozvoja v
rámci Operačného programu Ľudské zdroje.</p>
<p class="font-10" style="text-align: center;"><a href="https://www.employment.gov.sk/sk/esf/"
class="font-10">www.esf.gov.sk</a>, <a href="https://www.employment.gov.sk/sk/"
class="font-10">www.employment.gov.sk</a></p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img class="image" src="oplz.png" alt="" srcset="">
</td>
</tr>
</tbody>
</table>
The media attribute is not supported. The fact is that Outlook uses Word for rendering HTML markup for message bodies. You can find all supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You are closing off your HTML before starting your table. I have added a body tag as well and same(full) code is below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style media="screen" type="text/css">
.arial {
font-family: Arial;
}
.container {
max-width: 650px;
}
.font-14 {
font-size: 14px;
}
.font-12 {
font-size: 12px;
}
.font-10 {
font-size: 10px;
}
.bold {
font-weight: bold;
}
.i-block {
display: inline-block;
}
.blue {
color: rgb(24, 71, 132);
}
.image {
max-width: 600px;
height: auto;
}
.profile {
width: 90px;
height: 90px;
object-fit: cover;
object-position: center top;
}
.fa {
display: inline-block;
}
.height-space {
height: 20px;
}
.tr-height {
height: 20px;
}
#media only screen and (max-width: 1100px) {
.image {
width: 450px;
}
.container {
max-width: 450px;
}
.profile {
max-width: 70px;
max-height: 70px;
}
.fa {
display: none;
}
}
#media only screen and (max-width: 900px) {
.height-space {
height: 10px;
}
.tr-height {
height: 15px;
}
}
#media only screen and (max-width: 500px) {
.font-14 {
font-size: 12px;
}
.font-12 {
font-size: 10px;
}
.font-10 {
font-size: 8px;
}
.height-space {
height: 7px;
}
.image {
width: 350px;
}
.container {
max-width: 350px;
}
.profile {
max-width: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial container"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<span class="sc-kgAjT cuzzPp" style="margin-right: 15px; display: block;">
<img src="https://paralympic.sk/wp-content/uploads/2021/01/AC4Q2271-scaled.jpg" role="presentation"
class="sc-cHGsZl bHiaRe profile">
</span>
</td>
<td style="vertical-align: middle;">
<h3 color="#184784" class="sc-fBuWsC eeihxG blue font-14" style="margin: 0px;">
<span>Tomáš</span><span> </span><span>Valach</span>
</h3>
<p color="#000000" font-size="large" class="sc-fMiknA bxZCMx font-12"
style="margin: 0px; color: rgb(0, 0, 0); line-height: 22px;">
<span><b>Motivátor</b></span>
</p>
<p color="#000000" font-size="large" class="sc-dVhcbM fghLuF font-12"
style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); line-height: 16px;">
<span><span class="fa">Národný projekt </span><b> SME SI ROVNÍ</b></span>
</p>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#184784" direction="vertical" width="1" class="sc-jhAzac hmXDXQ blue"
style="width: 0px; border-bottom: none; border-left: 2px solid;"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr class="tr-height" style="vertical-align: middle;">
<td style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Mobil:
</p><a href="tel:0914196212" color="#000000" class="sc-gipzik iyhjGb font-10 i-block"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>0914196212</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
E-mail:
</p>
<a href="mailto:tomas.valach#smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>tomas.valach#smesirovni.sk</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Web:
</p>
<a href="www.smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>www.smesirovni.sk</span></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td class="height-space"></td>
</tr>
<tr>
<td color="#184784" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ"
style="width: 100%; border-bottom: 2px solid rgb(24, 71, 132); border-left: none; display: block;"></td>
</tr>
<tr>
<td class="height-space"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="height-space">
<p class="font-10" style="text-align: center; padding: 0 30px;">Tento projekt sa realizuje vďaka podpore z
Európskeho sociálneho
a Európskeho fondu
regionálneho rozvoja v
rámci Operačného programu Ľudské zdroje.</p>
<p class="font-10" style="text-align: center;"><a href="https://www.employment.gov.sk/sk/esf/"
class="font-10">www.esf.gov.sk</a>, <a href="https://www.employment.gov.sk/sk/"
class="font-10">www.employment.gov.sk</a></p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img class="image" src="oplz.png" alt="" srcset="">
</td>
</tr>
</tbody>
</table>
</body>
</html>
html siganture keeps cutting off
I have 0 html experience but can edit code if its straightforward enough.
The top of my logo/social media icons keeps cutting off on outlook. They don't cut off when I open the email in a browser or through a mobile device. Is there a way to edit the code so that it doesn't cut off? I tried adding padding to the top but it doesn't work. Please help.
Code
<table width="335" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td style="padding-top: 0; padding-bottom: 0; padding-left: 0px; padding-right: 0;"> <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td colspan="2" style="padding-bottom: 2px; color: #515151; font-size: 15px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b>Ryan Milliman </b> </td> </tr> <tr> <td colspan="2" style="padding-bottom: 6px; color: #515151; font-size: 14px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b> <small style="color:#515151;" >Director of Investor Relations</small></b> </td> </tr> <tr> <td colspan="2" style="color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;line-height:0px;"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >O:</b> (800) 735- 9973 </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">M:</b> (760) 793- 2933 </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >W:</b> www.primior.com </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">E:</b> ryan.milliman#primior.com </td> </tr> <tr> <td colspan="2" style="color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;"> <b style="color:#9d1924;">A:</b> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px; padding-top:7px;line-height:15px;"> <a href="http://www.primior.com"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/logo.png" width="155" height="20" alt="" /> </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px;padding-top:7px;line-height:15px;text-align:right;"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/fb.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/tw.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/lin.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/ins.png"> </td> </tr> </table> </td> </tr> </table>
Outlook sometimes ignores the width/height of an element.
Try adding width and height to your td where the Image is located.
<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.
I want to align "User ID" label right side to make it closer to it's value, see pic. below.
Seems can't solve this with additional colspan's. User ID can contain 1-9 digits.
<center>
<table id="customer_info">
<tr>
<td><img id="logo" src="img/logo.png" align="middle"></img></td>
<td colspan="2">User ID</td>
<td>011238</td>
</tr>
<tr>
<td colspan="3">Items to get:</td>
<td>390 s.</td>
</tr>
<tr>
<td colspan="3">Complete until:</td>
<td>21.1.2013</td>
</tr>
</table>
</center>
<hr />
table {
white-space: nowrap;
border: none;
width: 250px;
height: 50px;
border-spacing: 0px;
color: #806E66;
font-family: "Arial";
font-size: 14px;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
}
#customer_info tr > td:last-child {
text-align: right;
font-weight: bold;
font-size: 16px;
color: #E36608;
}
#customer_info tr:nth-child(1) > td:nth-child(2) {
text-align: right;
font-size: 12px;
}
because you have all the table cells connected together and depends on each other width
to solve this one solutions is to do the following:
<center>
<table id="customer_info">
<tr>
<td colspan="3" align="right">
<table width="100%"><tr><td><img id="logo" src="img/logo.png" align="middle"></img></td><td align="right">User ID</td><td align="right">011238</td></tr></table></td>
</tr>
<tr>
<td colspan="2">Items to get:</td>
<td width="100%" align="right">390 s.</td>
</tr>
<tr>
<td colspan="2">Complete until:</td>
<td align="right">21.1.2013</td>
</tr>
</table>
</center>
<hr />
hope this helps
See Working Demo
HTML
<center>
<table id="customer_info">
<tr>
<td width="30%">
<img id="logo" src="img/logo.png" align="middle" />
</td>
<td width="15%"> </td>
<td style="text-align:right" width="30%">
User ID
</td>
<td width="30%">
011238
</td>
</tr>
<tr>
<td colspan="3">
Items to get:
</td>
<td>
390 s.
</td>
</tr>
<tr>
<td colspan="3">
Complete until:
</td>
<td>
21.1.2013
</td>
</tr>
</table>
</center>
<hr />
CSS
table {
white-space: nowrap;
border: none;
width: 250px;
height: 50px;
border-spacing: 0px;
color: #806E66;
font-family: "Arial";
font-size: 14px;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
}
#customer_info tr > td:last-child {
text-align: right;
font-weight: bold;
font-size: 16px;
color: #E36608;
}
#customer_info tr:nth-child(1) > td:nth-child(2) {
text-align: right;
font-size: 12px;
}