I am stuck with the attached e-mail HTML file as it does not render properly in thunderbird, sometimes in AOL, outlook, etc... (depending on the browser).
What I was trying to do here was to display a number of profiles for a dating website. All the emails I send are responsive so I wanted it to behave this way :
- 580px wide email : 4 profiles
- Tablet version : 3 profiles
- Mobile version : 2 profiles
To achieve this, I created a table (which width will vary according to the device it's read on) and inside I put 8 small tables, expecting that when the border of the larger table is there, the next mini table would start a next line. But unfortunately it is only the case on some desktop clients & webmails, but not all of them.
Can you think of a solution to make this responsive friendly ?
Thanks in advance !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="SayDating" content="True" />
<title>E-mail</title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff; }
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;}
html {width: 100%; }
table {border-spacing: 0px;}
p {margin-bottom: 0}
#media only screen and (max-width: 640px) {
body[class=responsive] .deviceWidth {width:440px!important}
body[class=responsive] .fichesannonces { width: 360px !important; }
body[class=responsive] .deviceWidth2 {width:420px!important}
}
#media only screen and (max-width: 479px) {
body[class=responsive] .deviceWidth {width:280px!important}
body[class=responsive] .fichesannonces { width: 240px !important; }
body[class=responsive] .deviceWidth2 {width:266px!important; padding: 0 0 3px 0!important;}
}
</style>
</head>
<body class="responsive">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 10px 0;" valign="top" width="100%">
<table class="deviceWidth" width="580" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td>
<table class="deviceWidth2" style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="deviceWidth2" style="padding: 5px 15px 15px 15px; font-family: Tahoma, Geneva, Kalimati, sans-serif; font-size: 13px; color: #000000;" align="left">Bonjour,<br /><br />blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla :</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table class="fichesannonces" width="480" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="480">
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
Pseudopseudo<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform: capitalize;">ville</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
Pseudopseudo<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I'm having an issue with the outlook application.
One thin line shows above and below the img tag. I have highlighted
the line in the screenshot.
I have attached the screenshot in which the thin line is highlighted.
Please let me know the suggested fix.
Thank you in advance.
#media only screen and (max-width: 639px) {
.st-title-wrapper {
padding-left: 50px !important;
padding-right: 50px !important;
}
.st-title {
font-size: 24px !important;
line-height: 22px !important;
}
.st-desc {
font-size: 16px !important;
line-height: 18px !important;
}
.footer-links {
padding-left: 20px !important;
}
.footer-link-single {
padding: 8px 5px !important;
}
.footer-link-single a {
font-size: 14px !important;
}
.footer-link-top {
height: 30px !important;
}
.footer-link-bottom {
height: 30px !important;
}
.footer-social {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.footer-logo {
width: 125px !important;
}
.footer-logo img {
width: 125px !important;
}
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Email template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;700&display=swap" rel="stylesheet" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if gt mso 15]>
<style type="text/css" media="all">
/* Outlook 2016 Height Fix */
table,
tr,
td {
border-collapse: collapse;
}
tr {
font-size: 0px;
line-height: 0px;
border-collapse: collapse;
}
</style>
<![endif]-->
</head>
<body style="margin: 0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="max-width: 100%; width: 840px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td align="center" style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td style="width: 360px; text-align: center" class="st-title-wrapper">
<font style="
color: #e4002b;
font-family: 'Oswald', Arial, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 28px;
" class="st-title">Lorem Ipsum is simply dummy text of the
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#e6e6e6">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-top.png" width="100%" style="display: block" />
</td>
</tr>
<tr>
<td align="center" style="padding: 13px 20px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td width="550" style="text-align: center">
<font style="
color: #1a1a1a;
text-align: center;
font-family: Arial, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 20px;
" class="st-desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia.
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="
border-collapse: collapse;
border-spacing: 0px;
">
<tbody>
<tr>
<td align="" class="footer-links" style="padding-left: 80px">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="240" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="" valign="middle" style="padding: 8px 0" class="footer-link-single">
<a href="https://www.google.com/" style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
">Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
<td width="210" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
colspan="3"
height="60"
class="footer-link-bottom"
></td>
</tr>
<tr>
<td
align="center"
style="
padding-left: 42px;
padding-right: 42px;
"
>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
height="1"
style="background-color: #fff"
></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" colspan="3">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
align="right"
class="footer-social"
style="
padding-top: 62px;
padding-bottom: 62px;
"
>
<table
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tbody>
<tr>
<td
align="center"
valign="middle"
style="
padding-left: 8px;
padding-right: 8px;
"
>
<a
href="https://www.google.com/"
>
<img
src="https://rahulshahui.github.io/pwa/images/FB-icon.png"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
[Below is the code link][2]
[2]: https://codepen.io/rahulFront/pen/oNpPvgZ
This looks like a border.
Try adding border-width:0; to the images, e.g.:
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block;border-width:0;" />
I'm trying to align this text and button but I can't manage to do it. I want them to be on the same row no matter the length of the text.
If you need the CSS styling please let me know.
<div style="float: left; width: 100%;" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
I think for your requirement we would need to make some changes in the structure of your table. we need to keep button and text in the same and with different s.
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr width="320" style="max-width:320px">
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="320" align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr width="320">
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td width="160" align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum </td>
<td width="160" align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
Try above snippet. It might work for you. I have made few changes in structure of table.
I have been scouring the internet for around 2 days now and I can't find anything about an issue. I am facing with extra space on the LEFT and RIGHT side of images in Outlook desktop.
The extra space, affects the ability of my table/columns to be displayed side by side. If I shorten the width of any cell/row/table to the exact width of that space (circled in red in image) they suddenly pop in side by side. It is this particular little space I can't figure out how to remove. It is like there is a default value set somewhere on something I am unaware of.
Sorry about some images not being uploaded anywhere, these ones weren't really important.
2 How it appears in every other email client.
3 How it is appearing in outlook only.
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-spacing: 0px;
box-sizing: border-box;
}
#media only screen and (max-device-width: 480px) {
table[class=responsive] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=left] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=right] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
img {
width: 100% !important;
}
}
p {
padding: 10px 10px 10px 10px;
}
a {
color: #333333;
}
a:visited {
color: #000000;
}
<html>
<head>
<title></title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body style="font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;">
<!-- CENTER TABLE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="660" border="0" cellspacing="0" cellpadding="0" class="responsive">
<tr>
<td bgcolor="#FFFFFF"><img src="10324612_ptgray.jpg" align="left" style="vertical-align: top; display:inline-block;"></td>
</tr>
<tr>
<td bgcolor="#666666" height="50">
<p style="text-align: center; color: #FFFFFF; font-size: 24px; line-height: 24px;"><b>THE JULY ISSUE OF <em>PHYSICS TODAY</em> IS AVAILABLE</b><br></p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" cellpadding="0" align="left">
<tr border="0" cellspacing="0" cellpadding="0" align="left">
<td border="0" cellspacing="0" cellpadding="0" align="left"><img src="https://i.stack.imgur.com/BVa1S.png" width="220" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align: top; display: block; max-width: 100%;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td style="border: 1px solid #CCCCCC;">
<a href="#">
<table class="left" width="438" border="0" cellspacing="0" align="left">
<tr>
<td valign="middle" height="287">
<p style="font-size: 50px; line-height: 50px; text-align: center; padding: 0px 0px 0px 0px;">View the November Issue Online</p>
</td>
</tr>
</table>
<table class="right" width="220" border="0" cellspacing="0" align="right">
<tr>
<td><img src="pt-cover.jpg" style="vertical-align: top; display: block;"></td>
</tr>
</table>
</a>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" height="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">WHITEPAPER</p>
<p style="color: #C8544B; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Restoring sight with retinal prostheses</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Large amplitude oscillatory shear: Simple to describe, hard to interpret</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Who owns a scientist's mind?</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Magnets separate mirror-image molecules</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Concerns about aging plutonium drive need for new weapon cores</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p><strong>Help desk information:</strong><br><br>If you need technical assistance, please do not reply to this automated email; click here.</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p>This email has been sent to %%email%%. In case you are not able to click on the links above, please go to: http://physicstoday.advanced-pub.com</p>
<p>Physics Today is published by the American Institute of Physics, One Physics Ellipse, College Park, MD. 20740. Send publication questions to pteditors#aip.org. The information contained in this e-mail
message is intended only for the personal use of the recipient(s). For Information on American Institute of Physics' Privacy Policy please click here. We appreciate your interest in our publication and encourage you to contact us with
your comments or suggestions. Thank you!</p>
<p>To unsubscribe, please click here.</p>
</td>
</tr>
</table>
<!-- CENTER TABLE -->
</td>
</tr>
</table>
</body>
</html>
According to my test and search, it not img's reason, might be table.
You could refer to the below code:
<table cellpadding="0" cellspacing="0" height="40" width="238" border="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:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" 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">
<tbody>
<tr>
<td 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 goes here
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
</body>
For more information, please refer to this link:
Outlook table spacing in HTML email - no usual tricks working
Table style border- outlook 2010 adds an extra space
I have a content block for an email that is not functioning as I want it to in Outlook. The block also needs to work in mobile and should look like this in browser/desktop:
.
In all browsers this looks perfect, except Outlook. In Outlook, it removes the entire white background colour from the button (it actually reduces it down to the text content) and it looks god awful:
Here is my code for the box:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
<tr>
<td width="20"> </td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" dir="ltr" width="100%">
<tr>
<td class="full" dir="ltr" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH IMAGE PART-->
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center"> <img src="http://placehold.it/170x170" style="display: block; border: 0;" width="170"></td>
</tr>
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</table>
</td>
<td class="full" dir="ltr" valign="top" width="50%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH TEXT AND TITLE PART-->
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-22c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 20px; text-transform: uppercase;"> Lorem ipsum dolor</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-16c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 16px; line-height: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td class="cta" bgcolor="" width="" style="-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 0px;font-family: Century Gothic; padding-top: 0px; padding-bottom:0px; font-weight:;"> <a class="cta" href="http://www.example.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0 ; text-align: center;font-weight: bold; font-size: 14px; font-family: Century Gothic, Helvetica, Arial, sans-serif; color: #8b8b93; background: #ffffff; border: 1px solid #8b8b93; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:30px;">LORUM IPSUM</a> </td>
<td width="20"> </td>
</tr>
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"> </td>
</tr>
</table>
</td>
</tr>
And the class CTA is as follows:
cta {
margin: auto;
display: inline-block;
background:#ffffff !important;
}
/* BUTTON STYLES */
cta {
padding: 15px 15px;
width: 150px;
font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, sans-serif !important;
font-size: 14px;
font-weight: bold;
color: #8b8b93;
background: #ffffff !important;
border: 1px solid #8b8b93;
font-weight: bold;
align-content: center;
}
Unfortunately it requires a lot more code than it should to get a button displaying well and being clickable in Outlook. Something like this should do the trick (no CSS in the <style> necessary unless you want to do :hover effects):
<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 3px; background: #FFFFFF; text-align: center;">
<a href="http://www.google.com" style="background: #FFFFFF; padding: 15px; border: 1px solid #8b8b93; font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; font-weight: bold;">
<span style="color:#8b8b93;">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
So I think is better to directly set the background-color to your Html tag than in your css file
I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}