Really sill question but i can't get it to work like i want to... don't do much html anymore. Here's what i got:
<table border="0" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th><th width="10"> </th><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th></tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
The second table is not conforming to 600 width, it seems to be overwritten somewhere. I thought if i write any type of inline styles it overwrites everything else. ... I basically want my second table to be the same size as the first.
I've tried just putting an extra <tr><td></td></tr> inside the first table and eliminating the second table altogether but than it makes one td wider and squishes the other in the first two td's
*****This is for an email*****
Here's the header.phtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0;
padding: 0;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing:0 !important;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100%;
}
/* What it does: Fix for Yahoo mail table alignment bug. */
table {
border-collapse: collapse;
margin: 0 auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
.mobile-link--footer a {
color: #666666 !important;
}
/* What it does: Overrides styles added images. */
img {
border:0 !important;
outline:none !important;
text-decoration:none !important;
}
#media screen and (min-device-width: 768px) {
/* Hides the nav menu except for gmail */
*[class].desktopHide {
display: none !important;
}
}
/* Media Queries */
#media screen and (max-device-width: 600px), screen and (max-width: 600px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% !important;
}
/* Hides the nav menu except for gmail */
*[class].mobileHide {
display: none !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="fluid"],
img[class="fluid-centered"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: auto !important;
}
/* And center justify these ones. */
img[class="fluid-centered"] {
margin: auto !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="stack-column"],
img[class="stack-column-center"] {
width: 100% !important;
max-width: 600px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-half"],
img[class="stack-column-center-half"] {
width: 100% !important;
max-width: 300px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-third"],
img[class="stack-column-third-center"] {
width: 100% !important;
max-width: 120px !important;
height: auto !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column"],
td[class="stack-column-center"] {
display: block !important;
width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column-half"],
td[class="stack-column-half-center"] {
display: inline-block !important;
width: 50% !important;
direction: ltr !important;
}
td[class="stack-column-third"],
td[class="stack-column-third-center"] {
display: inline-block !important;
width: 32% !important;
direction: ltr !important;
}
/* And center justify these ones. */
td[class="stack-column-center"] {
text-align: center !important;
}
/* Data Table Styles */
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Change the look and layout of the remaining td's */
td[class="data-table-td"],
td[class="data-table-td-title"] {
display: block !important;
width: 100% !important;
border: 0 !important;
}
/* What it does: Changes the appearance of the first td in each row */
td[class="data-table-td-title"] {
font-weight: bold;
color: #000000;
padding: 10px 0 0 0 !important;
border-top: 2px solid #eeeeee !important;
}
/* What it does: Changes the appearance of the other td's in each row */
td[class="data-table-td"] {
padding: 5px 0 0 0 !important
}
/* What it does: Provides a visual divider between table rows. In this case, a bit of extra space. */
td[class="data-table-mobile-divider"] {
display: block !important;
height: 20px;
}
/* END Data Table Styles */
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f8f8f8" style="margin: 0px; padding: 0px; zoom: 100%;">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f8f8f8" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none; visibility:hidden; opacity:0; color:transparent; height:0; width:0; line-height:0; overflow:hidden; mso-hide: all;">
Shop new arrivals now!
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email wrapper : BEGIN -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="width:600px; margin: auto;" class="email-container">
<!-- Full Width, Fluid Column : BEGIN -->
<tbody>
<tr>
<td style="font-family:Helvetica, Arial, sans-serif; color: #999999; font-size:10px; text-align: right;">
View in Browser
</td>
</tr>
<!-- Full Width, Fluid Column : END -->
<tr>
<td>
<!-- Logo + Links : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
<tr>
<td valign="middle" align="center" style="padding:0px 0; text-align:center; line-height: 0;" class="stack-column-center">
<img src="http://cdn.website.com/media/wysiwyg/emails/ecomm/2016_0524_dresses/0524_Dresses_09.jpg" alt="website Stone" width="600" height="70" border="0" style="margin: auto;">
</td>
</tr>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
</tbody>
</table>
<!-- Logo + Links : END -->
<!-- Menu : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<!-- Menu : END -->
<!-- Free Shipping Pre-Header : BEGIN -->
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mobileHide" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top: 0px solid #eeeeee;" height="2">
<img src="http://media.website.com/6385/Shared/sca/spacer.gif" style="display: block;" height="1" border="0">
</td>
</tr>
</tbody>
</table>
Looking at your first bit of code with just the two tables, they are displayed at the same width. I modified your code to put a size 2 red border on both tables and you can see they are indeed both the same width.
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th>
<th width="10"> </th>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
As for your second bit of code (the header.phtml file), I'll be honest, I don't quite understand how that ties in with your first. The code you provided is incomplete and nested tables within tables within tables (many of which are single row, single datacell) is just too overly complex to decipher here.
Since this is for an email, and I have battle scars from my own fights getting proper HTML formatting within an email, I will say that you have to throw out all modern standards and styles of HTML development, especially when it comes to Microsoft email clients, and pretend it's the 1990's again. Nested tables are unfortunately sometimes necessary to get what you want (shudder). Just like with any HTML design, the simpler the layout, the easier time you will have achieving it.
Here are also a few links that I found invaluable for reference and education when it came to getting an HTML email to behave properly. Hopefully they will help you as well:
How To Make An Email Newsletter That Looks The Same
CSS Support Guide for Email Clients
What You Should Know About HTML Email
Tips and Best Practices for HTML Emails in Outlook 2007, 2010
Actually both tables have same width. If you update border="01" then you will see width of the tables properly.
If you want to remove second table, add another row in the first table with colspan attribute is equal to 3 because first table has 3 columns.
<tr><td colspan="3"></td></tr>
I would like to suggest using css classes rather than inline styles.
Related
I have created a HTML email and seem to be having issues on some outlooks and mobile outlook with the table cells borders I have attached an image of the issue there seems to be a thin lines where the table cells are.
CSS
html { width: 100%; }
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; }
table td { border-collapse: collapse; font-family: Arial,sans-serif; line-height:1.4 }
HTML
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td height="10" bgcolor="fd6b0d"></td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td width="50" bgcolor="fd6b0d"></td>
<td bgcolor="fd6b0d">
<p style="font-family: Verdana; font-size: 28px; color: #fff; margin: 0; padding: 0; line-height: 60px; text-align: center; font-weight: bold;">
How Confident Are You?
</p>
</td>
<td width="50" bgcolor="fd6b0d"></td>
</tr>
</table>
I thought this was a common issue known as the Outlook Line bug but it isn't.
I couldn't see lines on the desktop versions, but only on the mobiles--because your template is not responsive. So, the Outlook rendering engine is adding an "outlook-overflow-scaling" span wrapper around your tables to compensate.
If you were to make your table responsive (so, for example use width 100%), it would not need to try and scale the email.
I am designing an HTML signature for a client, which needs to work in Outlook 365.
There are two main tables. The top table needs to be the same width as the bottom table.
The problem is I can't seem to align the logo (in the top table) with the right side of the bottom table. And the top table is narrower than the bottom one. I wish to make it the same width as the bottom table.
I want to keep it as much responsive as possible so that it can display properly on mobile displays.
Can you please suggest some solutions?
Thanks so much!
<head>
<style>
<!--
/* Font Definitions */
#font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
a:link,
{color:#f67828;
text-decoration:none;}
a:visited,
{color:#f6c228;
text-decoration:none;
font-weight:bold;}
p
{margin-top:0.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
text-align:justify;
line-height:100%;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:#808080;}
-->
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* Media Queries */
#media screen and (max-width: 600px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 13px !important;
line-height: 24px !important;
}
}
#media screen and (max-width: 400px) {
.hide{display:none!important;}
.block{display:block!important;}
img.center-on-narrow {float:left !important;}
}
</style>
</head>
<body>
<table style="width:auto;">
<tr>
<td style="width:380px;padding-right:30px; display: inline-block;">
<table>
<tr>
<td>
<p style="color: #404040;"><strong>ADMIN USER</strong></p>
<p style="color: #404040;">Business Manager</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/email-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="mailto:doe#example.co.uk">nikki#example.co.uk</a> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/tel-icon.png" alt="" width="20" height="20" /> 4958695834</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/address-icon.png" alt="" width="20" height="20" /> Demo Address</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/website-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="https://www.example.co.uk">www.example.co.uk</a> </p>
</td>
</tr>
</table>
</td>
<td style="width:auto; display: inline-block;">
<table role="presentation">
<tr>
<td dir="ltr" style="padding: 0px 0px 20px 10px;float:right !important;">
<img src="https://www.example.co.uk/wp-content/uploads/2019/07/example-logo-email.jpg" width="150" height="95" border="0" alt="alt_text" class="center-on-narrow" style="float:right; margin-top:15px; max-width: 162px; height: auto; background: #e41433; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width:80%;">
<tr>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt;">
<p>Sign up to our <strong><a style="color: #808080;text-decoration:none;" href="http://example.com/gd-YnL">Newsletter</a></strong></p>
</td>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt; text-align:right;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/facebook-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/twitter-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/instagram-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/linkedin_icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/youtube-icon.png" alt="" width="20" height="20" /></td>
</tr>
<tr>
<td colspan="2"><p style="color: #808080; font-size: 11px;padding-top: 10pt; ">This e-mail including all attachments has been sent by example Aesthetics Ltd and is meant only for the intended recipient and may be a confidential communication or a communication privileged by law. If you received this e-mail in error, any review, use, dissemination, distribution, or copying of this e-mail is strictly prohibited. Please notify the sender immediately of the error by return e-mail and please delete this message from your system. Thank you in advance for your cooperation. Although we have taken steps to ensure that this email and attachments are free from viruses, we advise that in keeping with good computing practice the recipient must ensure that they are in fact virus free.</p></td>
</tr>
</table>
</body>
There were no error messages, but the tables are not matching in widths. The logo needs to align with the right side of the bottom table.
There was a few things that needed changing.
Your first table had a width auto meaning the width was dependent on its content. If the content was a word, the table would have taken its width.
2nd table had a width of 80% so both would have never been the same.
What I did:
added an outer table
gave both the inner table 100% width.
Image table style was removed and aligned right
So now both tables will always be the same width. You can control the width of the signature using the width of the outer table.
<head>
<style>
<!--
/* Font Definitions */
#font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
a:link,
{color:#f67828;
text-decoration:none;}
a:visited,
{color:#f6c228;
text-decoration:none;
font-weight:bold;}
p
{margin-top:0.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
text-align:justify;
line-height:100%;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:#808080;}
-->
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* Media Queries */
#media screen and (max-width: 600px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 13px !important;
line-height: 24px !important;
}
}
#media screen and (max-width: 400px) {
.hide{display:none!important;}
.block{display:block!important;}
img.center-on-narrow {float:left !important;}
}
</style>
</head>
<body>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table style="width:100%;">
<tr>
<td style="width:380px;padding-right:30px; display: inline-block;">
<table>
<tr>
<td>
<p style="color: #404040;"><strong>ADMIN USER</strong></p>
<p style="color: #404040;">Business Manager</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/email-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="mailto:doe#example.co.uk">nikki#example.co.uk</a> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/tel-icon.png" alt="" width="20" height="20" /> 4958695834</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/address-icon.png" alt="" width="20" height="20" /> Demo Address</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/website-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="https://www.example.co.uk">www.example.co.uk</a> </p>
</td>
</tr>
</table>
</td>
<td align="right" style="">
<table align="right" role="presentation">
<tr>
<td dir="ltr" style="padding: 0px 0px 20px 10px;float:right !important;">
<img src="https://www.example.co.uk/wp-content/uploads/2019/07/example-logo-email.jpg" width="150" height="95" border="0" alt="alt_text" class="center-on-narrow" style="float:right; margin-top:15px; max-width: 162px; height: auto; background: #e41433; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt;">
<p>Sign up to our <strong><a style="color: #808080;text-decoration:none;" href="http://example.com/gd-YnL">Newsletter</a></strong></p>
</td>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt; text-align:right;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/facebook-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/twitter-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/instagram-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/linkedin_icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/youtube-icon.png" alt="" width="20" height="20" /></td>
</tr>
<tr>
<td colspan="2"><p style="color: #808080; font-size: 11px;padding-top: 10pt; ">This e-mail including all attachments has been sent by example Aesthetics Ltd and is meant only for the intended recipient and may be a confidential communication or a communication privileged by law. If you received this e-mail in error, any review, use, dissemination, distribution, or copying of this e-mail is strictly prohibited. Please notify the sender immediately of the error by return e-mail and please delete this message from your system. Thank you in advance for your cooperation. Although we have taken steps to ensure that this email and attachments are free from viruses, we advise that in keeping with good computing practice the recipient must ensure that they are in fact virus free.</p></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
Hope that is what you were after.
I've been battling literally one final bug fix that only appears in Windows Outlook Desktop, versions 2007, 2010, 2013, and 2016 (plus their respective DPI versions). My left padding keeps getting removed from my td although I use left-padding in other places throughout the email that does not get removed (same class!). I'm hoping you guys can spot something I haven't been able to!
Note: I've stripped out the proprietary stuff and put words in it's place. It's a branding nav bar that contains a varying width image (max width is ~198) and text that should be close (10px padding) away from the image, then a phone # alllll the way to the right
What I have tried:
using padding-left instead of shorthand
applying the padding to the p tag instead
changing p tag from p to span
making all widths percentages
removing all alignment from tds
And one other note - my "strong" class doesn't seem to be applying properly either. Not sure if it's related or not, but figured worth adding.
<style type="text/css">
.padding-l-10 {
padding: 0px 0px 0px 10px !important;
}
.branding {
font-size: 12px !important;
line-height: 18px !important;
}
.phone {
font-size: 12px !important;
}
.branding-bar {
padding: 12px 20px 12px 20px !important;
}
.branding-bar p {
vertical-align: bottom !important;
}
.branding-bar img {
display: block !important;
}
.branding-bar-phone {
font-size: 14px !important;
line-height: 13px !important;
font-weight: 300 !important;
text-align: right !important;
}
.small-text {
font-size: 12px !important;
font-weight: 300 !important;
line-height: 13px !important;
}
.strong {
font-weight: 700!important;
color: #333333;
}
</style>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="630">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="branding-bar" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="590">
<tr>
<td align="left" class="display-block" valign="bottom" width="20%">IMAGE WOULD BE HERE - DYNAMIC WIDTH</td>
<td align="left" class="display-block-relation padding-l-10" valign="bottom" width="40%">
<p class="small-text">
THIS WOULD BE THE TOP WORD
</p>
<p class="small-text strong">
THIS WOULD BE THE BOTTOM WORD
</p>
</td>
<td align="right" class="display-none" valign="bottom" width="40%">
<p class="branding-bar-phone">
THIS WOULD BE A PHONE NUMBER
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm trying to create a responsive HTML email for Outlook 2013 but I'm having trouble trying to get the email to respect the width limit I have set (i.e. width="100%"). The actual width is indeed being set to 100% until I reach a certain smaller width at which point I have to scroll to view the information.
The code works fine in IE (no surprise) so I know the code itself is at least appropriate in that sense (i.e. I haven't wrapped something incorrectly).
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive Email Template</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;
font-family: Georgia, Times, serif
}
table {
border-collapse: collapse;
}
a {
color:#0076b7;
}
.nav-link:visited {
color:#fff;
}
/*
#media only screen and (max-width: 640px) {
.deviceWidth {width:440px!important; padding:0;}
.ReadMsgBody {width:440px!important; padding:0;}
.center {text-align: center!important;}
}
#media only screen and (max-width: 479px) {
.deviceWidth {width:280px!important; padding:0;}
.ReadMsgBody {width:280px!important; padding:0;}
.center {text-align: left!important;}
} */
</style>
</head>
<body style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#fff" style="padding-top:20px" valign="top" width="100%">
<!-- Start Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="font-size:21px; font-weight:bold; margin:0 auto; font-family:'Franklin Gothic',sans-serif;" width="100%">
<tr>
<td bgcolor="#0076B7" width="100%">
<!-- Logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="line-height:32px; padding:5px 20px;">
<a class="nav-link" style="font-size:21px; font-weight:bold; color:#fff; text-decoration: none; font-family:'Franklin Gothic',sans-serif;" href="#">LOGO</a>
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #fff; font-weight: light; text-align: right; font-family:'Franklin Gothic Book',sans-serif; line-height: 24px; vertical-align: middle; padding:10px 20px; font-style:normal">
Home | News | Events | Applications | OrgChart
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- Actual Email Section -->
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="margin:0 auto;" width="100%">
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td style="padding:10px 10px 10px 0" valign="middle">
Title
</td>
</tr>
</table>
<!-- Content -->
<p>Content here.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:40px 8px 10px 8px">
Place of Work<br>
Jacob Johnson<br>
Work Role<br>
jacobjohnson#me.com<br>
555-555-5555
</td>
</tr>
</table><!-- End One Column -->
</td>
</tr>
</table><!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
Recap: My email extends beyond the width limit I have it set for and I can't figure out why. Outlook is a pain in my butt.
Outlook isn't broken, your code exhibits the same behavior in almost every email client.
The problem is that you set all the tables to have a width of 100%. On many of them, you added the class .deviceWidth, where you specify the width in media queries, but not for anything wider than 640px. Outlook does not support #media queries.
Try adding .deviceWidth {width:440px!important; padding:0;} to your style sheet outside of media queries and address your width="100%" on every table.
JSFiddle is not working for me right now so I can't show you a sample.
Good luck.
Outlook doesn't respect 100% width so you need to set a fixed width for outlook, add width to the wrapper table
<table class="for_others" align="center" border="0"
cellpadding="0" cellspacing="0" width="600">
And using the class set width to 100% for all others. Use !important at the end of the declaration to override inline css.
table.for_others {width: 100% !important;}
I'm kinda new to coding html so I copied a mobile-friendly template from cerberus for my job. My current problem is that I have added a border to the header image, however when the window is resized to anything less than 100%, the right border does not show. I have tried removing width:100%, that actually makes it worse. I have also tried to add padding, but that doesn't seem to work either. Below is the code please any assistance would be appreciated.
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%"><!-- Hero Image, Flush : BEGIN -->
<tbody>
<tr>
<td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="https://......" style="width: 100%; max-width: 660px; border: 10px groove goldenrod; height: auto; background: rgb(221, 221, 221) none repeat scroll 0% 0%; font-family: sans-serif; font-size: 15px; line-height: 20px; color: rgb(85, 85, 85);" width="680" /></td>
</tr>
Solution 1: use box-sizing: border-box; so your width include border as a box:
CSS3 box-sizing Property Definition and Usage
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?
content-box:
Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included
border-box:
The width and height properties (and min/max properties) includes content, padding and border, but not the margin
initial:
Sets this property to its default value. Read about initial
inherit:
Inherits this property from its parent element. Read about inherit
ref: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.fluid {
width: 100%;
max-width: 680px;
border: 10px groove goldenrod;
height: auto;
background: rgb(221, 221, 221) none repeat scroll 0% 0%;
font-family: sans-serif;
font-size: 15px;
line-height: 20px;
color: rgb(85, 85, 85);
box-sizing: border-box;
}
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%">
<!-- Hero Image, Flush : BEGIN -->
<tbody>
<tr>
<td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="http://placehold.it/350x150" width="680" /></td>
</tr>
</tbody>
</table>
Solution 2: use the following in your .fluid because width does not include border width:
width: calc(100% - 20px);
.fluid {
width: calc(100% - 20px);
border: 10px groove goldenrod;
height: auto;
background: rgb(221, 221, 221) none repeat scroll 0% 0%;
font-family: sans-serif;
font-size: 15px;
line-height: 20px;
color: rgb(85, 85, 85);
}
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%">
<!-- Hero Image, Flush : BEGIN -->
<tbody>
<tr>
<td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="http://placehold.it/350x150" width="680" /></td>
</tr>
</tbody>
</table>