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
Related
I'm trying to make the table wide from border to boarder but it didn't went as expected. Bellow is an example
<table style="width: 100%;" cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
<tr>
<td bgcolor="$bordercolor">
</td>
</tr>
</table>
I want the table to start excatly from the boarder of the page but there is still a little space, the white space, before it begins. You know why? Attached picture
I'd suggest trying the below;
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
Here's an example: https://jsfiddle.net/x1tvohas/
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.
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>
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;}
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;