Hello I am going through all of the solutions posted on stack overflow on how to remove the spacing between tables and I've tried all of them and still can't seem to get it working.
I've tried setting the cellpacing and border to 0, I've tried border collapse, I've tried setting padding to 0. Can anyone take a look and let me know where I am going wrong?
<table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td style="padding: 15px 20px 0px; " border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><div style="text-align: justify;"> <span style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Who said holidays should be saved for the summer months? Come explore Greece and the Eastern Mediterranean with Insight Vacations during the autumn, winter and spring and we will connect you to the local people and history with our unique Insight Experiences. </span><br>
</div>
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Discover Egypt with your own Egyptologist </b>as you marvel at the great pyramids of Giza and the ancient temples and tombs along the River Nile.</span></li>
</ul>
<div>
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Join a local chef</b> and <b>savour the regional specialties</b> in a fun, exciting introduction to Greek cooking.</span></li>
</ul>
<div>
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;">Venture further into the East and gain an insight into the lives of the Ottoman Sultans during a <b>private tour of the fabulous Topkapi Palace</b> in Istanbul.</span> </li>
</ul>
</div>
</div></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper" border="0" cellpadding="0" cellspacing="0">
<tr>
<td border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding-left: 20px" border="0" cellpadding="0" cellspacing="0"><div class="imgpop">
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <a style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Get an even better value than before, with our <b>best deal in years</b>. See trips marked with our Special Anniversary Pricing Icon, which designate our<b> special anniversary pricing</b> for off-season travel.</a></li>
</ul>
</div></td>
<td align="right" class="social" style="padding-right: 20px"><img alt="Special Anniversary Pricing" data-assetid="9745" height="100" src="http://image.em.insightvacations.com/lib/fe941570706c037f71/m/4/6750243f-be71-492c-91b5-8f161e978574.png"></td>
<td align="right" width="0"></td>
</tr>
</table></td>
</tr>
</table>
The spacing you're watching is made by the ul (margin), not the table
ul { margin: 0; }
<table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td style="padding: 15px 20px 0px; " border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><div style="text-align: justify;"> <span style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Who said holidays should be saved for the summer months? Come explore Greece and the Eastern Mediterranean with Insight Vacations during the autumn, winter and spring and we will connect you to the local people and history with our unique Insight Experiences. </span><br>
</div>
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Discover Egypt with your own Egyptologist </b>as you marvel at the great pyramids of Giza and the ancient temples and tombs along the River Nile.</span></li>
</ul>
<div>
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Join a local chef</b> and <b>savour the regional specialties</b> in a fun, exciting introduction to Greek cooking.</span></li>
</ul>
<div>
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;">Venture further into the East and gain an insight into the lives of the Ottoman Sultans during a <b>private tour of the fabulous Topkapi Palace</b> in Istanbul.</span> </li>
</ul>
</div>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper" border="0" cellpadding="0" cellspacing="0">
<tr>
<td border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding-left: 20px" border="0" cellpadding="0" cellspacing="0"><div class="imgpop">
<ul>
<li style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <a style="color:#081E3F; font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Get an even better value than before, with our <b>best deal in years</b>. See trips marked with our Special Anniversary Pricing Icon, which designate our<b> special anniversary pricing</b> for off-season travel.</a></li>
</ul>
</div></td>
<td align="right" class="social" style="padding-right: 20px"><img alt="Special Anniversary Pricing" data-assetid="9745" height="100" src="http://image.em.insightvacations.com/lib/fe941570706c037f71/m/4/6750243f-be71-492c-91b5-8f161e978574.png"></td>
<td align="right" width="0"></td>
</tr>
</table>
The spaces you are seeing between the table cells and the two tables is not due to the table spacing, but the default margins in your <ul> tags. Replace every <ul> with <ul style="margin: 0px"> and the spacing will go away. For a more elegant solution, go into an external style sheet and set all <ul> tags to have no margins.
Another cause of the spacing between the tables is the image you have placed in the second table. The image is tall enough that it changes the line height, giving you the space you are seeing. Remove the picture or place it outside of the <ul> tag in order to remove the space while keeping the image.
I hope this helps, if you need to see some actual HTML of the fix I can provide, but it seems easy enough to fix without it.
Related
This is the first html email signature I''ve created and I've now discovered why I dont do them - what a pain!
It seems no matter what I do, it's not displaying correctly in one client or another.
The code I used below is displaying correctly in Android and Mac Outlook clients, however when I first upload it to outlook there is a table wrap error that I corrected by changing the table in outlook to nowrap. But now when this email signature is sent from outlook, it breaks when you look at it on ios.
I know my code probably isnt very good as it's my first time doing these. Could anybody please give me a hand to fix it??
Help me StackOverflow, you're my only hope!
Here is my code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<STYLE>
<!--
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
-->
<!--
<style>
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
</STYLE>
<tr>
<td width="0" bgcolor="#f3f3f1">
</td>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</a>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
<a href="tel:000000000" style="text-decoration: none;color:#000000">Call the office.
<a href="tel:000000000" style="text-decoration: none; color: #000000">Call Me.
<a href="mailto:email#domain.com.au" style="text-decoration: none;color: #000000;font-size: 9px; white-space: nowrap">Email me.
<br />
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
</a>
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif; class="gold">
villagerproperty.com.au
</a>
</p>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png">
<br> <p bgcolour= "ffffff">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p> <br>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
<tr>
<td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
Thankyou #Nathan for all of your help!
Your fix worked great, however when viewing on iOswrapping error
Is this because I have the table width set at a % instead of a fixed px?
I aplogise for all the questions - I'm very new to html signatures and I seem to be having a lot of trouble!
A couple of helpful's for future:
Run your HTML through a w3c HTML validation check (and CSS, but that's less useful). There were quite a few tiny but significant errors: not closing </a> in the right place (it's inline, so close it before a block element like <p> or <br>), or not closing stuff, or forgetting quotes.
If you use https://validator.w3.org/#validate_by_input ignore all the obsolete messages (message filtering button can turn them off) - email is too old school for it!
And seriously, that was all, apart from removing a couple of redundant/empty td's/tables.
There is a possibility Outlook from Windows was messing with your code, it does that. But Outlook from Mac should be no problem.
Here is working code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<style>
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
<tr>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
Call the office.
Call Me.
Email me.
</p>
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif;" class="gold">
villagerproperty.com.au
</a>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png" alt="" role="presentation">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p>
</td>
</tr>
</table>
I'm trying to unify the font to appear the same on all operating systems and devices. Also some design elements break on different devices. what am I doing wrong? this is my code below?
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td rowspan="4" border="0" cellpadding="0" cellspacing="0" height="100" width="250">
<img src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/West-Coast-Elevators-Email-Signature-Image.jpg" alt="west coast elevators logo" width="350px" height="150" style=" margin-top: 28px">
</td>
<td colspan="4" height="20" width="200px"><p style="font-size:20px; margin-bottom: 5px; line-height: 20px; font-family: 'sans-serif', 'lato';"><strong>Full Name</strong><br>
<span style="font-size: 15px; font-family: 'sans-serif', 'lato'; color: #000000;">Managing Director</span></p></td>
</tr>
<tr height="10px" width="200px">
<td colspan="1" width="120px"><p style="margin-bottom: -0px; font-size: 15px">0000 000 000</p></td>
<td colspan="2" width="80px"><p style="margin-bottom: -0px;font-size: 15px">08 6263 5253</p></td>
</tr>
<tr>
<td height="47" colspan="3" width="220px"><p style="line-height: 0px; margin-top: 0px; font-family: 'sans-serif', 'lato';font-size: 15px">20 Wynyard St, Belmont WA 6104</p>
<p style="text-decoration: none; line-height: 10px; font-family: 'sans-serif', 'lato'; font-size: 15px">westcoastelevators.com.au </p></td>
<td width="180" ><img style="margin-right: 5px; margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-3.png" alt="facebook logo"> <img style="margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-4.png" alt="instagram logo"></td></tr>
</tbody>
</table>
This is a great tool for cross-browser/platform font issue: https://google-webfonts-helper.herokuapp.com/fonts/ try to download font from here and then import it in the css file.
To make the font constant everywhere, you would have to use a web font as Mr. Lister has said.
You could get fonts from all over the internet, but for now, getting fonts from here would be best.
An example, after selecting your font, you would import it into your HTML or CSS.
For HTML:
<body>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</body>
or
<style>
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
</style>
For CSS:
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
Then to use it in your code (Note: This is how I would do it, after seeing what you are trying to do in your code):
<style>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
.p {
font-family: "Lato", sans-serif;
}
<!-- You will have to remove the font-family styling from all the tags though then leave this style tag in. -->
</style>
However, I strongly advise you look into external CSS. It would make your code much easier to work with.
I am designing an email in Convio and for some reason the header and footer images have extra padding on the left and top/bottom (respectively) in Outlook 2010 and 2013. Here is a screen cap of how it is rendering. I've googled this and used tricks from Email on Acid and Litmus... etc. and for the life of me I can't figure out where the padding is coming from. Thought it would be helpful to maybe get another set of eyes on it. Hopefully it's something stupid that I am just missing. Thanks for the help.
Here is the code. Since it is built in Convio, there is no head or body tags because Convio does not support a full HTML email, just content within it's template.
Here is my CSS. It is mainly to help render the email correctly in Yahoo.
<style type="text/css">
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
.ExternalClass img {line-height: 100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
p {margin:0; padding:0; margin-bottom:0;}
h1, h2, h3, h4, h5, h6 {color: black; line-height: 100%;}
a, a:link {color:#2ba6cb;text-decoration: underline;}
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color:#000; background-color:none; border:none;}
a:visited { color: #005581; text-decoration: none}
a:focus { color: #005581; text-decoration: underline}
a:hover { color: #82a535; text-decoration: underline}
table {margin:0; padding:0;}
img {display:block; margin:0; padding:0;}
#cv-poweredBy {visibility: hidden;}
</style>
Here is my HTML.
<div align="center">
<!-- BLUE BACKGROUND -->
<table style="background-color: #005581; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; table-layout: fixed; margin: 0 auto; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#005581">
<tr>
<td valign="top">
<!-- TOP LINKS -->
<center>
<table style="background: #005581; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#005581">
<tbody>
<tr>
<td style="font-size: 14px; padding-top: 30px; padding-bottom: 30px;" align="center">
<a style="color: #ffffff; text-decoration: none;" href="http://[[S29:DOMAIN]]/site/TellAFriend">Forward to a friend</a>
<a style="color: #ffffff; text-decoration: none;" href="http://[[S29:DOMAIN]]/site/MessageViewer">View Web Version</a>
</td>
</tr>
</tbody>
</table>
</center>
<!-- END TOP LINKS -->
<center>
<!-- WHITE BACKGROUND -->
<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#ffffff;">
<tr>
<td width="600" style="border-collapse:collapse;">
<a href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">
<img src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-Header-rev.jpg" alt="Join the Fight Against Ebola This #GivingTuesday!" width="600" height="250" vspace="0" hspace="0" style="display:inline; padding:0; margin:0;" border="0"/>
</a>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #101010; text-align:left;" width="600">
<p style="padding: 20px">Dear Friends,<br><br>
As we celebrate #GivingTuesday today, we are honoring four courageous nurses who are working tirelessly to keep women and families safe from a highly infectious disease devastating West Africa. <strong>Marion Subah, Comfort Gebeh, Varwo Sirtor-Gbassie and Nyapu Taylor </strong> are members of the Jhpiego family.<br><br>
As the Ebola virus swept through their native Liberia, they went to work day after day, redoubling their efforts to ensure that health care providers on the frontlines had the specialized skills in infection prevention and control to work <img style="float: right; padding: 10px;" src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-CTA.jpg" alt="Help Stop The Ebola Epidemic! Donate Now" title="Help Stop The Ebola Epidemic! Donate Now" hspace="10" vspace="10" width="225" height="300" align="right" />confidently and safely in health centers and hospitals. They also dedicated themselves to helping health facilities restore critically needed maternal and child health services so pregnant women and mothers do not die giving birth.<br><br>
These four women are respected colleagues, who, along with our dedicated staff in Ebola-impacted Guinea, are doing their utmost to prevent the needless deaths of women and their families in these countries. They embody <strong>Jhpiego's commitment to West Africa</strong>, where we have had a strong presence in both Liberia (14 years) and Guinea (21 years). Working successfully with the Ministries of Health and partners to strengthen health care systems and save lives, Jhpiego is on the ground, updating the skills of nurses and midwives so they can continue to provide quality care to vulnerable women and babies during this emergency.<br><br>
On this #GivingTuesday, as we focus on what makes <strong>Jhpiego</strong> unique, I invite you to be part of this global effort to save lives and help Marion, Comfort, Nyapu and Varwo in their prevention work. <a style="font-weight: bold; color: #99c525; text-decoration: none;" href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">With your support, we can do even more beyond #GivingTuesday! Please help us contain this epidemic by investing in Jhpiego's work.</a> Thank you in advance for your serious consideration of this special request.</p>
<center>
<table style="background: #ffffff;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="400">
<tr>
<td width="130">
<img src="http://www.jhpiego.org/email-templates/2014-Fundraising-Emails/DayofGirl-LesliePhoto.jpg" alt="Photo of Leslie Mancuso" width="120" height="120" style="display:inline; padding-right: 20px;" />
</td>
<td width="270" font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #101010; text-align:left;"">
<img src="http://www.jhpiego.org/email-templates/2014-Fundraising-Emails/Leslie-Signature.gif" alt="Leslie Mancuso's Signature" width="200" style="display:inline; padding:0; margin:0;" border="0" /><br />
Leslie Mancuso, PhD, RH, FAAN<br />
President and Chief Executive Officer
</td>
</tr>
</table>
</center>
<br>
</td>
</tr>
<tr>
<td width="600" style="border-collapse:collapse;">
<a href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">
<img src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-Footer.jpg" alt="Marion Subah, Comfort Gebeh, Nyapu Taylor and Varwo Sirtor-Gbassie" width="600" height="200" vspace="0" hspace="0" style="display:inline; padding:0; margin:0;" />
</a>
</td>
</tr>
</table>
<!-- END WHITE BACKGROUND -->
</center>
<!-- FOOTER -->
<center>
<table style="background: #005581; font-family: Arial, Helvetica, sans-serif;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#005581">
<tbody>
<tr>
<td style="background-color: #005581; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align:left; padding-right:50px; padding-top:25px; padding-bottom:100px; width:376px" width="376">
You are receiving this email because you have made a donation to Jhpiego in the past.<br><br>
We hate to see you go, but you can
<a style="color: #fff; text-decoration: underline;" href="http://[[S29:DOMAIN]]/site/CO">unsubscribe</a> if you no longer want to receive these messages.
<br /><br />
<strong>Don't forget to connect with us on:</strong><br /><br />
<img style="display: inline;" title="Facebook" src="http://give.jhpiego.org/images/content/pagebuilder/alumni-facebook.png" border="0" alt="Facebook" />
<img style="display: inline;" title="Twitter" src="http://give.jhpiego.org/images/content/pagebuilder/alumni-twitter.png" border="0" alt="Twitter" />
</td>
<td style="background-color: #005581; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align:right; padding-top:25px; width:174px" width="174" valign="top">
<img src="http://give.jhpiego.org/images/content/pagebuilder/Jhpiego_logo_wh_PMS.png" border="0" alt="Visit Jhpiego's Website" width="174" height="73"/><br><br>
1615 Thames Street<br />
Baltimore, MD 21231<br />
410-537-1800
</td>
</tr>
</tbody>
</table>
<center>
<!-- END FOOTER -->
</td>
</tr>
</table>
<!-- END BLUE BACKGROUND -->
</div>
I'm having an issue with my HTML email in Outlook 2013 only, it looks great in previous versions including 2007 and 2010.
I've added style="display:block;
My table and td have a black background color.
I tried specifying width and height on the td and the img
and a line-height style as suggested on a previous post here for the containing td.
Here's the code:
<table width="200" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="158" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 20px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table>
Containing code:
<table width="510" align="center" cellpadding="0" cellspacing="0" style="" bgcolor="#000000">
<tbody>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 12px; line-height: 20px; padding: 0px 30px 0px 40px; ">
<table width="180" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="168" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 0px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table><span style="color:#feae38;font-size:16px;"><b>Don’t Miss Your Chance to Catch<br>Identifix’s Live Training, <span class="appleLinksWhite">3/12.</span></b></span><br><br>Seats are filling up quickly, so be sure to RSVP today for “Find and Fix Faster – Your Path to More Profits,” Identifix’s live training event. Held <span class="appleLinksWhite" style="color: #ffffff;">on Tuesday, March 12th,</span> the session will be conducted by nationally recognized automotive industry expert, Jerry “G” Truglia, president of Automotive Technician Training Services (ATTS).<br><br>
<span style="color:#feae38;font-size:14px;"><b>Learn how your shop can:</b></span><br><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Diagnose and repair vehicles faster</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Reduce non-billable work time</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Boost customer trust and satisfaction</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Increase tech confidence and productivity</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Stay profitable</b></span><br><br>
Join us <span class="appleLinksWhite" style="color: #ffffff;">from 7:30 – 9:00 p.m.</span> at <a style="color:#feae38;" target="_blank" href="https://plus.google.com/104076111016352099629/about?gl=us&hl=en">ATTS</a>, <span class="appleLinksWhite" style="color: #ffffff;">10 Lupi Plaza, Mahopac, NY 10541</span>. Pizza and soft drink will be provided, followed by a hands-on demonstration of Identifix’s award-winning online tool, Direct-Hit<sup>®</sup>.<br>
<br><strong><span style="color:#feae38;font-size:16px;"><b>Reserve your seat before it’s too late!<br>Call <span class="appleLinksWhite" style="color: #ffffff;">1.855.270.5855</span> now to RSVP.<span style="color:#feae38;"><b></strong><br><br></td>
</tr>
<tr>
<td align="left" valign="top" colspan="2" style="padding: 14px 0px; "><img src="http://identifix.skmgroupwork.com/email/iden045/images/iden045-divider.gif" width="550" height="1" alt="" border="0" style="background-color: #ffffff; width: 570px; height: 1px; display: block; "></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 16px; padding: 14px 0px 24px 40px;">
©2013 Identifix | <span class="appleLinksWhite" style="color: #ffffff;">2714 Patton Road | Roseville, MN 55113</span> | <span class="appleLinksWhite" style="color: #ffffff;">1.800.745.9649</span></td>
</tr>
</tbody>
</table>
Any suggestions appreciated. Thanks,
Douglas, I tried to add an image but it says I need at least 10 reputation to post it, and I only have 1 now. The link to it is this http://identifix.skmgroupwork.com/email/iden074/images/snip.JPG
In litmus tests only on Outlook 2013 a strange white, not even aligned gap, to the right of the image that is not supposed to be there appears.
Following worked for me :
<td style="line-height:0px; mso-line-height-rule:exactly;">
Is this problem specific to Microsoft e-mail clients?
How does the e-mail look on web clients?
I have had a wide range of problems with 2013 and sometimes 2007. These are usually remedied by using the clandestine mso-specific css rules.
For example; using mso-line-height-rule:exactly; in inline css will resolve the particularly aggravating problem of Outlook 2013 pushing all tds < 15px out.
It is hard to isolate the problem within your code without seeing the rest of the code.
You should try not to use colspans to make it work in all clients like lotus notes 6.5 and 7
I can't stop the image repetition in my td elements. It looks very ugly. How do I solve this? I've added background-repeat: no-repeat code also, but it's still not working. Please don't suggest removing the % from the width of my td.
<table bgcolor="#d0e9ff" width= "100%">
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center" border="0"><font face="arial, verdana, san-serif" size="2" ><a href="index.html " style="text-decoration:none">
<font color="#ffffff"><b>Home</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="aboutus.html" style="text-decoration:none">
<font color="#ffffff"><b>About Us</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="T&C.html" style="text-decoration:none">
<font color="#ffffff"><b>Training and Certifications</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="services.html" style="text-decoration:none">
<font color="#ffffff"><b>Services</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="Contactus.html" style="text-decoration:none">
<font color="#ffffff"><b>Contact Us</a></font></div>
</td>
</table>
You've got plenty of answers telling you how to fix your repeating image problem, but in case you decide to use a CSS design, here is something to get you started. This will eliminate the need for an image. You'll use a lot less HTML and it's more configurable.
Demo: http://jsfiddle.net/ThinkingStiff/fJEJf/
HTML:
<ul>
<li><a class="a" href="index.html">Home</a></li><!--
--><li><a class="a" href="aboutus.html">About Us</a></li><!--
--><li><a class="a" href="T&C.html">Training</a></li><!--
--><li><a class="a" href="services.html">Services</a></li><!--
--><li><a class="a" href="Contactus.html">Contact Us</a></li>
</ul>
CSS:
ul {
background-color: #d0e9ff;
margin: 0;
padding: 0;
white-space: nowrap;
}
li {
display: inline-block;
padding: 4px;
width: 19.5%;
}
a {
background-color: gray;
border-radius: 16px;
color: white;
display: block;
font: bold 13px arial, verdana, san-serif;
height: 32px;
line-height: 32px;
text-align: center;
text-decoration: none;
}
Output:
You must set the background-repeat property within a style attribute:
<td width="9%" height="40" background="images/button.jpg" style="background-repeat: no-repeat">
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="aboutus.html" style="text-decoration:none">
<font color="#ffffff"><b>About Us</a></font></div>
</td>
Seems to me like a typo. Did you try replacing background-repeat: no-repeat by style="background-repeat: no-repeat" ?
EDIT : I saw your website, and the correct CSS is not only this.
You need to put an id="menu" in you <table> tag, and then put this somewhere in head
<style>
#menu td {
background-position: center center;
background-repeat: no-repeat;
}
</style>
Also, as stated by other members, you better place image background in the css properties itself, (its own stylesheet actually) and not in HTML code.
You can use:
style="background: url('images/button.jpg') top left no-repeat;"
<style>
#img_center {
background-position: center center;
background-repeat: round;
}
</style>
This worked for me