Please help, I'm at my wits end as I'm trying to make a responsive email, going from two columns to a single one, everything goes perfect until I reach Outlook2013, it adds a single black line to the right of each table that is aligned next to each other.
I've tried to reset it with the border-collapse:collapse function, but it's not having any effect.
I basically have two tables left aligned in a tablecell.
<tr>
<td align="left" style="border-collapse:collapse"><table width="300" border="0" style="border-collapse:collapse" cellspacing="0" cellpadding="0" class="contenttable" align="left">
<tr>
<td align="left" class="headercell" height="399" width="300" style="line-height:399px"><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="image" style="display:block; width:100% height:auto" alt="" border="0px" height="399" width="300" /></p></td>
</table> <table width="300" border="0" cellspacing="0" cellpadding="0" class="contenttable" style=" border-collapse:collapse" align="left">
<tr>
<td align="left" class="headercell"><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="image" style="display:block; width:100% height:auto" alt="" /></p></td>
</table></td>
</tr>
Usually I find that the colour of the mystery border is the same as the background-color on the body element. EG if you have a green background with white content areas, the lines will be green on white.
To fix it in this case you can set the body background to be white and that will fix it. The gaps are still there, but you can't see them. You would then apply the green background colour to a container table instead.
Yeah. That's Outlook showing the 1px gaps/borders it keeps between floated tables. You cannot get rid of it. Kinda. You can recolor it though.
For the little 1px gaps/lines you need to add:
border: 1px solid #COLOR;
to every floated table being sure to adjust the width of your tables to avoid "float drop". Where #COLOR is the background color of your tables.
If you're having problems with BIG gaps you need to put this in your head in a style tag:
table {mso-table-lspace:0pt;mso-table-rspace:0pt; border-collapse:collapse;}
Related
I have an HTML e-mail that is breaking on Outlook 2013. Between every row, there is a white space: Photo
Every image is set to display: block, I have added border-collapse: collapse to the table and page-break-before: always to table rows but nothing had effect...
set the cellpadding, spacing and border to 0
without seeing your code and knowing exactly what you have, below is sample of what I use and usually works in Outlook:
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td style="display:block; border-collapse:collapse;">
<img alt="Sample Image" src="http://placehold.it/230x150.png" width="230" style="display:block;" />
</td>
</tr>
</table>
Outlook ads a default font size of 13px. If you add a style of font-size: 1px and line height of 1px on the and the this might fix it.
This fixed it for me when I ran into this issue.
A pretty hacky way of fixing that is using margin-bottom: -10px; or w.e
Perhaps specifically set the padding/margin to 0px.
I've been screwing around with this for almost 2 hours and still can't get it to render the right way in Microsoft Outlook.
It was enough of a pain to get it to render in Internet Explorer, but I got it:
Still, here's how it looks as an HTML email in Outlook:
Don't worry about the line break for now; the problems I need to fix are
(1) The 1 pixel of white vertical space between the left piece and center piece
(2) The center piece having pixel more height than the left and right pieces
Here's the HTML:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
<td align="left" valign="center" bgcolor="#0a9fda" style="padding: 0 10px;" width="220" height="35">
CLICK HERE TO LEARN MORE
</td>
<td align="left" width="6">
<img src="images/right-button-corner.png" style="display:block;" height="35"/>
</td>
</tr>
</table>
If I can't get it, I'm going to give up and use a single image. Any input much appreciated!
In regard to the height issue.
The height of the middle td is the content height (in this case it is line-height) + padding-top + padding-bottom.
You can remove padding declaration and valign and width attributes to make text vertically aligned to the middle and your button will be scaling horizontally (no breaks). I assume that would be good choice, considering you coded fixed height value of 35px.
Example of the middle <td>:
<td align="center" bgcolor="#0a9fda" style="height: 35px;" height="35">
<a href="http://example.com" style="color: #FFF; font-size: 14px;
font-family: Arial; text-decoration: none;">
CLICK HERE TO LEARN MORE</a>
</td>
Additional Notes
You can control how the call-to-action text should break by using entity. For example CLICK HERE TO LEARN MORE will break after "HERE" if the td width is insufficient to fit the text in one line.
Images should have border: none inline style to prevent uncontrolled gaps.
Also note, that valign attribute value center is incorrect. It can have values of top, bottom, or middle which is default.
There are more issues with your code.
Validate your code with some tool, for example http://validator.w3.org/.
I would try the following.
Try align="right" on the left button image:
<td align="right" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
I am coding a html email, the problem is that I have a black border around my table, when I slcide psd make it no image and set background color like this
<td width="640" height="2" colspan="16" style="background-color:#666666;">
left and right <td> look ok in html and the email client, but the upper and bottom one are bit expanded, see attached image for this
This is in my laptop upper <td>
and this is how it looks in emails
code is simple as
<td width="640" height="2" colspan="16" style="background-color:#666666;">
</td>
What's the problem with it? Please help ..!
Outlook expands all table cells to a minimum of 19px high. This is something you'll need to work around in html email design. One method is to create a 20px high image that has your 2px border across the bottom.
Add this to your CSS and see how it works:
body
{
margin: 0;
padding: 0;
}
try adding
style="border-collapse:collapse;"
to your
<table>
like this
<table style="border-collapse:collapse;">
Your table has borders, as is the standard. This is my snippet for all of my tables' structure-
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left">
</td>
</tr>
</table>
Is there a spacer gif in your TD ?
If yes, the trick is simple :
<img src="SPACER" border="0" style="display:block;" height="x" width="y" alt="" />
This will collapse the white space around your images. Make sure you set the same height to your td and img also.
I think you might need to add some position property
Try position: absolute
I'm working on an HTML email campaign (no CSS allowed) so I'm forced to use tables, something I'm not super familiar with. I've got everything looking right EXCEPT the table borders. Whenever I create a new <tr> I cannot for the life of me get rid of the inner border around the content. I have tried a few tricks (border="0px", bordercolor="white", bordercolor="#ffffff", etc), but whenever I send a test message, the borders still show up black around my text and images.
This is really messing with my design flow.
Is there any trick I don't know to getting rid of HTML table borders? Help!
<table border="0" cellpadding="0" cellspacing="0" width="100%" style = "border-collapse: collapse;">
Apply this:
style = "border-collapse: collapse;"
To every table cell, the border should not be visible anymore.
If the content is an image, try <td valign="top"> for all <td> with images inside.
Besides that, the table tag should be <table cellpadding="0" cellspacing="0" ...>. One more tip, use inline style for the borders that you want.
To get rid of the table borders, use <table border="0">.
Try this:
In head:
<style type="text/css">
table td {border-collapse: collapse;}
</style>
Table:
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border:2px solid #000000;">
<tr>
<td width="50%" bgcolor="#999999" style="padding:20px;">
...
</td>
<td width="50%" bgcolor="#888888" style="padding:20px;">
...
</td>
</tr>
<tr>
<td width="50%" bgcolor="#777777" style="padding:20px;">
...
</td>
<td width="50%" bgcolor="#666666" style="padding:20px;">
...
</td>
</tr>
</table>
Also, always keep cellpadding and cellspacing at zero. Use padding in your cells if you want spacing.
Use <table border="0"> without px?
How about
<table style="border-collapse: collapse;">
<!-- ... -->
</table>
? Such inline CSS should work fine even in HTML email.
Just came across this tip that actually works (at least for iOS):
To prevent [hairline borders] from happening nest the problematic
table into a new table with a background color that matches that of
the inner table.
Source: http://www.informz.com/blog/template-design/quick-tip-removing-hairline-borders-in-html-emails-on-iphone-ipad/ (includes photos of source code)
Following worked for me:
border: 0px solid white;
border-collapse: collapse;