I have an html email set up as
<td valign="top"><table width="650" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr>
<td width="25" valign="top">
<img src="/images/left_border.jpg" border="0" align="right" style="padding:0; display: block;">
</td>
<td width="600" valign="top" style="padding: 0px;">
<img src="/images/banner.jpg" border="0" align="left" style="padding:0; display: block;">
</td>
<td width="25" align="left">
<img src="/images/right_border.jpg" border="0" align="left" style="padding:0; display: block;">
</td>
</tr>
</table>
</td>
However in outlook 2003 and entourage email clients, it appears as an additional border on left and right sides.
How can it be resolved?
It's not going to work well in Outlook 2007+ either because you're using non-compatible tags including padding: and display:. So, back to the drawing board all around. Here's a refresher on what the various browsers support: http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_27_Aug_2009.pdf
Technically, the code you posted is invalid because it starts with a <td> which has to be inside a <table> and <tr> to be valid. I'm suspecting you posted just a snippet, so perhaps providing the entire context would be best.
Related
I have a recurrent issue with Outlook email rendering, gaps appear in the email
It looks like lines between the table and the color of the background doesn't apply
Here is an example :
email screenshot
I know this is an issue that is common but I couldn't find a solution with the search bar
Here is some code :
<table class="responsive-table" border="0" cellspacing="0" cellpadding="0" align="center" width="650" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" >
<img src="picto-Certifie-BIO.png" alt="Certifie BIO" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="picto-Anti-gaspi.png" alt="Anti gaspi" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="picto-Clean-et-naturel.png" alt="Clean et naturel" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="Picto-Fait-en-France.png" alt="Fait en France" width="100" height="100" />
</td>
</tr>
</tbody>
</table>
Thank you for your help,
Hind
I'm sharing here what I found out it case someone needs it:
The issue was with the tables height, so I had to find ways to reduce the height of the tables surrounding the ones with the gaps.
Here is a link that helped me (in French)
https://www.badsender.com/2019/05/28/bug-daffichage-sur-outlook-2016/
So below is this table. It essentially creates a grid of images that goes into an email. because it is an email I need the styling to be in-line. The grid looks great on a desktop but when viewed on a mobile device each table aligns to the left leaving a white space to the right. however, if I change the align tag, the grid no longer works on desktop.
Is there a way with in-line stylings to either get the content to align to the center when viewed on mobile only Or at least get the table to fill the container when viewed on a smaller screen?
<tbody>
<tr>
<td>
<tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">
</tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
</td>
</tr>
<tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">
</tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
</td>
</tr>
</tbody>
</table>```
I do not know if the table is so important to use ,
but you can do this by simply put the images in for example and the div style will be:
{
display: flex;
flex-direction: column;
align-items: center;
width: '100[%,vw]'; // may not necessary
}
css flex is so important for responsive design.
if not, put your table within div and give the style to the div
mobile device size (width) is generaly <= 768px (without resolution)
I am having a outlook html email nightmare here.. Basically there is one table and one image on the top and content on the bottom.:
The image is always substracting 1px so it is never 100% with the table. Anyone knows a solution?
<table cellpadding="0" cellspacing="0" style=
"margin-left:2px;padding:0px; width:846px; background-color:#000">
<tr>
<td>
<div style="font-size: 0px;"><img border="0" src=
"img/header1.jpg" style=
"display:block;align:bottom;border:none;padding:0; width:846px;"></div>
</td>
</tr>
<tr>
<td>Blah.. Content</td>
</tr>
</table>
I'm pretty sure this is from outlook's issue with border-collapse. Try this:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left" valign="top">
<img src="http://placekitten.com/g/640/300" width="640" height="300" alt="" style="display:block;" border="0" />
</td>
</tr>
</table>
Use the img tag for images.
Outlook uses Word for rendering HTML markup. You can read more about that in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.
Here's what I was able to accomplishd till so far.
The code is present here. Can anyone please help with this?
Updated answer:
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
<!-- The nested way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="80" bgcolor="#007700">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
<td width="100" height="80" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="80" bgcolor="#FFFFFF">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
<br><br>
<!-- The fancy rowspan way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
<td width="100" height="80" rowspan="2" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
Original answer:
For basic positioning:
Horizontally, use align="left|center|right", vertically use valign="top|middle|bottom"
Here is how to place an image center top of a table:
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td height="500" align="center" valign="top">
<img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
As I said:
If it was me i would make the top border and the image a row. – Alex
Thomas 23 mins ago
Change you top row to:
<td valign="bottom">
<b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;"> </b>
</td>
<td class="text-center" width="64">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td>
<td valign="bottom">
<b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;"> </b>
</td>
check out the result - http://jsfiddle.net/562ux.
I've not tested this in a email Client, but as #Kheema Pandey says, you should try to use inline styles.
It is a good practice to use inline style while creating newsletter. Also outlook doesn't support margin negative property.
in your case the image is not appear center so you can use a inline style here 'style="text-align:center;"'.
<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>
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...