I'm coding a "responsive" email.
I have a table with 2 td's. An I want that the second one is on the right of the table.
The problem is that the first one can't have fixed width so the table can be responsive.
I tried the "float: worksright" solution but it doesn't work on outlook. (I have tried others but it was the better solution.)
Do you have any idea?
<table style="max-width:600;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="131" style="padding:25px 0;"><img src="images/autodesk.jpg" style="display:block; height:auto; max-width:131px; width: 100%;"></td>
<td width="25" style="font-size:1px; padding:25px 0;"> </td>
<td style="padding:25px 0; vertical-align:top;"><table style="max-width:444;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:13px;">
<strong style="color:#ff9933; font-size:11px; text-transform:uppercase;">Autodesk</strong><br/>
<strong style="color:#020a0d; font-size:20px; line-height:27px;">Coleções de indústrias Autodesk</strong><br/>
<br/>
O Kaspersky Anti-Virus proporciona a primeira linha de defesa do seu PC contra vírus através de tecnologias antimalware premiadas, spyware e muito mais. Obtenha proteção real contra os programas maliciosos.<br/>
<br/>
</td>
</tr>
<tr>
<td><table border="0" cellspacing="0" cellpadding="0" style="max-width:444;">
<tr>
<td>
<div style="background-color:#ff9933; color:#ffffff; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-transform:lowercase; padding:5px;">Saber +</div>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
STOP EVERYTHING! I declare myself publicly a stupid person. It just use align="right" in parent table. --' Sometimes we forget the simplest things.
Thank everybody for your help. :)
set width="100%" to table inside second td
Check out this fiddle
Related
I'm creating a layout for a newsletter. Usually this has to be pretty static but I'm using the Mailchimp guideline to achieve some responsiveness. It works well but the problem is that I would like the second image to come before the text (the problem is very obvious in the example link, it's hard to explain). Basically I would like to achieve something like you could do with Bootstrap using push and pull for example where an image that is placed second becomes first when resizing.
So image and then text when the layout is a single column.
Example: https://codepen.io/SergiOca/pen/vmqMoZ?editors=1010
#media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
}
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
<p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
<p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
<p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
What you need my son is direction in life.
You can apply the css property direction to swap the order of the table cells. Direction can be applied to text or inline-block elements.
You can apply it different ways.
<row dir="rtl">
<td dir="rtl">
.main-content {direction: rtl; /* Right to Left */}
This is a sample of code how the row or td could be applied:
<!-- header -->
<container class="header">
<row dir="rtl">
<columns large="6" small="12" class="text-right" dir="rtl">
<p class="text-right" style="color: #432a6f; font-size: 12px; text-decoration: underline;">View this email on the web</p>
</columns>
<columns large="6" small="12" dir="rtl">
<img style="display: inline-block" border="0" alt="Image name" src="http://example.com/sample.png" width="184" height="45">
</columns>
</row>
</container>
<!-- .header -->
You can try rtl ot ltr inherit from parent elements.
I would suggest placing direction on a class for the tables in a #media query so that you can swap them in mobile view. Something like this:
#media only screen and (max-width: 600px) {
.leftColumnContent {direction: rtl}
}
For more information on direction, check out:
https://css-tricks.com/almanac/properties/d/direction/
Good luck.
If you have the liberty of using nth-child then you can use
.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(1){
float: right;
}
.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(2){
float: left;
}
but you have to change the markup too, for push and pull to work you need to have the same type of content inside left column and right column.
I have added class .templateColumns to the table
https://codepen.io/srajagop/pen/NjZVpo?editors=1100
Note: nth-child is not supported by all the email readers, gmail doesnt support it
This is what you are after. I have taken one table of yours and given an example of how column swapping can be done. You will need to keep both the elements together for it to work.
The method used here is called hybrid. Both columns are created using div's which is encased in a td
<td valign="top" bgcolor="#FFFFFF" class="templateColumnContainer" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px; direction:rtl;">
This td has direction which will tells everytrhing inside the div to be right to left (direction:rtl)
Next each columns are created using div's which are 50% width of the container td.
<div style="width:100%;max-width:280px;display: inline-block; vertical-align: top; direction:ltr;">
</div>
These div's have a max width of 280px, width of 100% and direction set to left to right (direction:ltr)
Everything inside the div can be coded as 100% width table.
I have added what people call ghost columns. This is Outlook conditional statement that tells outlook that this is a column.
#media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.hundred{width:100% !important;}
}
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td valign="top" bgcolor="#FFFFFF" class="templateColumnContainer" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px; direction:rtl;">
<div style="width:100%;max-width:280px;display: inline-block; vertical-align: top; direction:ltr;">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<p style ="font-size:21px; color:#009DE0; line-height: 22px;"> Selección de profesionales en plantilla o freelance.</p>
<p style="font-size: 13px; line-height: 19px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" align="left" valign="top">
<![endif]-->
<div style="width:100%;max-width:280px; display: inline-block; vertical-align: top; direction:ltr;">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
For the second row of code you can swap the divs around to get the desired result.
Let me know if any of this didnt make sense or you want me to explain further.
Cheers
You can use the HTML dir attribute to manipulate the layout despite what the source order of each column is.
If you layout the email how you want it to appear on mobile, you can then then change the desktop layout using the dir attribute. Using your code, here's an example of a two-column layout where the image will stack above the text on mobile, but appear in the right column on desktop:
<!-- dir=rtl is where the magic happens (rtl = right to left). This swaps the alignment on wide while maintaining stack order on narrow. -->
<table dir="rtl" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<!-- put this column first in the source order so the image stacks on top of the text on mobile -->
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent" dir="ltr">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
<!-- put this column first in the source order so the image stacks on top of the text on mobile -->
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent" dir="ltr">
<p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
<p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Using your existing media query to stack the columns should work wth this code.
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....
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>
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 hate writing email templates.
with that said, i have a pretty good table'd template created yet Outlook 2007 and Outlook 2010 is creating a lot of spacing between the TR than I notice in other email clients.
OL 2007 (http://screencast.com/t/YJ5LdTkiGR)
OL 2010 (http://screencast.com/t/Ob1ii370C)
The code is found below. Any help in getting things to work in Outlook would be greatly appreciated so I can learn and next time not have to bug you :)
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Please try to use below inline style to empty tds avoid more spacing of because empty tds
style="font-size:0%; line-height:1px; mso-line-height-rule:exactly;"
simple and happy coding
The extra space is caused by this empty row:
<tr>
<td> </td>
</tr>
Try replacing that row with:
<tr>
<td height="0" style="padding: 0; margin: 0; height: 0;"></td>
</tr>
Alternatively, sometimes when dealing with Outlook it's easiest to use <br> for spacing.
Here's your full HTML with 2 <br> added at the end of the last paragraph:
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.<br><br>
</td>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0" style="display:block">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>