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:
Related
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 have an email that works fine in every email client except Outlook 2013. In Outlook 2013 the email stretches full width when it should only be 600px wide.
I've tried searching everywhere for a fix but with no luck!
Here is the 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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Scientific Data</title>
<style type="text/css">
body {width:100% !important;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
body { margin: 0; padding: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#666666;}
table td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
p { margin: 0; padding: 0; margin-bottom: 0; }
ul { margin: 0; }
a, img {border:none;}
.symbolfix img {width:9px !important;height:9px !important;}
a {color:#363636;text-decoration:none;} a {-webkit-tap-highlight-color: rgba(0,0,0,0);color:#006699; !important}
.appleLinks a {color:#666666; text-decoration:none;} /* Stop iOS making times and dates blue */
.ExternalClass * { line-height: 100%; }
#media (max-width:480px) {
table[class="wrapper"], td[class="wrapper"] {width:320px !important;}
table[id="header"]{width:100% !important;}
img[class="banner"], img[class="headercell"]{width:100% !important; height:auto !important;}
img[id="img-280"]{width:280px !important; height:auto !important; padding:0px !important;}
table[id="col-left"],table[id="col-center"], table[id="col-right"]{width:100% !important; height:auto !important; }
table[id="col-one"],table[id="col-two"],table[id="col-full"]{width:100% !important; height:auto !important;}
table[id="col-half"]{width:80% !important;}
td[class="hide"]{display:none !important;}
img[id="small-img"]{width:100% !important; height:auto !important;}
td[id="social-media"]{width:100% !important;padding:30px 0px 20px 0px !important;}
table[id="prod-icons"]{width:25% !important;}
td[id="gutter"]{width:25px !important;}
td[id="gutter-small"]{width:10px !important;}
td[id="break-top"]{border-top:1px solid #cccccc;}
img[id="cont-title"]{width:auto !important; height:50px !important;}
}
</style>
</head>
<body bgcolor="#e7e7e7">
<!-- 100% table -->
<table width="100%" bgcolor="#e7e7e7" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" bgcolor="#e7e7e7" class="wrapper" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600" align="center" class="wrapper">
<br />
<!-- wrapper table -->
<table class="wrapper" width="600" bgcolor="#e7e7e7" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td class="wrapper">
<table class="wrapper" width="600" bgcolor="#e7e7e7" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td align="center" valign="top" bgcolor="#cdcdcd"><!-- preheader table --> <!-- end of preheader table -->
</td>
</tr>
</table>
</td>
</tr>
<!-- header table -->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" bgcolor="#274a5c"><img class="headercell" src="http://fastart.nature.com/1989_2015/header.jpg" alt="Scientific Data" width="600" height="84" border="0" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:18px;line-height:22px;font-weight:bold;color:#b01b22;display:block;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" bgcolor="#ef763d" style="height:10px;font-size:10px;line-height:10px;">
</td>
</tr>
<!-- end of header table -->
<!--Title-->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" align="left" valign="top" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 22px; line-height: 28px; color: #363636; padding:30px 20px 20px 20px;"><strong>Scientific Data</em> おすすめのコンテンツ – Epidemiology
</strong>
</td>
</tr>
<!-- end of Title -->
<!--main body-->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" align="left" valign="top" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 18px; color: #363636; padding:0px 20px 30px 20px;">
<em>Scientific Data</em> は価値のある研究データセットを掲載するオープンアクセスジャーナルです。研究データの広範囲な再利用を促進するとともに、データを公開した研究者にクレジットを与えることを目指します。<em>Scientific Data </em>は科学のすべての領域を対象とし、データのサイズや、研究主体の規模（主要な研究コンソーシアム、研究室、個人単位）に関わらず、投稿を受け付けています。<br /><br />
<em>Scientific Data</em> で出版されるData Descriptors は、科学的なデータセットをくわしく記述する新しいタイプのコンテンツで、公開されたデータを読者が理解しやすく、再利用しやすい形で構成されています。<br /><br />
あなたのご関心分野で、最近特に注目されているData Descriptorを選んでご紹介します。是非ご閲覧ください。また、最新の研究成果をお届けする <em>Scientific Data</em> コンテンツアラートに是非ご登録ください。
</td>
</tr>
</table>
</td>
</tr>
<!-- end of body -->
<!--Button -->
<tr>
<td width="600" align="center" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;">
<table bgcolor="#ef763d" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;line-height:20px;color:#ffffff;padding: 10px;"><strong><a href="http://www.nature.com/nams/svc/myaccount/save/alert?list_id=329&WT.mc_id=EMI_SCIDATA_1508_EpidemiologyJAPANESE&WT.i_dcsvid=%%LIST_ID%%-%%RECIPIENT_ID%%&WT.ec_id=MARKETING" target="_blank" style="color:#ffffff;text-decoration:none;"> Sign up for e-alerts
</a></strong>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of Button -->
<!-- Sub title -->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:18px;color:#363636;padding:0px 20px 20px 20px;"> </td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:18px;color:#363636;padding:0px 20px 20px 20px;"><strong>編集部が選ぶ Data Descriptors:</strong>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of Sub title -->
<!-- Row 1 -->
<tr>
<td align="left" valign="top" width="600" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="gutter" width="20" align="left" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;"> </td>
<td align="left" valign="top" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#666666;"><b>The global compendium of <em>Aedes aegypti</em> and <em>Ae. albopictus</em> occurrence</b><br /><br /><b>A review of epidemiological parameters from Ebola outbreaks to inform early public health decision-making</b><br /><br /><b>A global compendium of human Crimean-Congo haemorrhagic fever virus occurrence</b>
</td>
<td id="gutter" width="20" align="left" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;">
</td>
</tr>
<tr>
<td id="bottom-height" height="30" colspan="3" align="left" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;">
</td>
</tr>
</table>
</td>
</tr>
<!-- End of Row 1 -->
<!-- NPG colour bar-->
<tr>
<td width="600" align="right" valign="middle" bgcolor="#ffffff">
<table id="container" width="100%" align="right" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="right" valign="middle" bgcolor="#ffffff" style="padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px">
<img src="http://fastart.nature.com/srep/npg_logo.gif" alt="Nature Publishing Group" width="184" height="35" border="0" align="right" style="display:block;" />
</td>
</tr>
</table>
</td>
</tr>
<!-- end of NPG colour bar -->
<!-- footer-->
<tr>
<td width="600" class="wrapper" bgcolor="#e7e7e7">
<table class="container" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#e7e7e7" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:9px;line-height:13px;color:#666666;">
<tr>
<td width="100%" align="left" bgcolor="#e7e7e7" style="padding:25px;">As a registered user of Nature Publishing Group's Web sites, our database indicates that you have opted-in to receive product information and special offers. If you no longer wish to receive these e-mails or to discontinue all e-mail services from Nature Publishing Group please update your online account. <span style="color:#666666;">Modify My Account</span> (Log in to be recognised as a <span style="color:#666666;">Nature.com</span> registrant). <br />
<br />
For further information on <span style="color:#666666;">technical assistance</span> | <span style="color:#666666;">print subscriptions</span> | <a style="color:#666666;" href="mailto:feedback#nature.com" target="_blank"><span style="color:#666666;">other enquiries</span></a>. <br />
<br />
Nature Publishing Group | Principal offices: <span style="color:#666666"><a href="http://www.nature.com/npg_/contact/offices.html?WT.mc_id=EMI_SCIDATA_1508_EpidemiologyJAPANESE&WT.i_dcsvid=%%LIST_ID%%-%%RECIPIENT_ID%%&WT.ec_id=MARKETING" style="text-decoration:none;color:#666666;" target="_blank">London | New York and Tokyo, and offices in cities worldwide including Basingstoke | Barcelona | Boston | Buenos Aires | Cairo | Delhi | Heidelberg | Madrid | Melbourne | Mexico City | Mumbai | Munich | Paris | San Francisco | Sao Paulo | Seoul | Shanghai and Washington DC. Macmillan Publishers Limited is a company incorporated in England & Wales under company number 785998 & whose registered office is located at Brunel Road, Houndmills, Basingstoke, Hampshire RG21 6XS. Nature Publishing Group | One New York Plaza, Suite 4500 | New York
| NY 10004-1562 | US </a></span><br />
<br />
<span class="symbolfix">©</span> 2015 Nature Publishing Group, a division of Macmillan Publishers Limited. All rights reserved.
</td>
</tr>
</table>
</td>
</tr>
<!-- end of footer -->
</table>
<!-- end of wrapper table -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end of 100% table -->
</body>
</html>
Please help!!
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 !
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