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>
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 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
**UPDATE:
#tablaarriba a:hover {
color: gray;
}
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
<a style="color: black; text-decoration: none; background-color: transparent;" href="social.htm">Social</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
<a style="color: black; text-decoration: none;" href="file:///Users/monmunoz/Desktop/Colegio/Tec/Quinto%20Semestre/ITGS/PROYECTO/Comercial.htm">Comercial</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="proyectospersonales.htm">Proyectos Personales</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="sobrelafotografa.htm">Sobre la fotógrafa</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
** I changed some details in the html pointed out by the HTML validator. So now I have this.
I'm almost done building my website; however I'm trying to incorporate the a:hover attribute in my stylesheet and I don't know what I'm doing wrong. I want my links to change to color grey whenever the mouse passes above them. Please help me. So far I have this:
Try this:
#tablaarriba a:hover {
color: gray ;
}
<div id="tablaarriba">
LINK
</div>
table a:hover {
color: gray ;
}
table a {
color: black; text-decoration: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link href="menuarriba.css" rel="stylesheet" type="text/css">
<title>Rosy G Photography and Artwork</title>
</head><body>
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
Social<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
Comercial<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Proyectos Personales<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Sobre la fotógrafa<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
</body></html>
I recommend adding a class to you're a element. Then use that class inside of the CSS, and try from there. If that does not work, then you might try using transition.
.a {
text-decoration: none;
color: black;
-webkit-transition: 0.256s;
}
.a:hover {
transition: 0.256s;
color: grey;
}
Test
The inline style style="color: black;..." is stronger than non-inline styles, so you cannot override it.
You should stylize the a tag with a selector (class or tag one).
<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.
<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.