I'm coding an email for my employer. The font-size should be 16px. I declared it in table td, but it's being overwritten somewhere. I absolutely cannot figure out how or why. Has anyone else run into this issue?
Edit: I should specify that the undesired font-size is occurring on mobile only:
<!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="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<title>Title</title>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700);
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
#background_table {
margin: 0;
padding: 0;
width: 100%!important;
line-height: 100%!important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
height: auto;
display: block;
}
table td {
border-collapse: collapse;
vertical-align: middle;
font-family: 'Open Sans', Trebuchet, sans-serif;
font-size: 16px!important;
line-height:120%;
color: #000;
}
table td[class="column"] {
height: 100px;
width: 640px;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table[class="body_table"] {
width: 640px;
margin-top: 21px;
}
table span[class="h1"] {
font-weight:300;
font-size:23px;
color:#ff9001;
}
table td[class="top-buffer"] {
padding-top: 25px;
}
</style>
</head>
<body>
<!-- background table start -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="background_table">
<tbody>
<tr>
<td>
<!-- end of background table start -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td style="display:inline-block;" width="100%"><img src="#" alt="Logo" style="display:block;">
</td>
</tr>
<tr>
<td width="100%" height="20"> </td>
</tr>
<tr>
<td width="100%" height="100">
<img src="#" alt="Hero" style="display:block;">
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- hello/quick links -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="640" class="column" style="height:100%;font-size:20px;">Hello,
<br> Content
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
<tr>
<td width="640" class="column" style="padding-top:20px;padding-bottom:20px;">
<span class="h1">Quick Links</span>
<br>
<span style="display:inline-block; padding-bottom:5px;"><strong>LE Brochure 14min</strong></span>
<br> Got a booth at a trade show or event? This video can be set to play continuously to draw more attention and foot traffic.
<br>
<br>
<span style="display:inline-block; padding-bottom:5px;"><strong>FedEx Flyer Link</strong></span>
<br> Customizable seasonal flyers available
<br>FedEx Product Service Gateway
<br>
<br>
<span style="display:inline-block; padding-bottom:5px;"><strong>Marketing Bulletin Archive</strong></span>
<br>Intranet
</td>
</tr>
</tbody>
</table>
<!-- hello/quick links -->
<br>
<!-- marketing communications -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td>
<span class="h1">Marketing Communications</a>
</td>
</tr>
</tbody>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="148" class="column-img" style="height:100%;display:inline-block;margin-right:17px">
<img src="#" style="display:block;">
</td>
</tr>
<tr>
<td width="503" class="column-text-1"><span style="font-size:18px;display:inline-block; padding-top:10px;padding-bottom:5px;">
<strong>Top Video Testimonials</strong></span>
<br> Four 90-second videos now in our Resource Center with tips from families to families. Click here to view.
</td>
</tr>
</tbody>
</table>
<!-- marketing communications -->
<br>
<!-- new print collateral -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">New Print Collateral</span>
</td>
</tr>
</tbody>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="148" class="column-img" style="height:100%;display:inline-block;margin-right:17px">
<img src="#" style="display:block;">
</td>
</tr>
<tr>
<td width="503" class="column-text-1"><span style="font-size:18px;display:inline-block; padding-top:10px;padding-bottom:5px;"><strong>New for events and booths: Women & Alzheimer’s 24x36 foam board poster</strong></span>
<br> Now avaiblable on our FedEx Product Service Gateway. SKU1450. You can find this 24x36 poster under Programs/Women and Alzheimer’s. Here’s an informative story
from The Washington Post for more
background on why women get Alzheimer’s more than men and who is more at risk.
</td>
</tr>
</tbody>
</table>
<!-- new print collateral -->
<br>
<!-- advertising -->
<!-- brand ads -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1" style="display:inline-block;">Advertising</span>
<br>
<span style="font-size:18px;">
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td>
<span style="font-size:18px;"><strong>Brand Ads Spring/Summer 2015</strong></span>
</td>
</tr>
<tr>
<td width="350" class="column" style="height:100%;margin-right:131px">
<img src="#">
</td>
</tr>
<tr>
<td width="350" height="10">
</td>
</tr>
<tr>
<td style="height:100%;" width="350" class="column">
<img src="#">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- brand ads -->
<!-- community ads -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td style="padding-top:30px;padding-bottom:10px;">
<span style="font-size:18px;"><strong>Community Event Ads Getting Results</strong></span>
</td>
</tr>
<tr>
<td width="350" class="column" style="height:100%;margin-right:131px">
<img src="#" style="min-width:350px; display:block">
<table>
<tbody>
<tr>
<td width="350" style="padding-top:10px;padding-bottom:40px;">
Over 100 attended this Pleasant Hill film critic event. General Manger Aubrey Goo says, “The ads definitely helped.”
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="height:100%;" width="350" class="column"><img src="#" style="min-width:350px;display:block">
<table>
<tbody>
<tr>
<td width="350" style="padding-top:10px">
<br> This Moraga Dementia speaker event is dubbed a success. Marketing Director Nancy Moraga says, “This event was successful because we stuck to the basics in helping people understand what Dementia is.” She ran the ad and mailed flyers.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- community ads -->
<!-- advertising -->
<br>
<!-- talent acquisition -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">Talent Acquisition and Retention Tools</span>
</td>
</tr>
</tbody>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%" height="100">
<a href="#s" target="_blank">
<img src="#" style="width:100%;display:block;"></a>
</td>
</tr>
<tr>
<td width="100%" height="100">
<span style="font-size:18px;display:inline-block; padding-top:10px;"><strong>Nurse Acquisition Video</strong></span>
<br> Nurses are in high demand. As a company, we need to break through the stereotype of senior living to attract the best talent. This graphic links to a 2-minute video testimonial about why our nurses choose to grow careers at focusing
on what we offer that hospitals and clinics don’t. Copy and paste this graphic, with the hyperlink, into your emails when you are recruiting nurse candidates.
</td>
</tr>
</tbody>
</table>
<!-- text -->
<!-- talent acquisition -->
<br>
<!-- new expert advice -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">New Expert Advice in the Resource Center</span>
</td>
</tr>
</tbody>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td style="padding-bottom:40px;">
<span style="display:inline-block;">NEW articles sent from our Resource Center on our website can help you help your local caregivers, prospects and families. It’s easy to email the links. </span>
</td>
</tr>
</tbody>
</table>
<!-- 1 -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;">
<img src="#" style="width:100%">
</td>
</tr>
<tr>
<td width="345" class="column" style="padding-bottom:40px">
<span style="padding-bottom:5px;"><strong>A Conversation to have with your Mom that can’t wait</strong></span>
<br>President, Judy Meleliat speaks candidly about how she approached “the talk” with her own 90 year old mother and offers tips.
</td>
</tr>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;">
<img src="#" style="width:100%;display:block;">
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td width="322" class="column" style="padding-bottom:40px;">
<span style="display:inline-block; padding-bottom:5px;"><strong>Types of assisted living</strong></span>
<br> It’s a struggle to sort through all the information on “types” of senior living. This article helps to clarify the categories for a new family trying to understand.
</td>
</tr>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;">
<img src="#" style="width:100%;display:block;">
</td>
</tr>
<tr>
<td width="322" class="column" style="padding-bottom:40px;">
<span style="display:inline-block; padding-bottom:5px;"><strong>Is it time to think about assisted living?</strong><span>
<br>
What are the signs that your parent may need help? Dr. Shirley Newell shows you what to look for. How are you holding up as a caregiver?
</td>
</tr>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;">
<img src="#" style="width:100%;display:block;">
</td>
</tr>
<tr>
<td width="322" class="column" style="padding-bottom:20px;">
<span style="display:inline-block; padding-bottom:5px;"><strong> Advice on paying for assisted living</strong></span>
<br> Various ways to fund assisted living or memory care.
</td>
</tr>
</tbody>
</table>
<!-- new expert advice -->
<!-- epic speaker videos -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">EPIC Speaker Videos Released</span>
</td>
</tr>
</tbody>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="345" style="height:100%;display:inline-block;margin-right:17px;" class="column">
<img src="#" style="width:100%;display:block;">
</td>
</tr>
<tr>
<td width="423" class="column" style="padding:20px;">The first packet of EPIC speaker DVD’s are in the General Manager’s hands for all-employee viewing. These videos aim to inspire with messages from world class athletes, politicians, physicians and speakers. This month we suggest you start with
the uplifting message by world record setting swimmer, Diana Nyad recently seen on <em>Dancing with the Stars!</em>
</td>
</tr>
</tbody>
</table>
<!-- epic speaker videos -->
<!-- upcoming events -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">Upcoming Events/Holidays</span>
</td>
</tr>
</tbody>
</table>
<table width="800" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<!-- <tr>
<td width="100%" height="10"> </td>
</tr>
-->
<tr>
<td width="100%" height="100">
<span style="font-size:17px"><strong>
May is: Physical Fitness Month / Jewish American Heritage Month</strong></span>
<table>
<tbody>
<tr>
<td>
<ul style="line-height: 150%; width: 582px;">
<li style="list-style-type:none; padding-left:10px;background-color:#ededed">May 10th - <span style="font-weight:300">Mother’s Day</span> </li>
<li style="list-style-type:none;padding-left:10px;">May 25th - <span style="font-weight:300">Memorial Day</span> </li>
<li style="list-style-type:none; padding-left:10px; background-color:#ededed">June 6th - <span style="font-weight:300">D-Day</span></li>
<li style="list-style-type:none;padding-left:10px;">June 14th - <span style="font-weight:300">Flag Day</span></li>
<li style="list-style-type:none; padding-left:10px; background-color:#ededed">June 21st - <span style="font-weight:300">Father’s Day</span></li>
<li style="list-style-type:none;padding-left:10px;">June 21st - <span style="font-weight:300">Alzheimer’s Association Longest day (click below for details)</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- alzheimer's -->
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%" height="10"> </td>
</tr>
<tr>
<td width="100%" height="100">
<img src="#" style="width:100%;display:block;">
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- alzheimer's -->
<!-- prior -->
<table width="800" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%" height="10"> </td>
</tr>
<tr>
<td width="100%" height="100" style="padding:20px;">
<span style="display:inline-block;padding-bottom:5px">
Prior: If you are doing something in your community for the Longest Day, please email Director of Public Relations with a brief description of your plan as soon as you have it finalized.
</span>
<br> During your event, please take photos and send them to John so that we can post on social media and/or send to media to help spread the word. We’re proud of you and your residents. Let us brag.
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- prior-->
<!-- upcoming events -->
<!-- watch out for upcoming events-->
<table width="800" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%" height="10"> </td>
</tr>
<tr>
<td class="top-buffer">
<span class="h1" style="display:inline-block;line-height:120%;">WATCH FOR OUR MONTHLY MEDIA REPORT COMING SOON!</span>
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- watch out for upcoming events-->
<!-- footer -->
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end of footer -->
<!-- end of background table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
Line 42: font-size: 16px!important; needs a space between the x and !
but also, gmail won't read your style tag. that's why it's standard practice in email to put your font stylings in your <td> as well as an enclosed <font> tag with the face attribute as well as all the style="" CSS from the <td> (it helps with Windows Phone and some versions of Outlook that need a few reminders to render CSS)
Related
I'm working on a responsive email template, and I really would like a table layout for featured products, 3x2 on desktop, 2x3 on mobile.
Currently, I am using a table with cells that change to display as inline-block for mobile clients. However, this breaks in Outlook and Thunderbird, as they display all cells in a single row. I have tried floating the elements, but again they break.
Table Grid 3x2 to 2x3
CSS
#media screen and (max-width: 600px) {
.stack2 {
width: 50% !important;
}
}
.stack2 {
display: inline-block;
box-sizing: border-box;
}
HTML
<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<!-- Product #1 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #2 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #3 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #4 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #5 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #6 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
</tr>
</table>
Don't use table cells for this. Cells will continue to stack side by side in a row and that is their natural and intended behaviour.
The only way for a table cell to appear underneath others, would be in another row.
Your implementation goes against HTML logic.
I would go with tables for this instead. That way they will easily stack and rearrange depending on the width you give them. Just bear in mind that you will need to use ghost tables to make the tables sit side by side in Outlook.
Here is a loose example (Ghost tables included) for you to adapt to work for you:
<table border="0" cellspacing="0" cellpadding="0" class="FullWidthOnMobile" style="width:600px;">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td>
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td>
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Media queries I used. Again adapt these as I named for simplicity of understanding what I'm doing:
#media only screen and (max-width:600px){
.FullWidthOnMobile{width:100%!important;min-width:100%!important;}
.HalfWidthOnMobile{width:50%!important;min-width:50%!important;}
}
I am trying to migrate a webforum where I don't have control over database etc and uses Scrapy to pick the pieces. It is based on an old phpBB forum 2.x.
It is not very well structured so a few challenges.
I now have a HTML string where I need to remove surrounding <td></td>, <span></span>and the Report link at bottom
Starting with:
<td colspan="2"><span class="postbody"></span>
<table width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
<tr>
<td><span class="genmed"><b>Some wrote :</b></span></td>
</tr>
<tr>
<td class="quote">
<table width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
<tr>
<td><span class="genmed"><b>Another wrote:</b></span></td>
</tr>
<tr>
<td class="quote">Just for test
a link
</td>
</tr>
</table>
<span class="postbody">
<br>
<br>
Test quote #1</span>
</td>
</tr>
</table>
<span class="postbody">
<br>
<br>
Test quote #2<br>
Another link: linktext<br>
_________________<br>/ author
<br>
text<br>
<div align="right">[ Rapportera
] </div>
</span><span class="gensmall"></span>
</td>
Wanted result:
<table width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
<tr>
<td><span class="genmed"><b>Some wrote :</b></span></td>
</tr>
<tr>
<td class="quote">
<table width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
<tr>
<td><span class="genmed"><b>Another wrote:</b></span></td>
</tr>
<tr>
<td class="quote">Just for test
a link
</td>
</tr>
</table>
<span class="postbody">
<br>
<br>
Test quote #1</span>
</td>
</tr>
</table>
<br>
<br>
Test quote #2<br>
Another link: linktext<br>
_________________<br>/ author
<br>
text<br>
Any tips?
Why not simply do
html = html.strip('<td colspan="2"><span class="postbody"></span>')
and
html = html.strip('</td>').strip().strip('</span>')
I am in the process of making a custom html template but cannot wok out how to make interior padding on a column (the ones with the 'call to action' button)
I have been trying to insert a small td with a width before the content but it breaks the column.
The code I have is below (apologies for the volume) but I can't work out exactly where to cut it back without breaking it.
<table width="650" style="background-color: #077ec3" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="2 Column With IMAGE + TITLE + DESC + READ MORE" style="table-layout:fixed;">
<tr>
<td height="15" class="fix_height"> </td>
</tr>
<tr>
<td class="pad_side" >
<table width="310" border="0" cellspacing="0" cellpadding="0" align="left" class="wrapper">
<tr>
<td align="center" valign="top">
<table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td width="45" class="hide"> </td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product1_img">
</td>
</tr>
<tr>
<td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
</tr>
<tr style="background-color: #ffffff">
<td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;" mc:edit="product1_title">Blog Post</td>
</tr>
<tr>
<td height="8" style="line-height:1px;font-size:1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;background-color: #ffffff;font-size:13px;line-height:20px;color:#333333;" mc:edit="product1_description">Text block 1</td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
</tr>
<tr mc:hideable>
<td height="43" style="background-color: #ffffff" valign="top">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
Call to action
</td>
</tr>
<tr>
<td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="line-height:1px;font-size:1px;" class="hide"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="310" border="0" cellspacing="0" cellpadding="0" align="right" class="wrapper">
<tr>
<td align="center" valign="top">
<table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top" class="pad_top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product2_img">
</td>
</tr>
<tr>
<td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
</tr>
<tr>
<td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;background-color: white;" mc:edit="product2_title">Blog Post 2</td>
</tr>
<tr style="background-color: white;">
<td height="8" style="line-height:1px;font-size:1px;" > </td>
</tr>
<tr>
<td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:13px;line-height:20px;color:#333333;background-color:#ffffff;" mc:edit="product2_description">Text block 2</td>
</tr>
<tr style="background-color: white;">
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr mc:hideable>
<td height="43" style="background-color: #ffffff" valign="top">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
Call to action
</td>
</tr>
<tr>
<td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="45" class="hide"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Add padding-left to the td elements containing the text and CTA you want space.
Padding is well supported, so will work fine.
I'm building an email and have run into a problem where there seems to be automatic spacing at the bottom between two tables.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="https://imgur.com/6zCGwNt.png" />
</td>
</tr>
</table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
<tr>
<td>
<h2 style="font-weight:300" align="center">
<font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
</h2>
</td>
</tr>
<tr>
<td>
<video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
<!-- fallback 1 -->
<a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</td>
</tr>
</table>
</table>
I've included tags such as: cellpadding cellspacing border and gave them a value on zero, which I though would have solved the problem, however that wasn't the case.
Add style="display: block;" to the image. (See Why does my image have space underneath? for a deeper explanation)
A quick glance at your code shows me you're going to have a lot more problems with email clients. I would strongly suggest testing before sending using a service like Litmus.
http://litmus.com
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="https://imgur.com/6zCGwNt.png" style="display: block;" />
</td>
</tr>
</table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
<tr>
<td>
<h2 style="font-weight:300" align="center">
<font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
</h2>
</td>
</tr>
<tr>
<td>
<video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
<!-- fallback 1 -->
<a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</td>
</tr>
</table>
</table>
I want to interchange the positions of two blocks using some trick for email newsletter. I want the first block to the right and second block to the left.
Tried these:
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="right">
content 1
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
content 2
</table>
</td>
</tr>
</table>
<table>
<tr>
<td width="300" align="right" class="column">
content 1
</td>
<td width="300" align="left" class="column">
content 2
</td>
</tr>
</table>
But unfortunately none of them worked. Any other suggestion?
use dir="rtl" on container table and dir="ltr" on the interior tables or tds. This makes it so that the container reads the last table as the beginning and displays on left, but when stacked, it still stacks based on order of tables inside parent.
see below:
<table dir="rtl" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="right">
content 1
</table>
<table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="left">
content 2
</table>
</td>
</tr>
</table>
<table dir="rtl">
<tr>
<td dir="ltr" width="300" align="right" class="column">
content 1
</td>
<td dir="ltr" width="300" align="left" class="column">
content 2
</td>
</tr>
</table>