I'm building an email template. Part of the design involves using Georgia Italic as the font. The text only takes up the bottom 75% of the space allotted for the text. This means there's a sizable amount of whitespace above the text.
Here's the code:
<table width="660" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table style="border-collapse: collapse;">
<tr>
<td align="right" width="420" height="200" bgcolor="#FFFFFF" style="font-family: Georgia, Times New Roman, serif; font-size:300px; line-height:300px; color:#e47b5c; padding: 10px 0 10px 0; font-style:italic; line-height:300px; border-collapse:collapse;" >
<span>75</span>
</td>
<td align="right" valign="bottom" width="240" height="200" bgcolor="#FFFFFF" style="font-family: Georgia, Times New Roman, serif; color:#e47b5c;" >
<table align="left" style="border-collapse: collapse;">
<tr>
<td align="middle" style="font-size:150px; line-height:150px; color:#e47b5c; font-style:italic;">
<span>%</span>
</td>
</tr>
<tr>
<td align="left" style="font-size:80px; line-height:80px; color:#e47b5c;">
<span>OFF</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
http://jsfiddle.net/AEhy6/1/
(select the "75%" to see the extra space)
I'm looking for a way to cover up the whitespace.
I suspect the only way is to change the font. All ideas are welcome! Thank you.
In your example you can reduce the line-height to get rid of the undesired whitespace present above the letters....
Related
In the email signature I'm making for my company I have an embedded image on the left. When I preview the code in Chrome or my IDE the image is sized properly taking up the same height as the three lines of evenly-spaced text to its right. However, when others in my company receive emails from me, sometimes the image is significantly taller than the lines of text next to it. How do I ensure that my image stays a consistent size across devices and email clients?
<html>
<STYLE>A {text-decoration: none;} </STYLE><body>
<table data-mysignature-date="2019-09-17T19:52:14.752Z" data-mysignature-is-paid="0" width="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td
valign="center" width="0" style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" width="100" style="width:67px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:90%;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
[COMPANY NAME]
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Austin Berenyi </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Graphic Designer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>austin#company.com</i></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It may sounds naive, but just try to specify height of your img:
<img alt="TETON Sports" style="width:67px; height: 48px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
In addition try to always set font-size of text (px or em) and try to avoid these values as percents.
So I've been wrangling all week with a newsletter redesign for my company, tweaking the html to make it display semi-consistently across email clients. I've made good use of www.litmus.com for much of this. This is the last bug remaining and it continues to elude me. We have a horizontal navbar across the top. Here's a stripped down version with only one <td>, normally there are 5 of them:
<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle">
<tr valign="middle">
<td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >
<a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere">
<span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span>
</a>
</td>
</tr>
</table>
As you can see, inline styles up the wazoo. It displays fine on all of the litmus tests except for Outlook 2002, 2007 and 2013, in which valign="middle" gets ignored and the link text gets pushed to the top like this: http://i.imgur.com/a48ObB8.jpg
Several sources, both here and elsewhere, suggest that valign works in outlook, but I've tried the valign="middle" attribute on every tag I can think of, and several css vertical-align: middle;s as well. Is this no longer true? And if so, is there a work around of some sort?
I think the issue is the line-height you are setting. I found that when the line-height is equal to the td height, valign=middle will not work properly in outlook.
The following will not middle-align the text:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;">
Link Text Here
</td>
</tr>
</table>
THIS WILL:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;">
Link Text Here
</td>
</tr>
</table>
Valign always worked for me, but I think for it to work in Outlook 2007 you have to set the height of your <td>. This always worked for me:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2382a" height="35">
<span style="color:#FFFFFF;
font-family: 'Lucida Grande', Arial, sans-serif;
font-size:12px;
text-transform:uppercase;">
Link Text Here
</span>
</td>
</tr>
</table>
Short answer: Use padding-top, and padding-bottom with a negative value.
Long answer: If you want to write a cross-compatible email don't use valign at all. The problem you're having is stemming from somewhere else because by default the text should be displaying vertically centered in the cell.
Get your code back to a point where it's defaulting to the center and wherever you need something different use nested tables, cellpadding, margin, and padding to get the placement you're looking for.
I have this:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
This works on most of email clients, but not on Outlook version greater than 2010. To make it work correctly just add a conditional comment with a spacer like this:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!-- In this case is a spacer of 40px -->
<!--[if (gt mso 14)]>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top">
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
This is because of the align="right" set on the first table. Removing this should fix the issue. Other option is to manually add spacing before the first <tr>.
<tr><td height="30> </td></tr>
I'm re-living the glory days of table-based layouts because I'm writing an HTML email. Unfortunately, I can't get the body to center on the page (it works in a browser, of course, but not when testing in Gmail via HTML Mails. I would like the table which is nested in the first <td> to be centered within the outer table. The inner tables are set to a fixed width, so I would have expected that to work. Any ideas?
Here's the full code (fiddle):
<table width="100%">
<tr>
<td width="100%" align="center">
<table width="600" height="100%">
<tr>
<td width="100%">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100">
<img src="" width="100" height="100">
</a>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="20">
<tr>
<td width="100%" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;">
<h1 align="left" style="font-weight:100;margin-top:20px;">Header</h1>
<p style="font-family: Georgia, serif;">Body</p>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50">
<img src="" width="50" height="50" />
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Personally I like wrapping my entire body content (even my mobile version on responsive emails) inside a 100% width table (gmail might strip it but it will assume 100% anyway). The trick is the td's align center. ex-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="center">
<table with whatever width you want your max width to be>
</td>
</tr>
</table>
also you can assign a bgcolor to your wrapper table which will give you a background color for your email even in webmail clients which normally strip background colors in body
Your code works fine when I checked on Litmus.
My only concern is you may need to add "text-align: left" to the following to make copy aligned to the left on Gmail/IE.
<p style="font-family: Georgia, serif; text-align: left;">Body</p>
Have you tried adding the text-align css style of to the p element of body?
<p style="font-family: Georgia, serif;text-align:center;">Body</p>
you are centering the p within the cell but not its contents.
Alternatively remove the p tag.
Thanks for your suggestions, but after further investigation, I've discovered that Gmail is actually stripping the width="100%" attribute from the outer table. At this time, I don't think there is any way to center the content within the Gmail window.
After a lot of time I put into researching. I still can't find an answer.
I have a HTML that is showing the wrong width in my tables. Here is a link to the html email: https://tagwebstore.com/email/tag-email-10percentmore.html and here is a screenshot of how it looks in Outlook 2007:
The main problem is the bottom area. The link of the html email displays it correctly. I have no idea what else to do from here. Here is my code for the bottom part I am having trouble with:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" colspan="3" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
<tr>
<td width="28"></td>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.</td>
</tr>
<tr align="right">
<td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table></td>
<td width="28"></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
</table>
<!--Testimonial End-->
<!--Footer-->
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="295" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">info#tagwebstore.com | 866.232.6477</td>
<td width="178" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">Follow us on Twitter & YouTube</td>
<td valign="middle" width="102"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" /><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
<!--Footer End-->
The width of the containing table is suppose to be 625px. Any help is appreciated.
oh the joy of html emails
There are many rules you have to obey when dealing with HTML-based email, especially when you have exacting clients and pixel-perfect designs, and I am quite glad that I haven't had to work on such a project for at least two years now... The main reason for my utter dislike of the practice is primarily down to two email-clients. The first and all time worst being Lotus Notes 6.5.4 (to be fair it's over 10 years old now.. but still!), and the all time second worst(s), they're not even the best at being bad, Outlook 2007 and 2010!
Whoever thought it would be a good idea to use the Microsoft Word WYSIWYG HTML Engine to render HTML Emails in Outlook 2007 and 2010, must have been mad, lazy, lost or ever-so-slightly confused (delete as appropriate). It causes no end of rendering problems for developers, usually with random and inexplicable sizing calculations or padding problems.
Taken from my blog http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html
Simply put, I do not envy you :)
I found the best way to help me out with my email troubles was to follow the following rules:
Never use colspans or rowspans.
Always set correct dimensions for your tables and cells.
Use spacer gifs rather than &nbps;.
Always specify correct image sizes and never scale images up or down.
Always add style="display:block;" to images.
Avoid using divs.
If you wish to colour links, put the styling on a span as a child inside the a tag.
Don't use italics.
Don't use BRs for layout, always use tables.
Use BRs in Text, not Ps (to avoid stange margin problems and paragraphing being completely ignored).
Because the sheer number of emails I used to get through ended up being ridiculous, I developed a script to help me with the work of checking dimensions and other possible pitfalls. If you're interested in using it you can find it here:
http://pastie.org/6250834
The script can be added as a usual script tag or enabled using GreaseMonkey or something similar (it was designed to work with Firefox but I see no reason why it shouldn't work elsewhere). Due to the way I used to build my emails, it will only enable itself if either the following conditions are met:
There is an outer wrapping table that has width="100%" set, used to centre the actual email content.
or... there is an outer element (a table or div) that has the id="base".
I've passed your HTML through it and the image below is the resulting output, it makes more sense when you have the actual page because you can hover over each bordered item and it will give you a rough idea of what the problem is (either that or you can just inspect the element directly with Firebug or similar).
So from inspecting the above it seems you have a few problems that need to be fixed, I'd say the most important ones are to get rid of rowspans and colspans (these always cause problems in Outlook) and to make sure all your dimensions tally correctly. Once you've fixed these issues you might see a considerable improvement, but then again you might not, there are no certainties in the hazardous life of HTML email building...
Hope it helps.
Try this for your top table:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
</td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28">
</td>
<td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
</td>
</tr>
<tr align="right">
<td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table>
</td>
<td width="28">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
</table>
and this for your bottom:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
info#tagwebstore.com | 866.232.6477
</td>
<td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
Follow us on Twitter & YouTube
</td>
<td valign="middle" width="49">
<img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" />
</td>
<td valign="middle" width="53">
<img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
Overall it was coded really well, just changed a few small things, not saying each was a must have, but IF it works you can reverse engineer the changes to find out what busted it. I haven't tested it, so hopefully this works...
I will post my HTML, but I'm not sure how the first table (which contains all subsequent tables) is always an additional 2-3 pixels wider than the rest of the content. I have spent the last 2 hours troubleshooting what I believe should be an easy fix... but I can't seem to find any other areas that may be causing the problem. I apologize if the solution is obvious, I haven't designed a website since I was in high school so my skills are a little rusty/aged.
<html>
<head>
<title>Piedmont Wealth Solutions</title>
<style type="text/css"><!--
a:link {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:visited {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:active {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:hover {
color:000000; font-face:arial; font-size:10pt; text-decoration:underline
}
body {
color:Body; font-size:10pt; font-family:Arial;
}
td {
color:Body; font-size:10pt; font-family:Arial
}
--></style>
</head>
<body bgcolor="e9e9e9" background="page_bg.gif" font face="arial" size="10" valign="top" topmargin="0" leftmargin="180">
<table width="537" cellspacing="0" cellpadding="0" valign="top" align="left" height="100%" border="0" bgcolor="265b78">
<tr width="537" valign="top" align="left">
<td valign="top" align="left" width="36" background="table_bg_left.gif">
</td>
<td width="501" valign="top" align="left">
<!------banner/nav----->
<table width="501" valign="top" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="c5c5c5">
<tr valign="top" align="left" border="0">
<img src="banner_nav.jpg" border="0" valign="top" align="left">
<img src="content_top_spacer.jpg" border="0" valign="top" align="left">
</td>
</tr>
</table>
<!------content------>
<table width="501" height="350" cellspacing="0" cellpadding="0" border="0" align="left">
<tr valign="top" align="left">
<td valign="top" align="left" width="356" bgcolor="f5F8Fa">
<img src="aboutus_header.jpg" border="0" valign="top">
<br>
<br>
Content
</td>
<td valign="top" width="144" bgcolor="f0f3f5">
<img src="news_header.jpg" border="0" align="left" valign="top"> <br><br>
google news feed
</td>
</tr>
</table>
<!------address/disclaimer------>
<table width="501" cellspacing="0" cellpadding="0" height="45%" border="0" valign="top" align="left" bgcolor="265b78">
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="aac6d5">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="7da6bc">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left">
<img src="bottom_disclosure.jpg" align="left" valign="top" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tables should not be used for layout purposes, that's what CSS is for. Tables are for tabular data. With CSS you have a very nice control over the positioning and dimensions of your content.
Here's a collection of reasons why you should opt for CSS.
This is (IMHO) the best book for a head start.