Working with provided HTML and I'm looking to figure out why there is a gap in Outlook 07,10,13. Renders fine in other Outlook versions. The gap varies between outlook version, but a gap nonetheless
Screenshot:
HTML Email for review:
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td height="10" colspan="3">
<p style="font-weight:bold; color:#0018A8; font-size:13px">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="10" height="6">
</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="border-style: none">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132">
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's
maiden name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please click here to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
</html>
The pasted example shows the gaps more extremely than I even see in litmus tests, but not showing in Chrome when I test the HTML locally.
FIX was to add inline CSS to the images and remove the <tbody>
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="padding:0;margin:0;display:block;border-style:none;">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
</table>
</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's maiden
name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please <a href="http://payments.53.com/forms/SubscriptionManagement"
target="_blank">click here</a> to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
Related
I am helping a friend build her website. I am trying to install Recaptcha page on her website because her HTML is really old. I accidentally deleted the html code for her contact us page so now I am trying to rebuild the page. It's very basic but for the life of me, I can't move the contact us form to the center of the page. Could someone send some code for me to set the "contact us" form to the center of the page?
I pasted this code to build a form:
<div class="container">
<div style="text-align:center">
<h2>Contact Us</h2>
</div>
<div class="row">
<div class="column">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<label for="email">Email</label>
<input type="text" id="email" name="Email" placeholder="Your email...">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
Because I lost the original contact us page I copied the code from one of her other pages and am trying to find where I can implement the form on the page. This is the page code I copied on the contact us form""
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fidelis Design & Construction, LLC</title>
<style type="text/css">
<!--
body {
background-image: url(BGs/RH.png);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {
background-repeat: no-repeat;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.689em;
color: #FFFFFF;
}
.style9 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.689em;
color: #333;
}
.style6 {
color: #000033;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration:none;
}
a:hover {
color: #A52113;
}
.style7 {
color: #A52113;
font-weight: bold;
}
.style10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8125em;
color: #333;
}
.style11 {
color: #A52113;
font-size: medium;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A52113;
font-weight: bold;
}
</style>
</head>
<body>
<table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="270" align="center" bgcolor="#000033"><img src="BGs/logo.jpg" alt="Fidelis Design and Construction" width="135" height="189" border="0" longdesc="http://www.fidelisdc.com" /></td>
<td width="845" rowspan="5" align="left" valign="top"><table width="775" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="93"> </td>
<td width="137"> </td>
<td width="170"> </td>
<td width="75"> </td>
<td width="175"> </td>
<td width="125"> </td>
</tr>
<tr>
<td align="left" valign="top"><img src="BGs/sdvosb_logo_alt.png" width="93" height="89" /></td>
<td colspan="5"><table width="682" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="5" align="right" valign="bottom" background="BGs/HD.png"><table width="682" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"></td>
</tr>
<tr>
<td align="right"><span class="style3"> <span class="style4"><span class="style7">Corporate Headquarters :</span></span> 408 East 4th Street, Suite 308, Bridgeport, PA 19405. <span class="style4"><span class="style7">P</span></span> (610) 277-7094 <span class="style4"> <span class="style7">F</span></span> (610) 277-7095<span class="style4"> </span></span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
<td colspan="4" align="right" valign="bottom"><span class="style6">Home | About Our Founder | Current Projects | Service Strategy | Contact Us </span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="BGs/SS.png" width="129" height="16" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="20" colspan="6" align="left" class="style10">At FDC we are operations driven, providing our clients with exceptional services and expertise, resulting in the highest quality projects </td>
</tr>
<tr>
<td height="20" colspan="6" align="left"><span class="style10">delivered in the safest manner. </span></td>
</tr>
<tr>
<td height="20" colspan="6" align="left" class="style10">FDC seeks to develop loyal, long-term client relationships which result in desired profits, strategic partnerships and opportunities.</td>
</tr>
<tr>
<td height="20" colspan="6" align="left"> </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><strong>Our services include:</strong></td>
<td colspan="2" rowspan="9" align="right"> </td>
</tr>
<tr>
<td height="20" colspan="4" align="left"><span class="style11">• </span><span class="style10">Construction capabilities using state-of-the-art technology & equipment</span></td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Comprehensive estimating and pricing procedures</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Critical path sequencing</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Design-Build Contracting Capabilities</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Materials procurement </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Project management </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Subcontractor prequalification </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Value engineering and constructability reviews</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
</tr>
<tr>
<td height="135" align="center" bgcolor="#EFEFEF"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="39" colspan="2" background="BGs/PDFHeader.png" class="style1"> </td>
</tr>
<tr>
<td width="45" align="center"><a href="PDF/philadelphia_weekly_rbennett.pdf" target="_blank" ><img src="BGs/pdf_icon.jpg" width="32" height="33" border="0" title="Click to download / open this document" /></a></td>
<td width="115"><img src="BGs/Readmore.png" width="113" height="26" border="0" title="Click to download / open this document" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
</tr>
<tr>
<td height="265" align="center" bgcolor="#000033"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170" height="25" background="BGs/Contact.png" class="style1"> </td>
</tr>
<tr>
<td height="18" align="left"><span class="style12">Corporate Headquarters :</span></td>
</tr>
<tr>
<td height="18" align="left" class="style2">408 East 4th Street</td>
</tr>
<tr>
<td height="18" align="left" class="style2">Suite 308</td>
</tr>
<tr>
<td height="18" align="left" class="style2">Bridgeport, PA 19405</td>
</tr>
<tr>
<td height="18" align="left"><span class="style2"><strong>P</strong> (610) 277-7094</span></td>
</tr>
<tr>
<td height="18" align="left" class="style2"><strong>F</strong> (610) 277-7095</td>
</tr>
<tr>
<td height="18" align="left" class="style2">--------------------------------------</td>
</tr>
<tr>
<td align="left"><img src="BGs/Email.png" width="103" height="52" border="0" title="Contact Us"/></td>
</tr>
<tr>
<div class="container">
<div style="text-align:right">
<h2>Contact Us</h2>
</div>
<div class="row">
<div class="column">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<label for="email">Email</label>
<input type="text" id="email" name="Email" placeholder="Your email...">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
<td> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" bgcolor="#000033"><table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="524" align="left"><span class="style9">Copyright © 2015, Fidelis Design & Construction, LLC. All Rights Reserved.</span></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
You can apply display: flex; and justify-content: center;" to the column class that's wrapping you form. I would however, suggest adding a differently named class to it to avoid interference with the column class just before it. e.g. <div class="column form-wrapper">
Hi I'm trying to resize the blue button in the header image, but I can't change its width. It's in a table format inside a <td> i tried using td width also it didn't work. It looks like its fixed to 640px. I tried with style width also but it still didn't work. How else can I edit the width of the blue button? See attached image
As you can see the header image is what im trying to achieve
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should change you code
From
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
to
<td width="50" height="40" bgcolor="#202020" align="center">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;background: #008fd3;width: 20%;position: absolute;padding: 8px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" rel="noopener" data-sap-hpa-ceimo-ioi-link="73554900100700000840" data-mce-href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" data-mce-style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" data-mce-selected="1">Register today</a>
</td>
Hope can help you
You need to remove display:block
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0" style="vertical-align:top; width: 201px; height: 36px;"></a>
</td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;">
<a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a>
</td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;">
<a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="left" width="50" height="40">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; background:#008fd3; display: inline-block;
line-height: 40px;
padding: 0 1em;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off"
target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect
brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>,
<strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s
being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and
learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019"
target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
simple My code Replease To Your Code
The below images (Scenario A, Scenario B) are taken from GMAIL app for same newsletter. The only difference is the highlighted portion in Scenario B is an image. Ideally I want scenario B (its properly aligned and takes 600 px width), but how can I achieve it with text itself (as shown in Scenario A)?
The problem I am facing is its getting wrapped like a mobile layout and because of that the whole template width is getting reduced.
Scenario A Scenario B
The difference in code for Scenario A & Scenario B
Scenario A:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="47%" valign="middle" style="padding:10px 0 10px 20px">
<div>
<img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform.">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Scenario B:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="340" valign="middle" style="padding:10px 0 10px 10px">
<div> <span style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">Your Online Professional<br />IT Career Development Platform.</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Please help how can I solve this issue.
These td's should be placed within a table that's 600px wide and thát one should be placed within a table that's 100% wide.
Hope this helps. Otherwise, please post more of your code, so we can adjust it.
please use following code:
<table align=center" width="100%">
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px;font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">
Your Online Professional<br />IT Career Development Platform.
</td>
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px"><img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform."></td>
</table>
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.
how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>