So, I'm totally losing my mind with an email that I'm trying to format.
I think it has to do with a particular nested table.
The main table is 650px wide and the width of the nested table is set to 100%.
What's happening is that, as soon as I plug in the nested tables, the header and footer images are being reduced by 20px(10+10) on the right side(despite both images being 650 pixels wide).
When I modify the nested tables to make the cellspacing on both sides of the nested tables =0(originally 10px on both sides i.e. 20px in total), then the header and footer images line up correctly but, assuming the cellspacing is set to 10 px on each side of the nested table, then the header and footer images get reduced.
Why is the nested table cellspacing affecting my table header and footer images?
<!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>2020 Preferred Share Outlook with Fiera Capital</title>
<style type="text/css">
<!--
html, body {
font-family: Arial, Helvetica, sans-serif;
color: #444;
font-size: 17px;
line-height:30px;
background-color: #FAFAFA;
}
img {
border:none;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
.disclaimer {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
line-height:16px;
}
.title {
color: #F60;
font-weight: bold;
font-size: 18px;
line-height: 25px;
}
.title2 {
color: #F60;
font-weight: bold;
font-size: 14px;
line-height: 20px;
}
a:link {
color: #F60;
}
a:visited {
color: #F60;
}
a:hover {
color: #F60;
}
a:active {
color: #77881c;
}
.orange {
color: #F60;
}
.disclaimer{
padding:15px;
}
.table_data {
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
border-color: #FDFDFD;
line-height:12px;
}
.disclaimer1 { font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 11px;
line-height:16px;
}
.details {
font-size: 13px;
line-height:20px;
}
-->
</style>
</head>
<body style="margin: 0;">
<table width="101%" height="100%">
<tr>
<td><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="650">
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Email_Header.png" alt="2020 Preferred Share Outlook with Fiera Capital" style="border:none"/>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 20px 20px 20px;">
<p class="title">Get the Latest Outlook from Fiera Capital on the Canadian Preferred Shares and Fixed Income Markets</p>
<p>The Canadian preferred share market has bounced back from its lows in Q3 2019. But Fiera Capital believes there is still significant potential upside left in this asset class, since preferred shares offer higher relative yields compared to bonds, and should have less pressure from new issuances in 2020.</p>
<p>Fiera Capital’s Nicolas Normandeau, lead portfolio manager for the Horizons Active Preferred Share ETF (HPR) and the Horizons Floating Rate Preferred Share ETF (HFP), will outline his team’s outlook for Canadian preferred shares in 2020, and why he feels they remain a potentially attractive option for Canadian fixed income investors.</p>
<p><img src="http://horizonsetfs.com/horizons/media/emails/common-images/register_en.png" alt="Register for the webinar Now" style="border:none"/></p>
<table width="100%" cellspacing="10" cellpadding="10" border="0">
<tbody>
<tr>
<td width="50%" bgcolor="#EEEEEE"><br><span class="title"><strong>Advisors and Investors Bullish in New Decade<br>
<a href="https://www.horizonsetfs.com/sentimentsurvey" target="_blank"><br>
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Sentiment-Survey.jpg" alt="Sentiment Survey Results" style="border:none"></a><br>
</strong></span><br>
Did you miss our Q1 2020 Sentiment Survey Results? See where Canadian advisors and investors stand on 14 different indices and asset classes, ranging from the NASDAQ-100® to Gold Bullion.<br> <p>Stay tuned for our Q2 2020 Sentiment Survey in March – you could win a $150 Amazon gift card!</p>
</td>
<td width="" bgcolor="#EEEEEE">
<span class="title"><strong>Just Launched: Three New Total Return ETFs</strong></span><br>
<a href="https://www.horizonsetfs.com/news/Press-Release/Horizons-ETFs-Launches-Three-New-Total-Return-ETFs" target="_blank"><br>
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Market-Open-pic.png" alt="Launch of new Total Return ETFs" style="border:none"></a><br>
On February 6, 2020, Horizons ETFs launched three new ETFs: HULC, HSAV, as well as HXCN. With $1 billion in seed capital, HXCN is the largest ETF launch in Canadian history. Learn more about our new total return ETFs <br> <br> <br> <br>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellpadding="0">
<tbody>
<tr>
<td width="30%">
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Nicolas-Normandeau.png" alt="Nicolas Normandeau, CFA®, M.SC." style="border:none"/><span class="orange"><strong>Nicolas Normandeau</strong></span>
<br>
<strong><span style="font-size: 12px;">CFA®, M.SC. – Vice-President and Portfolio Manager, Fixed Income, Fiera Capital</span></strong>
</td>
<td width="70%">
<em>Nicolas Normandeau is a member of Fiera Capital’s Corporate Fixed Income team and a portfolio manager for the firm’s Corporate Fixed Income strategy with 10 years of industry experience. Fiera Capital is one of Canada’s largest managers of fixed income investments and is the sub-advisor for many of Horizons ETFs’ fixed income funds.</em>
</td>
<br>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="650"><img src="https://www.horizonsetfs.com/horizons/media/emails/common-images/footer_en.jpg" alt="Horizons Exchange Traded Funds" /></td>
</tr>
<tr>
<td class="disclaimer"><p class="disclaimer1">*Plus applicable sales taxes.</p>
<p class="disclaimer1">Commissions, management fees and expenses all may be associated with an investment in exchange traded products managed by Horizons ETFs Management (Canada) Inc. (the "Horizons Exchange Traded Products"). The Horizons Exchange Traded Products are not guaranteed, their values change frequently and past performance may not be repeated. The prospectus contains important detailed information about the Horizons Exchange Traded Products. <strong>Please read the relevant prospectus before investing.</strong></p>
<p class="disclaimer1">Certain statements may constitute a forward looking statement, including those identified by the expressions “anticipate”, “estimate” or “expect” and similar expressions (including grammatical variations thereof) to the extent they relate to the ETFs or Horizons ETFs. The forward-looking statements are not historical facts but reflect the ETFs, the ETF’s managers or Horizons ETFs current expectations regarding future results or events. These forward-looking statements are subject to a number of risks and uncertainties that could cause actual results or events to differ materially from current expectations. These and other factors should be considered carefully and readers should not place undue reliance on the ETFs’ forward looking statements. These forward-looking statements are made as of the date hereof and the ETFs do not undertake to update any forward-looking statement that is contained herein, whether as a result of new information, future events or otherwise, unless required by applicable law.</p>
<p class="disclaimer1"><sup>1</sup>Horizons Total Return ETFs (“Horizons Total Return ETFs”) are generally index-tracking ETFs that use an innovative investment structure known as a Total Return Swap to deliver the returns of an underlying benchmark in a low-cost and tax-efficient manner. Unlike a physical replication ETF that typically purchases the securities found in the relevant benchmark in the same proportions as the benchmark, most Horizons Total Return ETFs use a synthetic structure that never buys the securities of a benchmark directly. Instead, the ETF receives the total return of the benchmark through entering into a Total Return Swap agreement with one or more counterparties, typically large financial institutions, which will provide the ETF with the total return of the benchmark in exchange for the interest earned on the cash held by the ETF. Any distributions which are paid by the benchmark’s constituents are reflected automatically in the net asset value (NAV) of the ETF. As a result, the Horizons Total Return ETF receives the total return of the benchmark (before fees), which is reflected in the ETF’s share price, and investors are not expected to receive any taxable distributions. Certain Horizons Total Return ETFs use physical replication instead of a total return swap, which includes HULC and HSAV. The Horizons Cash Maximizer ETF does not track a traditional benchmark but rather a compounding rate of interest paid on a cash deposit that can change over time.</p>
<p class="disclaimer1">In the past you have provided Horizons ETFs with your email address or your email address is publicly available. You will receive brief news announcements regarding our ETFs and related topics. If you no longer wish to receive these announcements, you may unsubscribe by clicking here and updating your user preferences.</p>
<p class="disclaimer1">Click here to read our Privacy Policy.</p>
<p class="disclaimer1">Horizons ETFs Management (Canada) Inc.<br />
55 University Avenue, Suite 800<br />
Toronto, Ontario, M5J 2H7</p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Header and footer images are not being reduced at all, they are correctly displaying at 650px width.
The horizontal padding on the <td> containing the nested tables is causing your main table to shift from 650px to 690px (650 + 20 + 20 = 690), and so causing the images not filling the main table's width.
Changing this line
<td align="left" style="padding: 15px 20px 20px 20px;">
To, for example
<td align="left" style="padding: 15px 0 20px 0;">
Solves the issue
Thanks for that Facundo!
Only problem with that approach is that that it strips out the padding on the entire body copy (which is fairly easily added back via a class)
Is there another way to achieve this result?
Related
Developers and enthusiasts!
Since I have a little experience with HTML I figured it would be fun to try to create an html email signature, and it was! Until I checked the result on Litmus. So many tiny flaws I can not figure out how to fix:
• personal information appears partly or completely under the logo in Outlook on PC, instead of next to the logo.
• social media icons not visible in Apple mail, only before sending.
• correct space between social media icons in browsers, iPad mail and iPhone mail but not in Outlook on PC (or when running the code on here).
Are these compatibility problems that can not be fixed?
If they can, I need your help!
This is how the signature is supposed to look (the logo is an animation).
And this is the code:
<table border="0" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td border="0" cellpadding="0" cellspacing="0">
<p style="line-height: 11px; padding: 0px; font-family: Helvetica; font-size: 12px;">
<a style="font-style: bold; color: #333333;"><strong>Joram Esveld</strong></a><br>
<a style="line-height: 18px; color: #017d85">branding specialist</a>
<br><br>
<a href="https://www.joramipsum.com/" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank"
style="text-decoration: none; color:#333333;" >www.joramipsum.com</a><br>
+316 12 34 56 78<br><br>
</p>
</td>
</tr>
</tbody>
</table>
Let me know if you need more information.
And if anyone has any branding related questions;
feel free to ask thrue dm, or my website.
Kind regards,
Joram
JavaScript will not work in an email client.
Outlook ignores padding on images.
float mostly does not work with Outlook.
A better approach would be to divide the signature into two separate columns using td.
For more information on what works with email, try this handy source:
https://www.campaignmonitor.com/css/
Good luck.
I've just been given a take home exam for a job as an email developer. My task is to try my best to create an HTML email out of a .png file. I've been using tables, and I've come to a section where I have to insert an image alongside text, and I'm crashing and burning. The header text is too far displaced from the paragraph, and the image doesn't sit well; does anyone have any ideas on how to resolve the issue? My code is as follows:
div #costume-section {
width:645px;
height: 225px;
padding-left: 05px;
background: #ff821d;
color: white;
}
<div id="costume-section">
<table>
<th id="cos-font">Costume Contest</th>
<tr>
<td>Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>
👋 Rachelledev
Think about this like you are working in a spreadsheet. You have set a th and a tr table row.
Since you have your header text outside of the row containg the 2 td's the header text sits on top of the tr containing the text and the image.
Rearranging the table markup you don't really need the th in this scenario unless its a requirement.
<div id="costume-section">
<table>
<tr>
<td>
<h1>Costume Contest</h1>
Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>
So, I recently took over managing the website for our robotics club. I have the most experience in web development in the room, though I haven't used it in a while so I am a bit rusty on some of the obscure details and stuff.
I've been trying to run through and remove all the unnecessary garbage the creator of the website used/left in, and I came across an issue that he was having, which nobody could figure out.
He was trying to format some information about the competition our school hosts in a data table, which can be seen here (I am posting the section and all the other content in that section, including the table, in case it is of any use):
<section id="news" class="container content-section trans-section text-center" style="position: relative;padding-top: 55px;">
<div class="row"><div class="col-md-offset-4 col-md-4"><h2 class="text-center">Additional Updates & Information</h2><br><div class="line"></div></div></div>
<br><br><br>
<div class="row text-left" style="padding-left: 80px;">
<div class="col-md-11">
<h2 class="text-left">Updates</h2>
<div class="line-alt"></div>
<div class="row">
<ul style="font-size: 1.6em; font-family: 'Lato'; font-weight: 300;">
<li>The number of SweeperBot matches has been changed from 2 to 3.</li>
<li>SweeperBot matches will run in the morning. Each robot will run through the field once and then initial rankings will be posted. Each robot will then run a second time and rankings will be updated. Each robot will then go through a third and final time.</li>
<li>We are planning on a double elimination format for the SumoBots. Some of the early SumoBot matches will run in the morning concurrently with the SweeperBot matches.</li>
<li>We will release the schedule for the day as we get closer to the date and get a firmer handle on the total number of teams.</li>
</ul>
</div>
<br><br>
<table class="table table-striped table-bordered table-condensed" style="border: 1px solid #3c3c3c !important;">
<caption style="align: top;">Schools Attending The Competition</caption>
<tr>
<td style="font-weight: 500;">School Name</td>
<td style="font-weight: 500;">Number of SumoBots</td>
<td style="font-weight: 500;">Number of SweeperBots</td>
</tr>
<tr>
<td>Bishop Shanahan High School</td>
<td class="success">3</td>
<td class="success">3</td>
</tr>
<tr>
<td>George School</td>
<td class="success">5</td>
<td class="success">3</td>
</tr>
<tr>
<td>Methacton High School</td>
<td class="success">4</td>
<td class="success">2</td>
</tr>
<tr>
<td>Pennridge High School</td>
<td class="success">4</td>
<td class="success">0</td>
</tr>
<tr>
<td>Plymouth Whitemarsh High School</td>
<td class="success">1</td>
<td class="success">1</td>
</tr>
</table>
<p style="font-family: 'Lato'; font-weight: 300;">*Actual number of robots subject to change as we approach April 16th.</p>
</div>
</div>
</section>
The issue that he came across is the the table does not format properly in Chrome, but it works fine in Edge and even IE. Haven't tested it with Firefox, because it is not installed, but nobody has said anything about any browser other than chrome.
The table, in chrome, shows up as a straight up and down, one columned table. The data is still in the proper order, but not arrangement. I would imagine that this is an issue someone else has experienced before, but I haven't and I couldn't find a good post that addressed this issue.
Can anyone help me out?
You have display: block; attached to your td on your site. This causes the td to behave as a block element instead of display: table-cell. Remove that, and the td elements will behave as expected.
Specifically, it looks like it is line 104 in your stylesheet named "style.css".
I'm trying to get outlook to display a background-image. Is another rule I can use in it's place for outlook 2003-2015 email clients? Be see markup below.
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td class="mbl-header" align="center" style="width:600px; height:122px; background-image: url('images/banner2.jpg'); background-repeat:no-repeat;background-size:600px 100%; padding-left:35px; padding-right:35px;">
<p style="font-family:Arial, sans-serif; color:#fff; text-align:left;"><strong>As Assistant U.S. Attorney Seth Wilkinson</strong> said in relation to a recent Lacey Act case, “The message is clear, you can’t turn a blind eye, you can’t buy products that you know are stolen, make a huge profit off it and then just say, ‘I didn’t know what I was doing</p>
</td>
</tr>
</table>
Outlook 07/10/13 & Outlook.com do not support background-image (Campaign Monitor - CSS). Instead, you can either substitute sliced images (not recommended) for all email clients or a solid background color where background-image isn't supported.
Bulletproof Background Images is probably the most reliable source.
I'm finishing up a midterm project for an HTMl course and I'm working on my last page. Problem is, the table overflows to the right (when the browser isn't maximized) and I can't figure out how to fix it. Can anyone help?
I can't post a pic. (No rep)
The HTML:
<div id="rightcolumn">
<h2>Fuel Cells</h2>
<!--3 Column by 3 Row Layout using a Table-->
<table width="100%" border="0" cellpadding="6">
<caption>Fuel Cells as a Source of Green Energy</caption>
<tr>
<td colspan="3">The research and development of fuel cells is extremely important. Fuel cells are an important technology because they use hydrogen to create energy. Hydrogen is the most plentiful element in our universe, quite unlike oil. If the US ran on fuel cells we would finally be independent from oil. Also, hydrogen doesn’t need to be “mined” like oil. If we no longer needed oil we would save on the price we have been paying for decades. Hydrogen is both extremely abundant and a renewable resource. If hydrogen was used as our primary power source we wouldn’t ever need to worry about running out of it, like we do with oil and other fossil fuels. A cloudy day can stop solar panels from generating much electricity and a still day can stop wind power. With hydrogen however, weather wouldn’t affect the quantity of power fuel cells produce. This makes fuel cells far more reliable than other, alternative forms of “green” energy.
</td>
</tr>
<tr>
<td ><img src="FuelCellDiagram.png" width="335" height="232" alt="How Fuel Cells Work" /></td>
<td><img src="FuelCellhome.png" width="345" height="250" alt="Fuel Cell Powering Home" /></td>
<td><img src="FCCar.GIF" width="400" height="347" alt="How Fuel Cells power Cars" /></td>
</tr>
<tr>
<td colspan="3">Fuel cells are important because of their harmless byproducts. Water and heat, the byproducts, aren’t dangerous and could actually be useful. The heat generated by fuel cells could be used to heat homes or water, making fuel cells even more efficient. Fuel cells would allow us to power our cars as well as our homes. This would lead to an end of the use of gasoline or battery powered vehicles. Although cars are becoming more efficient, they are unable to match the efficiency of fuel cells. Our current gas powered vehicles produce harmful pollutants during fuel combustion. Battery powered vehicles are also harmful because of the pollutants that are byproducts of both creating and disposing of them. If the world could end its dependence on oil and transition to fuel cells, our pollution levels would be a fraction of what they are now. In China, many cities are filled with smog because of the way they are powered. If China were to replace their coal plants with fuel cells, the ever increasing smog throughout China would begin to fade. Also, we would no longer have to worry about pollution from oil spills or oil wells.
</td>
</tr>
</table>
<!--End of Columns/Table-->
</div>
and the CSS is:
#container {
margin: auto;
width:80%;
min-width:700px;
background-color:#93A5C4;
color:#000000;
border: 2px double #000000;
}
#rightcolumn {
margin-left:140px;
background-color:#ffffff;
color:#000000;
padding:10px;
}
td, tr, th {
padding: 10px;
margin-left:auto;
margin-right:auto;
text-align: left;
}
I can't edit the rightcolumn CSS though because I need it like that to display the other pages properly and I'm only allowed to use one CSS sheet for the entire site.
A quick solution would be to add a style of "overflow:scroll" in your declaration for the rightcolumn div.
<div id="rightcolumn" style="overflow:scroll">