I'm doing a newsletter in HTML and GMAIL is always displaying a border on the following table :
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 20px 0;margin:20px 0 20px 0;height:150px;">
<table border="0" cellpadding="0" cellspacing="0" width="60%">
<tr>
<td align="center" style="padding: 20px 0 20px 0; color: #000000; font-family:Helvetica,verdana,sans-serif;border-top:5px solid;border-bottom:5px solid;solid;border-color:#000000;">
<span style="font-size:24px;padding: 0 0 0 0;color:#000000;"><b>THE MILAN DESIGN WEEK CONTINUES IN BRERA !</b></span>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" style="padding: 10px 20px 20px 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<img src="DCW_RAW_1.jpg" alt="DCW éditions lampes Gras at Raw Brera" width="560" height="382" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
Could anyone explain me why ?
Here is a JSFiddle of the code
JSFIDDLE
Thanks a lot !
Related
Any one can help me with this. I don't get why my text is justified but not centered. On big screens it is fine, but on the iPhone screen it is justified but slightly to the left of the screen. How can I center the text and make it justified at the same time? Please help me rectify the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<!-- DELETE AND REPLACE WITH YOUR OWN TITLE IF NOT USING MAILCHIMP -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#media (max-width: 700px){
.responsive{
width:100% !important;
padding-left:2% !important;
padding-right:2% !important;
text-align:center-justify !important;
margin-left:auto !important;
margin-right:auto !important;
}
} #media (max-width: 700px){
.height{
height:auto !important;
text-align:center !important;
}
} #media (max-width: 700px){
.responsive img{
width:100% !important;
height:auto !important;
text-align:center !important;
}
} #media (max-width: 700px){
*{
font-size:12px;
}
}</style></head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff">
<!-- START SECTION ONE -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
<tr>
<td align="center" style="padding:0px 0px 0px 0px;">
<table align="center" style="width:100%;max-width:620px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" style="width:100%;margin-left:auto;margin-right:auto;">
<tr>
<td width="100%" align="right" style="padding:10px;text-decoration:none;color:#000000;font-size:10px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;">
</td>
</tr>
<tr>
<td width="100%" align="center" style="padding:0px 0px 0px 0px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/8522c4a9-c0fd-445f-9e6a-413d2fb16b7b.jpeg" width="90%" border="0" alt="logo.png">
</td>
</tr>
</table>
<table align="center" style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0" class="responsive">
<tr>
<td align="center" width="100%" style="padding:10px 10px 10px 10px;font-size:14px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:20px;" class="responsive">
<!-- your navigation bar below -->
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about">
ABOUT US
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about#!contact">
BROKERS
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/home#!contact">
CONTACT
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="www.">
PROPERTIES
</a>
<!-- your navigation bar above -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END SECTION ONE -->
<!-- START SECTION TWO -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
<tr>
<td align="center" style="padding:20px 0px 10px 0px;">
<table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!----------------------- PHOTO 1 ----------------------->
<table align="center" style="width:100%;height:auto;" class="responsive">
<tr>
<td width="100%" align="center" style="padding:0px 0px 0px 0px;" class="responsive padding-bottom-image">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/e45c27ca-a768-464b-8f17-cca76f8ff0af.gif" width="600" height="280" alt="gif">
</td>
</tr>
</table>
<!----------------------------- PHOTO 1 ----------------------->
<table align="center" style="width:100%;min-width:250px;margin-left:auto;margin-right:auto;" class="responsive height">
<tr>
<td align="center" style="padding:20px 0px 0px 0px;font-size:20px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:2px;" class="responsive padding">
TIPS FOR INSTAGRAM
</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
<tr>
<td align="justify" style="font-size:14px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0px 0px 0px;" class="responsive">
Did you know that in 2017 Instagram saw the fastest user growth rate in its
history — instead of slowing down, it’s actually growing faster these days. Instagram is the platform to beat right now. People are there, the growth is there, the
engagement is happening, and the creative and advertising tools are available to all.
</td>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
<tr>
<td align="center" style="padding:30px 0px 10px 0px;font-size:15px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
<hr style="width:30px;background-color:#707070;color:#707070;height:0px;">
LET'S MEET | DISCUTONS
</td>
</tr>
<tr>
<td align="center" style="font-size:12px;line-height:10px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0 20px 0;" class="responsive">
emailadress
<!-- END SECTION FOUR -->
<!-- START SECTION FIVE -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;">
<tr>
<td align="center" style="padding:20px 0px 0px 0px;">
<table style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" style="width:90%;" class="responsive">
<tr>
<td align="center" style="font-size:12px;line-height:16px;font-family:Verdana, Helvetica, Arial, sans-serif;color:#333333;padding:15px 0 5px 0;">
© 2018. Mellor Group, All rights reserved.
</td>
</tr>
<tr>
<td align="center" style="font-size:12px;line-height:16px;font-family:Verdana, Helvetica, Arial, sans-serif;color:#333333;padding:5px 0 15px 0;">
</td>
</tr>
</table>
<!-- SOCIAL ICONS -->
</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 20px 0px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/0c0a64f4-17ae-4251-8e57-c0f132bd1453.png" width="25" height="25" alt="facebook icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/121a7d4d-aff4-46db-b815-7ba26a405185.png" width="25" height="25" alt="facebook icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/4ef59692-55f3-4b8f-a966-5290c968d50a.png" width="25" height="25" alt="linkedin icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/1eeeed4b-1377-4f25-89f0-e87215193ac5.png" width="25" height="25" alt="instagram icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/36510e9f-1dc7-4f88-b29c-3d7c0d6d263b.png" width="25" height="25" alt="twitter icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/9625317f-135b-4d08-bf8f-f242958c85cd.png" width="25" height="25" alt="phone">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- END SOCIAL BUTTONS -->
</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>
I expanded your code snippet to full screen and inspected it with the developer tools window, and I noticed that this <td> element is taking up space on the right side of the screen, which seems to be what is causing your other elements to shift off-center:
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
I tried just deleting that element, and it seemed to do the trick. The element is nested inside this <tr> element along with your paragraph of text:
<tr>
<td align="justify" style="font-size:14px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0px 0px 0px;" class="responsive">
Did you know that in 2017 Instagram saw the fastest user growth rate in its
history — instead of slowing down, it’s actually growing faster these days. Instagram is the platform to beat right now. People are there, the growth is there, the
engagement is happening, and the creative and advertising tools are available to all.
</td>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
Here is a screenshot of that element highlighted:
I'm trying to create an Email HTML template using XHTML document.
I was trying to test the document using "Markup Validation Service" but without success. I got 2 errors and I was trying to figure it out and did some changes but it doesn't fix.
This is my code:
<!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" />
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid #cccccc;">
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 2px 2px 2px 2px;">
<img src="img/coffee2.jpg" alt="Welcome to Cricket" width="600" height="400" style="display: block;" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 10px 30px 20px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 20px 0; font-family:lato; line-height: 140%;">
We're so happy!!!
<br/>
We founded this because we wanted to create a trustworthy app.
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/testimonial-bg.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato; line-height: 140%;">
<h4>Extension</h4>
<a href="http://www.google.com"><button style="margin:33px 0 0 15px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 14px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">GET THE EXTENSION</button></a>
</td>
</tr>
</table>
</td>
<td style="font-size: 0; line-height: 0;" width="20">
</td>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/technology-1940695_1920.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato;line-height: 140%;">
<h4>Application</h4>
<a href="http://www.google.com"><button style="margin:10px 0 0 50px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 16px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">GET THE APP</button></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#363940" style="padding: 30px 30px 30px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<td width="90%" style="font-family:lato; color:#ffffff;">
® Copyright © 2017 <br/>
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="http://www.facebook.com/">
<img src="img/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
What am I missing ?
Thank you.
The Markup Validation Service says:
Line 84, Column 70: document type does not allow element "td" here;
assuming missing "tr" start-tag
A <td> must be inside of a <tr>.
<table>
<tr>
<td></td>
</tr>
</table>
This is the HTML.
<!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" />
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid #cccccc;">
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 2px 2px 2px 2px;">
<img src="img/coffee2.jpg" alt="Welcome to Cricket" width="600" height="400" style="display: block;" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 10px 30px 20px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 20px 0; font-family:lato; line-height: 140%;">
We're so happy!!!
<br /> We founded this because we wanted to create a trustworthy app.
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/testimonial-bg.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato; line-height: 140%;">
<h4>Extension</h4>
<a href="http://www.google.com">
<button style="margin:33px 0 0 15px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 14px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">
GET THE EXTENSION
</button>
</a>
</td>
</tr>
</table>
</td>
<td style="font-size: 0; line-height: 0;" width="20">
</td>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/technology-1940695_1920.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato;line-height: 140%;">
<h4>Application</h4>
<a href="http://www.google.com">
<button style="margin:10px 0 0 50px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 16px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">
GET THE APP
</button>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#363940" style="padding: 30px 30px 30px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="90%" style="font-family:lato; color:#ffffff;">
® Copyright © 2017 <br />
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="http://www.facebook.com/">
<img src="img/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have been trying to update our email from using a bunch of images to just code but I'm hitting an issue with using tables. I can't seem to get the 's to be as narrow as I need them to be. All I want is to have them be fairly close to each other and aligned left. I've never worked with tables before, but I read up on them and everything seems to be correct but nothings working. Any suggestions on what I need to edit? PS This will be seen a lot on Outlook so that is a big factor.
http://codepen.io/Mdadedesign/pen/qavwkg
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes; background-color:pink; width:300px'>
<td width="90" style="background-color:lightblue;">
<table width="90" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Android App
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td width="70" style="background-color:cornsilk;">
<table width="70" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#075aa0" width="70" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Apple App
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td width="70" style="background-color:lightblue;">
<table width="70" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Refer A Friend
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
You're talking about the three buttons at the bottom, the "Android App", "Apple App" and "Refer a friend", right?
If you look at the styles you have, you have both a width set on the table, and a width in px set in the style for each button. Not that much to be done with the total width, really, but you can change the first one from 90px to 70px, the second one from 90px to 60px, and the last one from 90px to 80px. If you want to make them smaller than that, you'll have to put them under eachother, or reduce the size of the text and the clickable area.
I am working on an e-mail template that includes 2 links to a website and an e-mail address. They are both of varying widths and have it setup so that they're both beside each other and centred down the middle.
Recently ran into a problem when testing with Outlook and saw that the boxes were not centred and rather pushed to the left and right.
Here are some screenshots of what is happening:
Browser / Other E-mail Clients:
Outlook / Word Templating Engine:
The Code:
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
<table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
<tr>
<td align="center">
<div class="templateEdit" id="contact_links">
<table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="http://www.domain.com">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" height="20" align="center" valign="middle">
<a href="http://www.domain.com/">
<img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
<table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" align="center" valign="middle">
<a href="mailto:newaccounts#domain.com">
<img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport#domain.com">Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
Does anyone have any ideas on how I can format it so that it works appears in Outlook as it does in the 1st image?
Specify the width for div and td wherever needed. It should work, outlook mail client will set the element width to 100% with reference to body if not specified.
I have the following HTML:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#C5C5C5">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628618/image01_et7dqm.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT ABOUT SOMETHING YET TO BE CONFIRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images - text left -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td align="right">
<a href="#"><img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" border="0" style="border-radius: 0px; width: 20px; display: block;" class="deviceWidth" />
</td>
</tr>
</table>
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#E1E1E1">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628616/image1.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT YET TO BE CONFRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
which renders as follows
As you can see at the bottom I have a triangle which I'm trying to position so it overflows on to the next box, unfortunately I can not for the life of me get it to sit correctly, i.e the white space between the dark shade and lighter shade of gray to dis-appear can someone give me a hand please the end result is to look like this :
First of all it is recommended not to use tables for formatting page sections. In this case you can set the Parent of triangle as a relative positioned element with height of 0px and position triangle as absolute element. So:
<div class="deviceWidth" style="width:580px;position:relative;height:0;margin-right:auto;margin-left:auto;">
<img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" style="border:0;position:absolute;top:0;right:20px;border-radius: 0px; width: 20px;" class="deviceWidth">
</div>
also please note that :
remove the display:block from image
set border:0 inside styles not as a separate attribute
I have added margin-right:auto and margin-left:-auto to align div in center of screen