I have been strugling with email html.
1) is that the pay now a button is not all green in Outlook. But look correct in gmail web
2) The width of the table/ td on 560px is not applied in Outlook
3) In gmail web mail the body color light green is domaninated by the table white color.
4) I tried to make margin on 10px on the HR by the comment. But in Outlook the margin (top) is much higher.
Please help before it get grey hairs :-)
<!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">
</head>
<br></br>
<body background="#cbebff" bgcolor="#cbebff" style="background:#cbebff; bgcolor:#cbebff; min-height:1000px; color:#000000;font-family:Arial, Arial, sans-serif; font-size:12px">
<center>
<table border="0" cellpadding="15" cellspacing="0" width="560px">
<tr>
<td colspan="2" width="560px" align="center" valign="top" bgcolor="#3590FF"><img src="http://www.domain.de/images/stories/help_filer/Toplogo.png"></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><strong>{hello} {fullname}.</strong></td>
<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><div align="right">{order_number_lbl} : {order_number}<br>{order_date_lbl} : {order_date}</div></td>
</tr>
<tr valign="top">
<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">{payment_missing}
<br></br><br></br>
<a style="width: 250px; padding: 15px; bgcolor:#62c462; background:#62c462; font-weight: bold; color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;" href="https://www.domain.de/index.php?option=com_epay&set_amount={order_total_mail}&set_invoice={order_id}&set_phone={billing_address_start}{phone}{billing_address_end}">{pay_now_lbl}</a>
<br></br><br></br>
<table width="100%" style="padding: 10px;border: 1px solid #CCCCCC;border-radius: 3px;background: #fafafa;">
<tr>
<td><strong>{customer_note_lbl} :</strong><br><hr style="margin: 10px !important;">{customer_note}</td>
</tr>
</table>
<br></br>
</td>
</tr>
</table>
<br>
<table width="560" border="0">
<tr>
<td><div align="center"><font color="#000000"><strong>Print.dk - Berlin</strong></font></div></td>
</tr>
<tr>
<td><hr>
<div align="center"><font color="#000000"><strong>Email : Info#printdk.de - Web : www.printdk.de</strong></font></div></td>
</tr>
</table>
</center>
</body>
</html>
Pics :
https://www.printdk.de/tmp/mail_gmail.jpg
https://www.printdk.de/tmp/mail_outlook.jpg
try this.
1 :
<p style="width: 150px; padding: 10px; text-align: center; bgcolor:#62c462; background:#62c462; font-weight: bold; color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;">Pay Now</p>
2 :
<tr valign="top">
<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">
<table width="560" style="border-collapse:collapse;" cellpadding="0" cellspacing="0" >
<tr>
<td>Payment Losing</td>
<tr><td>
<br><br><br><br>
<p style="width: 150px; padding: 10px; text-align: center; bgcolor:#62c462; background:#62c462; font-weight: bold; color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;">Pay Now</p>
</td></tr>
</tr>
</table>
</td>
</tr>
3 : you have to give width to your outer table to get light green background and put all your email contents in it. this way you can do.
4 : instead of giving margin give padding to your td. as sometimes margin won't render by some email engine.
hope this helps.
you can refer here for HTML Email Guidelines
Related
I am setting up HTML template with 600 px as parent body width, but in outlook 2007 - 2019, full available width is being occupied.
Image is taking 100% of width in outlook versions but it should take only 600 px of width. For others, it is working fine.
Expected Image:
Error Image:
<!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" />
<title>test</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial; font-size: 13px"
>
<tr bgcolor="#eeeeee">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
style="box-shadow: 0px 0px 4px 2px #e0e0e0"
>
<tr bgcolor="#ffffff">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
class="email_content"
style="
padding-bottom: 15px;
background-color: #fafafa;
"
>
<div
style="
padding: 5px;
border-radius: 4px 4px 0px 0px;
background-color: #fdaf74;
"
></div>
<!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> -->
<!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> -->
<img style="padding : 20px 0 0 25px;"
src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg
height="40">
</td>
</tr>
<tr>
<table style="margin: 0 7px">
<table
align="center"
width="100%"
class="main-wrapper"
style="border-bottom: 1px solid #eee"
>
<tr>
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial"
>
<tr bgcolor="#F2F2F2">
<td align="center">
<table
cellpadding="0"
cellspacing="0"
width="600"
border="0"
>
<tr>
<td>
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr bgcolor="#ffffff">
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
style="
text-align: left;
font-size: 16px;
padding: 6px 0
10px 18px;
"
>
<p
style="
color: #1a1a1a;
"
>
Hi Sheetal
Chourasiya,
</p>
<p
style="
color: #505050;
"
>
You have
received Plum
E-Gift Card.
Congratulations!
</p>
</td>
</tr>
<tr>
<td
align="center"
>
<img
src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg"
style="
margin: 0;
border: 0;
padding: 0;
display: block;
"
width="600px"
height="300px"
alt="Image"
/>
</td>
</tr>
<tr>
<td
style="
padding: 24px
60px 0;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="
text-align: left;
font-size: 14px;
background-color: #fafafa;
border-radius: 6px;
margin-bottom: 30px;
"
>
<tr>
<th
style="
padding: 24px
0 10px
24px;
text-align: left;
font-size: 16px;
color: #505050;
"
>
Plum
E-Gift
Card
</th>
<td
style="
text-align: right;
padding-right: 20x;
"
>
<a
href="https://docs.xoxoday.com/docs/getting-started-1"
target="_blank"
style="
color: #c7417b;
text-decoration: none;
display: none;
"
>What is
Plum?</a
>
</td>
</tr>
<tr
style="
box-shadow: 0px -1px
0 0 #eaeaea;
"
>
<td
style="
padding: 20px
0 20px
24px;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
>
<tr>
<td>
<span
style="
color: #909090;
font-size: 16px;
margin: 0;
"
>Gift
Card
Code</span
>
</td>
</tr>
<tr>
<td>
<span
style="
color: #505050;
font-size: 20px;
margin: 6px
0
0
0;
font-weight: 500;
letter-spacing: 0.025rem;
"
>77m43dddb46b</span
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Change this line:
<table align="center" style="width: 100%" class="main-wrapper">
To:
<table align="center" style="width: >100%" class="main-wrapper">
(>100% is a number smaller than 100, for example 90)
The initial width of a block-level element like div or p is auto.
Use [ width: auto ] to undo explicitly specified widths.
if you specify [ width:100% ], the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.
width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regard to the parent. This typically causes problems.
Check the image link below to get more information.
HTML Width - by Shashank
You have px value on your image of the birthday code it seems. I have removed it and updated your code slightly through and online cleaner. I am a dreamweaver user and your code was not working for me. If the below code has issues, just change the width value of your birthday image (belated-happy-birthday-3.jpg) and assign width value without the pixels.
Try out this code to see if it works for you.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial; font-size: 13px">
<tr bgcolor="#EEEEEE">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="box-shadow: 0px 0px 4px 2px #e0e0e0">
<tr bgcolor="#FFFFFF">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="email_content" style="padding-bottom: 15px; background-color: #fafafa;">
<div style="padding: 5px; border-radius: 4px 4px 0px 0px; background-color: #fdaf74;"></div><!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> --><!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> --><img src="https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg" alt="First_American_Logo_0" width="142" height="40" style="padding : 20px 0 0 25px;">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial">
<tr bgcolor="#F2F2F2">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="text-align: left; font-size: 16px; padding: 6px 0 10px 18px;">
<p style="color: #1a1a1a;">Hi Sheetal Chourasiya,</p>
<p style="color: #505050;">You have received Plum E-Gift Card. Congratulations!</p>
</td>
</tr>
<tr>
<td align="center"><img src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="300" alt="Image"></td>
</tr>
<tr>
<td style="padding: 24px 60px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="text-align: left; font-size: 14px; background-color: #fafafa; border-radius: 6px; margin-bottom: 30px;">
<tr>
<th style="padding: 24px 0 10px 24px; text-align: left; font-size: 16px; color: #505050;">Plum E-Gift Card</th>
<td style="text-align: right; padding-right: 20x;">
What is Plum?
</td>
</tr>
<tr style="box-shadow: 0px -1px 0 0 #eaeaea;">
<td style="padding: 20px 0 20px 24px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><span style="color: #909090; font-size: 16px; margin: 0;">Gift Card Code</span></td>
</tr>
<tr>
<td><span style="color: #505050; font-size: 20px; margin: 6px 0 0 0; font-weight: 500; letter-spacing: 0.025rem;">77m43dddb46b</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The problem is in the following line:
<table align="center" style="width: 100%" class="main-wrapper">
When you use style = "width: 100%", you are saying that you want the width of the table to be the entire browser width; the width of the parent container and the margins combined.
There are a few ways you can fix this problem:
The first way is to use width: auto:
<table align="center" style="width: auto" class="main-wrapper">
Another way it to just set the pixels manually:
<table align="center" style="width: 600px" class="main-wrapper">
Or, you can just get rid of the style as a whole so it'll auto fit to the parent width:
<table align="center" class="main-wrapper">
All three of these methods will produce the same result.
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
For some reason when I set the width for a cell in a table it does not affect the width of the cell. FYI I'm using inline styles for mailers.
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td width="80%" style="padding: 20px 0; background-color: blue;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
<tr>
<td width="80%" style="padding: 0 55px; padding-bottom: 20px;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
https://jsfiddle.net/xmbsemje/
td's default behaviour is to fill the width of the table, so if you only have one <td> per row <tr>, it would always go full width of the table no matter what you do.
One approach is to create a table inside that td and put the width on table instead. Also padding left and right doesn't work in emails, so creating tables with defined width and centering them is the best option.
The other approach would be to have spacer cells on left and right to give you padding space. I modified your code (just the text cells with blue/red and white background) following the first approach.
Please note: I didn't fix all of your code, just change a couple to get you started
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td align="center" style="padding: 20px 0; background-color: blue;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
</table>
</td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
last td width 550px so not effect your width 80%;
so you can add width on span tag
I'm having trouble getting Outloook 2013 to render this code correctly. I'm trying to get the two columns next to each other in a 600px table in the 2nd row.
For some reason, the first column in the second row is spanning 600px and the second column is correctly to the right but is just tacked on in addition to the 600px so it spans larger than the rest of the columns.
Here is the jsfiddle of the code (sorry for the long code). https://jsfiddle.net/abdiyohan/hdpjjh5x/2/
<body bgcolor="#CCCCCC">
<table align="center" width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;">
<tr>
<td width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;" align="center">
<table style="width:600px;" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" align="center">
<tr>
<td colspan="2" style="border-top: 7px solid #a0a5a6; border-bottom: 2px solid #a0a5a6; color: #000000;width:100%;" bgcolor="#005195" height="95" width="100%">
<img align="top" style="font-family:Arial,Helvetica,sans-serif;font-size: 18px;border-style: none;color: #ffffff;" alt="" src="" height="95" width="600" border="0" />
</td>
</tr>
<tr>
<td width="75%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width:75%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"><a name="English">Lorem Ipsum</a>
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
<td colspan="1" style="border-bottom: 2px solid #a0a5a6;background-color:#efefef;padding:20px 20px 0px 20px;font-family: Arial,Helvetica,sans-serif;color:#005195; width:25%; font-size: 14pt; line-height: 28px;" align="right" bgcolor="#ffffff" valign="top" width="25%">
<div style="width:100%;height:100%;" width="100%">
<h1 style="font-size: 14pt;font-family: Arial,Helvetica,sans-serif;color:#005195;font-weight:normal;padding:0px;margin:0px;">Global Links</h1>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px;margin-top:10px;"><a style="color:#4682B4; text-decoration: none;" href="#English" target="_self">English</a>
</p>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px; margin-top: 20px;"><a style="color:#4682B4; text-decoration: none;" href="#Spanish (Latin America)" target="_self">Español (Latinoamérica)</a>
</p>
</div>
</td>
</tr>
<tr>
<td colspan="2" width="100%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width: 100%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"> <a name="Spanish (Latin America)"></a>¡Comparta su opinión!
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I know the code looks pretty messy, but I've tried so many solutions and fixes from across the internet and have come up with nothing.
This code works in OWA, which is strange and depressing, but breaks in Outlook 2013 and Outlook 2011 for Mac. Any help would be much appreciated.
The fact is that Outlook uses Word for rendering HTML markup. You can find the supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following series of articles in MSDN:
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)
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.