I am trying to create an HTML email that uses gradients that will render properly in all email clients. I initially tried a vertically repeating 1px by 13px image background using a TD property and CSS but Outlook said "no." Now I have gone to making 13 TD's with a width of 1px and background colors that make up the gradient, but outlook is rending them as about 3px wide with 1px borders.
Here is the code. How can I please Outlook, or is there a way to please Outlook?
<table width="730px" cellpadding="0px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial; margin-left:auto; margin-right:auto; margin-bottom:0;" bgcolor="#fbebd8">
<tr valign="top">
<td bgcolor="#fff" width="1px"> </td>
<td bgcolor="#fff" width="1px"> </td>
<td bgcolor="#fdfcfa" width="1px"> </td>
<td bgcolor="#fcf8f5" width="1px"> </td>
<td bgcolor="#f7f2ee" width="1px"> </td>
<td bgcolor="#f2e7e1" width="1px"> </td>
<td bgcolor="#efded4" width="1px"> </td>
<td bgcolor="#e9d3c5" width="1px"> </td>
<td bgcolor="#dfc8b6" width="1px"> </td>
<td bgcolor="#d9bba3" width="1px"> </td>
<td bgcolor="#e4cab3" width="1px"> </td>
<td bgcolor="#ddc7b0" width="1px"> </td>
<td bgcolor="#ebd9c3" width="1px"> </td>
<td bgcolor="#f9e7d1" width="1px"> </td>
<td>
<!-- embedded half-left table -->
<table width="348px" cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;">
<tr>
<td colspan="3" valign="top">
<p><strong>Lorem Ipsum</strong></p>
</td>
</tr>
<tr>
<td>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
<td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
<td valign="top"> <img src="CaseNotes/archive/20120815-honors-college.jpg" alt="" height="81" width="100" /> </td>
</tr>
</table>
<!-- end half-left table -->
</td>
<td bgcolor="#999999" > <img width="2px" src="CaseNotes/greybox.jpg" /> </td>
<td>
<table width="348px" cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;" >
<!-- half-right table -->
<tr valign="top">
<td valign="top" colspan="3">
<p><strong>Lorem Ipsum</strong></p>
</td>
</tr>
<tr>
<td valign="top">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
<td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
<td> <img src="CaseNotes/superman.jpg" alt="" height="150px" width="150px" /> </td>
</tr>
</table>
<!-- end half-right table -->
</td>
<td bgcolor="#f9e8d4" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#e7cfb8" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#ead2bb" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#e5c8b0" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#b17853" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#b88460" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#c29371" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#cca385" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#d5b39a" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#ddc2ad" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#e5cfbe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#ebdbce" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#f1e5dc" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#f6efe9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#faf5f2" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#fdfaf9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#fefefd" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#fffefe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
</tr>
</table>
<!-- end super table -->
I don't know if this is the issue or not but, when defining a width out of css, but as a property, you don't define it with a px.
For instance: <td width="1">
In comparison, css would make it: <td style="width:1px;">;
Try declaring your width twice. Once as an html attribute and once as an inline css-style.
For example try this:
Some e-mail clients use the html attributes, I think Outlook 2010 uses the inline style.
foolproof backgrounds for emails: http://emailbg.net/
put your hosted image url on the top left, make sure sure your image dimensions are correct in the code (you may have to hit enter again in the top left text-box), and make sure you click single table cell :)
I use this frequently. Tested in Litmus and fully compliant across the board.
Related
I am setting up a customized packing slip form via Advanced PDFs in NetSuite and need help fulfilling a certain formatting request. I am having trouble with the placement of the code to indent only kit items and not their components. NetSuite will not accept my changes on the form due to the misplacement of #list and #if tags. If someone could assist clearing this issue up for me by showing an example of what that should look like, it would be most appreciated. Let me know if more information is needed here and thanks! -Ryan I have tried placing the code before and after the #list tag.
<table class="itemtable" style="width: 100%; margin-top: 10px;">
<thead>
<tr>
<th colspan="12">${salesorder.item[0].item#label}</th>
<th align="right" colspan="4">${salesorder.item[0].quantityordered#label}</th>
<th align="right" colspan="4">${salesorder.item[0].quantityremaining#label}</th>
<th align="right" colspan="4">${salesorder.item[0].quantity#label}</th>
</tr>
</thead>
<#list salesorder.item as tranline> //callout to list items from item fulfillment
<#if tranline.custcol_9r_noncomponent='T'> //checks to see if items are kits items or not
<#if tranline.custcolitemtype="Kit/Package"><tr style="font-weight:bold"> //bolds kit items
<#else><tr style="font-weight:normal"> //if not kit item, uses normal formatting
</#if> //for kit items use this formatting
<td width="15%" class="item" font-size="7pt">${tranline.item}</td>
<td width="20%" class="item">${tranline.description}</td>
<td width="8%" class="item" align="center">${tranline.quantityremaining}</td>
<td width="8%" class="item" align="center">${tranline.quantity}</td>
<td width="8%" class="item"> </td>
<td width="9%" class="item"> </td>
</tr>
<#else> //for component items, use this formatting
<tr>
<td width="15%" class="kititem" font-size="7pt"> ${tranline.item}</td>
<td width="20%" class="kititem">${tranline.description}</td>
<td width="8%" class="kititem" align="center">${tranline.quantityremaining}</td>
<td width="8%" class="kititem" align="center">${tranline.quantity}</td>
<td width="8%" class="kititem"> </td>
<td width="9%" class="kititem"> </td>
</tr>
</#if> //should refer to tranline.custcol_9r_noncomponent='T'statement
</#list> //should close the callout for list items
</table> //ends table
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'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)
I try to create an newsletter.
The display is perfect on web browser, perfect in thunderbird too... but in webmails like Gmail or Hotmail... I have spaces between the rows.
Here is my code :
<center>Si la newsletter s'affiche mal, consultez la en ligne
<table id="Table_01" width="731" height="731" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="left" valign="top">
<a href="http://www.itbag.fr" style="display:block;height:131px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_01.jpg" width="640" height="131" border="0" alt=""></a></td>
<td align="left" valign="top">
<a href="https://www.facebook.com/Itbag.fr?sk=app_128552947241828" style="display:block;height:131px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_02.jpg" width="90" height="131" border="0" alt=""></a></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="131" alt=""></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<a href="http://www.itbag.fr" style="display:block;height:74px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_03.jpg" width="365" height="74" border="0" alt=""></a></td>
<td colspan="2" rowspan="2" align="left" valign="top">
<a href="http://www.itbag.fr/sacs-d-occasion-de-marques/1130-sac_24h_gerard_darel_en_python_neuf.html" style="display:block;height:286px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_04.jpg" width="365" height="286" border="0" alt=""></a></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="74" alt=""></td>
</tr>
<tr>
<td rowspan="2" align="left" valign="top">
<a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1114-cabas_burberry_beige.html" style="display:block;height:258px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_05.jpg" width="187" height="258" border="0" alt=""></a></td>
<td rowspan="2" align="left" valign="top">
<a href="http://www.itbag.fr/accessoires-co/1128-expresso.html" style="display:block;height:258px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_06.jpg" width="178" height="258" border="0" alt=""></a></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="212" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3" align="left" valign="top">
<a href="http://www.itbag.fr/accessoires-co/1107-ballerines_heritage.html" style="display:block;height:313px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_07.jpg" width="365" height="313" border="0" alt=""></a></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td align="left" valign="top">
<a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1118-peekaboo.html" style="display:block;height:227px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_08.jpg" width="187" height="227" border="0" alt=""></a></td>
<td align="left" valign="top">
<a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1120-muse_two_large.html" style="display:block;height:227px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_09.jpg" width="178" height="227" border="0" alt=""></a></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="227" alt=""></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<a href="http://www.itbag.fr/mon-compte" style="display:block;height:40px">
<img src="http://www.itbag.fr/newsletter/03022012/images/image001_10.jpg" width="365" height="40" border="0" alt=""></a></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="187" height="1" alt=""></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="178" height="1" alt=""></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="275" height="1" alt=""></td>
<td align="left" valign="top">
<img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="90" height="1" alt=""></td>
<td></td>
</tr>
</table></center>
Here is the direct link : http://www.itbag.fr/newsletter/03022012
And here, there is two screenshots of display in Gmail and Hotmail :
Anyone can help me ?
Add style="display: block" as mentioned bellow
<img style="display: block" src="sample.gif" alt="sample" />
and also add
img { display: block }
Refer to the original post.
I solved a similar problem with
<td style="line-height:0"><img ... /></td>
Found on this Q&A, I am not allowed to notify potential duplicate yet.
I guess there is no really answer for this webmail...
I see in this source : http://www.campaignmonitor.com/css/ that all webmails and readers understand "float"...
So in the future, à try with float column.
For future reference: please remember that your td inside same tr must have the same padding top and bottom.
It happens because you're adding some space to some td's and the other are getting the space but not the style (just to the space you have defined), please add padding to them too.
It can happen with border's too.
I hope someone here can help me. Im using selenium to test a page that has an image which when click displays a calendar. I can get as far as clicking the image using
browser.click("//center/table/tbody/tr/td[1]/a/img")
I got the above path by using the Selenium IDE. The problem is once i click the above image the Selenium IDE does not record what i have clicked after the calendar is shown.
Here is the code for the image button
<INPUT size='8' CLASS="field-date" TYPE="text" NAME="endQtrDate" VALUE="01/10/2004" ID="endQtrDate" onBlur="this.value=validateFieldValue(this.value,'date_error','endQtrDate',this.form)" onFocus="this.select()" TITLE="Enter date in format dd/mm/yyyy" />
<IMG ALIGN="absmiddle" ALT="Press to show calendar picker" NAME="calendarButton" SRC="../images/buttons/small/calendar.gif" onClick="return showCalendar('endQtrDate', 'dd/MM/yyyy');" />
Unfortunately i cant see the code for the calendar after i click it. The only way i can see it is using the mozilla plugin "Firebug". I managed to get the div layer of which the calendar is displayed.
<div class="calendar"
style="position: absolute; display: none; left: 234px; top: 416px;">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<td colspan="1" class="button">-</td>
<td colspan="6" class="title" style="cursor: move;">October,
2004</td>
<td colspan="1" class="button">×</td>
</tr>
<tr class="headrow">
<td colspan="1" class="button">«</td>
<td colspan="1" class="button">‹</td>
<td colspan="4" class="button">Today</td>
<td colspan="1" class="button">›</td>
<td colspan="1" class="button">»</td>
</tr>
<tr class="daynames">
<td class="name wn">wk</td>
<td class="day name">Mon</td>
<td class="day name">Tue</td>
<td class="day name">Wed</td>
<td class="day name">Thu</td>
<td class="day name">Fri</td>
<td class="name day weekend">Sat</td>
<td class="name day weekend">Sun</td>
</tr>
</thead>
<tbody>
<tr class="daysrow">
<td class="day wn">40</td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day">1</td>
<td class="day weekend">2</td>
<td class="day weekend">3</td>
</tr>
<tr class="daysrow">
<td class="day wn">41</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
<td class="day">8</td>
<td class="day weekend">9</td>
<td class="day weekend">10</td>
</tr>
<tr class="daysrow">
<td class="day wn">42</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
<td class="selected day">15</td>
<td class="day weekend">16</td>
<td class="day weekend">17</td>
</tr>
<tr class="daysrow">
<td class="day wn">43</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
<td class="day">21</td>
<td class="day">22</td>
<td class="day weekend">23</td>
<td class="day weekend">24</td>
</tr>
<tr class="daysrow">
<td class="day wn">44</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
<td class="day">28</td>
<td class="day">29</td>
<td class="day weekend">30</td>
<td class="day weekend">31</td>
</tr>
<tr class="emptyrow">
<td class="day wn">36</td>
<td class="day">30</td>
<td class="day">31</td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
</tbody>
<tfoot>
<tr class="footrow">
<td colspan="8" class="ttip" style="cursor: move;">Select date</td>
</tr>
</tfoot>
</table>
<div class="combo" style="display: none;">
<div class="label">Jan</div>
<div class="label">Feb</div>
<div class="label">Mar</div>
<div class="label">Apr</div>
<div class="label">May</div>
<div class="label">Jun</div>
<div class="label">Jul</div>
<div class="label">Aug</div>
<div class="label">Sep</div>
<div class="label">Oct</div>
<div class="label">Nov</div>
<div class="label">Dec</div>
</div>
<div class="combo" style="display: none;">
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
</div>
</div>
If you look carefully you will see table cells for dates from 1 to 30th. How can i access these values using Selenium? I can use the IDE as it doesnt record anything when the calendar pops up.
The firebug has an option to display the xpath of any tag. I tried it on one of the td tags and it says this is the xpath.
/html/body/div/table/thead/tr[2]/td[3]
Can i use the above path to determine its value then click on it using selenium?
Thanks
To click on the image you can use click | calendarButton and that should load it up for you.
From there you will then need to click on items I would then use firebug to see the other items on the page.
Edit from extra info:
What you need to do then is use xpath=//td[#class="day" and text()="14"] for xpath or for css use css=td.day:contains('14')
The css route will be a lot quicker in browsers like Internet Explorer