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;
Related
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
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;}
Yes, html emails are bad but I have to send html newsletter to my a list of clients. Most of them use Hotmail.
Is it possible to add a CSS border around a <table> / <div> element?
<div style="border:1px solid #000000;">BORDER</div> doesn't work
Looks like the best option is creating a table within a table:
<table bgcolor="#ACD13C" width="100%" cellpadding="2" cellspacing="0"><tr>
<td><table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="font-weight: normal; font-size: 0.9em; color: #000000; font-family: Arial,helvetica,sans; padding:0px; text-align:left;" width="400">Text goes here</td>
</tr>
</table></td></tr></table>
Hotmail just doesn't like borders...
try to use
border="1"
try to use
<div style="border:1px solid black;">Hola</div>
if it works
One way to avoid specifying for a generic name like "black" or a shortened version of the hex color (like "#000", which does not always work) is to specify each element seperately like so:
<table style="border-style:solid; border-width:1px; border-color:#000000;"><tr><td>....</td></tr></table>
I use Drupal 6 with theme summertime. Also I use FCKeditor. In order to align content I wanted to create a table with invisible borders. First I tried FCKEditor table properties and I gave 0 to border size in order to make borders invisible. But it did not work. I looked up the source and non working code was like below (Why giving border="0" did not work?) :
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td>
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
</table>
Then I tried:
<table width="468" cellspacing="0" cellpadding="0" style="border: medium hidden ; width: 468px; height: 201px;">
Table borders are now invisible but cell borders are still visible. How can I make it totally invisible. Thanks.
The border attribute should be specified on the cell level, eg <td style="border: 0;">. Of course, this should be made in CSS using:
table td { border: 0; }
But I see that in your case that might be difficult.
It should be done like this:
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td style="border: 0">
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td style="border: 0"><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
There are probably borders set in the CSS. Drupal core's system.css sets some borders on table headers and body that can be a pain to override.
You can add a custom CSS file to the theme so you avoid editing its CSS directly. Simply add the path to your added .css file in the theme's .info file.
Then try adding:
tbody,
thead,
thead th,
tr.even,
tr.odd {
border: 0;
}
Don't forget to turn off CSS aggregation and clear your cache.
I just happened upon this while searching for something else. This is old, but thought I'd comment anyway. Someone else might find it helpful.
Rather than do a few of the things mentioned above, it would be simpler to just add a specific ID or CLASS name to the table itself, then you could specify settings just for that table in the CSS.
HTML:
<table .... id="exampleclass">
CSS:
#exampleclass tbody,
#exampleclass thead,
#exampleclass th {
border: 0;
}