I've been reading and researching how to build a responsive email - the thing is I am building it using a table. I know tables are not responsive by nature; however, I've been reading up on responsive design, media queries, and such and I still cannot find a solution. Below is what I have so far. Any help would be greatly appreciated as I would like to learn how to make an email responsive.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trident Email</title>
<style type="text/css">
#media (max-width: 480px){
table,tbody,tr,td,img {
display:block;
}
div#background {
width: 400px;
}
table#container{
width:300px;
}
}
</style>
</head>
<body>
<div id="background" style="background-color:#eeee00;padding:10px 0;margin:0 320px;">
<table style="margin:0px auto;border-spacing:0px;border-collapse:collapse;text-align:center;" cellpadding="0" cellspacing="0" width="600" align="center">
<tbody>
<tr>
<td>
<table id="container" style="border-spacing:0px;border-collapse:collapse;" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2384384346-jpg/Headers_Footers/Trident_is_Coming_to_Town.jpg?t=1446144504152" width="100%" style="vertical-align:bottom;">
</td>
</tr>
<tr>
<td>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td></td>
<tr>
<td style="text-align:left;" width="65%">
<table cellpadding="5" cellspacing="10" width="100%">
<tbody>
<tr>
<td>
<div style="">
<p><span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>Date:</strong></span></p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>November 2, 2015</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>time:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>10:00AM - 2:00PM</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>location:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;line-height:1.5;"><strong>Fort Rucker Army Installation<br/>Bldg.4502, Room 303</strong></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="35%" style="text-align:right;">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2668017528-jpg/images/Outreach/James_Shiver_175px.jpg?t=1446144504152" width="100%">
</div>
<p style="text-align:left;" color="#ffffff" align="left"><span style="font-family: helvetica; color: #ffffff;" color="#ffffff"><strong>James Shiver</strong></span><br/><span style="font-family: helvetica; font-size: 13px; color: #ffffff;">334-470-9146</span><br><span style="color: #ffffff;">james.shiver#trident.edu</span></p>
</td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="80">
<div style="border-top:2px solid #9c800d;width:98%">
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Can't stop by? Visit us Online:
</p>
</div>
</td>
<td width="20"></td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);text-align:center;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td width="20"></td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
trident.edu/james
</p>
</div>
</td>
<td width="">
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
News and Events
</p>
</div>
</td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
University Blog
</p>
</div>
</td>
<td width="20"></td>
</tr>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="60">
<div>
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Trident University<br/>1212 Plaza Dr.<br/>Cypress, CA 90630
</p>
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2102317013-png/outreach_emblem-188px.png?t=1446144504152&width=80&name=outreach_emblem-188px.png" width="80" align="center">
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60"><p style="color:#ffffff;font-size:13px">Unsubscribe</p></td>
<td width="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You need to include an !important in the media query in the <style> so that it can override the inline styles in the email body. This allows table cells to became full width and stack on small viewports.
Here is a basic example of responsive 2-column email layout using media queries:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- META Stuff -->
<!-- CSS Reset -->
<style>
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
}
</style>
</head>
<body width="100%" bgcolor="#000000" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #000000;">
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
Column 1 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
Column 2 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>
<!-- 2 Even Columns : END -->
</table>
</center>
</body>
Full code available here
Related
I am trying to select an element in the prompt, but I am unable to switch control to the prompt.
I've tried the below code:
Alert a = driver.switchTo().alert();
WebElement e = wait.until(Expected Conditions.visibilityofElementLocated(By.xpath("locator"));
Adding HTML code
<table role="dialog" aria-labelledby="ariaLabelledBy_promptsDlg" oncontextmenu="_CWprompts.eventCancelBubble(event);return false" border="0" cellspacing="0" cellpadding="0" id="promptsDlg" style="display: block; padding: 0px; visibility: visible; position: absolute; top: 119px; left: 368px; width: 800px; height: 400px; z-index: 1005;">
<tbody>
<tr>
<td style="width:800px;height:400px;" class="dialogbox" id="td_dialog_promptsDlg" onresize="_CWprompts.DialogBoxWidget_resizeIframeCB('promptsDlg',this)" valign="top">
<table class="dlgBox2" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="0" valign="top">
<table style="height:26" class="dlgTitle" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top" style="height:26px">
<td onselectstart="return false" ondragstart="return false" onmousedown="_CWprompts.DialogBoxWidget_down(event,'promptsDlg',this,false);return false;" style="cursor:move;padding-left:10px;" width="100%" valign="middle" align="left">
<nobr>
<span id="ariaLabelledBy_promptsDlg" class="titlezone">Prompts</span>
</nobr>
</td>
<td class="dlgCloseArea" align="left" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:26px">
<td valign="middle" align="left" style="padding-right:4px;">
<div id="helpIcon_promptsDlg" "="" title="Help Contents" class="imo" style="width:16px;height:16px;background-image:url('images/main/galleries/icon16x16gallery1b.png');background-position:0px -480px;"></div>
</td>
<td style="padding-right:10px">
<div id="dialogClose_promptsDlg" class="dlgCloseBtn" title="Close window"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I am getting no such alert exception. Can someone please help me out with this?
Thanks in advance.
I’m trying to automate and select the drop down values.
2 fields are having same drop down values (i.e.). Yes and No and both field has similar HTML code . So unable to find unique Xpath in order to click on second field and it is throwing an org.openqa.selenium.ElementNotInteractableException exception. Since the tag name is not SELECT, so I couldn’t use SELECT Class.
HTML Code:
1st Field
<table id="ssl" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 36px;" cellpadding="0">
<tbody>
<tr id="ssl-inputRow">
<td id="ssl-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="ssl-labelEl" class="x-form-item-label x-form-item-label-left" for="ssl-inputEl" style="width:380px;margin-right:5px;">Use SSL to connect to NetScaler </label>
</td>
<td id="ssl-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" colspan="2" role="presentation" style="width: 100%;">
<table id="ssl-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="ssl-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1668" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="ssl-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="ssl" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1667" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1666" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
2nd Field:
<table id="isDiscovery" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 67px;" cellpadding="0">
<tbody>
<tr id="isDiscovery-inputRow">
<td id="isDiscovery-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="isDiscovery-labelEl" class="x-form-item-label x-form-item-label-left" for="isDiscovery-inputEl" style="width:380px;margin-right:5px;">Discover StoreFront hosts using this NetScaler </label>
</td>
<td id="isDiscovery-bodyEl" class="x-form-item-body" colspan="2" role="presentation" style="width: 100%;">
<table id="isDiscovery-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="isDiscovery-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1671" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="isDiscovery-inputEl" class="x-form-field x-form-text" autocomplete="off" name="isDiscovery" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1670" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1669" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Tried Xpath (but it is failing to select 2nd field)
1st field xpath:
.//*[#id='ssl-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='ssl-inputEl’]//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
2nd field xpath:
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
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)
Anyone who gets back to me on this is an absolute legend. I sincerely hope this is just a matter of being too close to the code and I am not able to see it any more. In most if not all browsers and email clients the code is rendering fine. But in GMAIL, the bottom table is blowing out the left and the content on the right hand side to the the right.
Here is a shot of it on litmus: https://betalondon.litmus.com/pub/dfe0bd6
And here is the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ENO MAGIC FLUTE e-mail</title>
</head>
<body>
<table align="center" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table width="1030px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="140" valign="top" bgcolor="#000000" style="line-height: 0px;">
</td>
<td valign="top" width="600" bgcolor="#000000">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table height="135" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="middle" border="0">
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/header2.jpg" alt="logo" width="600" height="283" border="0"/>
</td>
<td valign="bottom" border="0" width="18" height="15" bg-color="#ffffff">
<br/>
<br/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td width="310" valign="top">
<table cellpadding="0" width="300" cellspacing="4" border="0" style="margin-top: 15px; margin-left: 10px;">
<!--Title text--><tr>
<td align="left">
<span style="text-decoration: uppercase; font-family:Helvetica, Arial; font-size:14px; color:#000000; line-height:120%;">MOZART's<br/>
</span>
<span style="text-decoration: uppercase; font-family:Helvetica, Arial; font-size:25px; color:#000000; line-height:150%;"><strong>THE MAGIC FLUTE</strong></span><br/>
<span style="text-decoration: uppercase; font-family:Helvetica, Arial; font-size:14px; color:#000000; line-height:150%;">13 Sep - 18 Oct</span><br/>
</td>
</tr>
<tr>
<!--Body-text--><td align="left">
<span style="font-family:Helvetica, Arial; font-size:14px; color:#000000; line-height:120%;">
You are invited back to witness the adventure, music and emotion of one of Mozart's most stirring operas, your last chance to witness Nicholas Hytner's lavish production.<br/><br/>
Its distinctive characters, Papageno, Pamina, Sarastro and The Queen of the Night, along with magical sets, costumes and fantasy creatures, make this remarkable opera one not to be missed. Catch one of the final ten performances for what's been considered <em>'one of ENO's most magical interpretations'</em> (The Times)<br/><br/>
This time why not share the enjoyment and bring friends and family.
</span>
<br/>
<br/>
<table style="background:#e4e4e4; border: solid 1px #d7d7d7;">
<tr>
<td style="padding: 5px;">
<span style="font-family: arial, helvetica, sans-serif; color:#000000; font-size: 18px;">
Final 10 performances<br/>
Tickets from £19<br/>
Children under 16 half price<br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/booknow.png" border="0"/>
</span>
</td>
</tr>
</table>
<br/>
</td>
</tr>
</tr>
</table>
<br/><br/>
<br/><br/>
</td>
<td><img src="http://content.high50.com/emails/20012012/images/1x1.gif" width="35" height="5" border="0" /></td>
<td valign="top">
<br/>
<table width="255" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td valign="top" width="280" align="left">
<font style="font-family:arial; font-size:14px; color:#000000; line-height:1.5em; padding-left: 40px; margin-top: 15px;"><strong>BOX OFFICE: </strong></font><br/>
<span style="font-family: arial; color: #ed1c24; font-size: 18px; padding-left: 40px;">020 7845 95300</span><br/>
<span style="font-family: arial; ">
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/fbook.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/twitter.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/youtube.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/flickr.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/vimeo.png" border="0"/>
</span>
<br/>
<br/>
<img style="padding-left: 11px;" src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/listen.png" border="0"/></a>
<br/>
<span style="font-family:Georgia, arial, helvetica, sans-serif; font-size:14px; color:#999999; line-height:1.5em; font-style: italic; padding-left: 40px; float: left; text-decoration: none;">
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/arrow.png" style="float: left;" align="left" border="0" hspace="3" valign="middle" border="0"/>Overture<br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/arrow.png" style="float: left;" align="left" border="0" hspace="3" valign="middle" border="0"/>Queen of the Night<br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/arrow.png" style="float: left;" align="left" border="0" hspace="3" valign="middle" border="0"/>Papagena and Papageno</span>
<br/>
<br/>
<br/>
<br/>
</td>
</tr>
</table>
</td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table height="" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="600">
<tr>
<td valign="top">
<hr style="width: 600px; color:#6493b1; border: dotted 1px;"/>
<a href="mailto:?Subject=Book tickets to see The Magic Flute&body=Shall we go and see this opera together?: You are invited back to witness the adventure, music and emotion of one of Mozart's most stirring operas, your last chance to witness Nicholas Hytner's lavish production. Book here
#[http://www.eno.org/see-whats-on/productions/production-page.php?selected_date=13-09-2012&itemid=2130]#"><img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/forward.png" alt="forward this e-mail to a friend" width="" height="" border="0"/></a>
<span style="float: right; font-family: arial;"><strong>FOLLOW US</strong>:
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/fbook.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/twitter.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/youtube.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/flickr.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/vimeo.png" border="0"/>
</span>
<br/><br/>
<center><span style="text-align: center; font-family: arial; font-size: 20px;"><strong>ENGLISH NATIONAL OPERA</strong></span><br/><span style="text-align: center; font-family: arial; font-size: 12px;">London Coliseum, 38 St. Martin's Lane, London, WC2N 4ES BOX OFFICE: 020 78459300<br/><br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/artslottery.png" border="0"/><br/><br/>
ENO is a registered charity in England (no 257210)</span><br/><br/>
<span style="font-family: arial; font-size: 11px;">Photos: GTG/ Yunus Durukan</span> <br/>
<hr style="border:1px dotted; color:#6493b1;"><br/><br/>
Unsubscribe</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table height="90" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tr>
<td valign="top" align="center">
<br /><br />
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="140" valign="top" bgcolor="#000000"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Your HTML is invalid. Use the W3C validator service to check it. Pay special attention to errors like this:
Line 91, Column 37: end tag for "table" omitted, but OMITTAG NO was
specified
For me it worked:
1- Open Firefox with Firebug
2- Go to gmail
3- Click "Compose"
4- Right click on the textfield, and choose "Inspect element with Firebug"
5- Search the following code:
[-] <iframe id=":jo" class="Am Al editable" frameborder="0" style="padding: 0px; height: 569.5px; background-color: white;" tabindex="1">
[-] <html style="background:none transparent;min-width:0;">
[+] <head>
[+] <body id=":jo" class="editable LW-avf" style="min-width:0;" hidefocus="true" g_editable="true">
</html>
</iframe>
6- Select <body> and click Edit button
7- Paste your code between <body> and </body> (not included).
8- Close firebug
9- Send the email.
<table border="0" align="center">
<tbody>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
</tbody>
</table>
I am not good with coding. I've tried but cannot figure it out. Your help would be greatly appreciated.
// CSS:
#container {
text-align:center; // needed if you expect IE 5
}
.centered {
margin:0px auto; // this sets left/right margin to auto and
// centers the element
}
// HTML:
<div id="container">
<table class="centered" border="0">
...
</table>
</div>
Or if you want to style inline:
<div style="text-align:center;">
<table style="margin:0px auto;" border="0">
...
</table>
</div>
Try this:
<div style="width: 100%; text-align: center;">
<!-- Your table here -->
</div>