I'm trying to create a newsletter template in order to paint different lines for every product but the HR tag is not working...
I've been trying with divs, table, CSS properties but none of them seems to be a good solution.
It is working in my Chrome but after sending the template to the provider the HR disappears.
Does someone know how to solve it? Why is it?
I've created a table instead of a hr tag, but is not working in Gmail... (working in Outlook, Aol and Yahoo).
<table style='border-collapse: collapse; width: 100%;'>
<tr style='border-bottom: 1px solid #BDBDBD;'>
<th> </th>
</tr>
</table>
Check the presence of <hr> tag in your DOM using developer tools, does it exist there in your page or your DOM is not loading that hr tag in first place.
Just try this. This will work out!
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background:none; border-bottom: 1px solid #BDBDBD; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td>
</tr>
</table>
The hr approach works well on Gmail, as well as the latest Outlook also.
<hr height="1" style="height:1px; border:0 none; color: #BDBDBD; background-color: #BDBDBD; margin-top:1.5em; margin-bottom:1.5em;">
Related
This code only works for Internet Explorer 6, I don't know how to make it work for Firefox. I'm using hyperlinks that contain table rows to change the content on the page. However, on firefox the links become unclickable...
Here is the CSS:
#sidebar {display:block; top:116px; left:11px; width:150px; position:fixed;}
.sidebarLink a:hover td { cursor:pointer; background-color:#f60;
color:#fff; border: 1px solid #f60;;}
.sidebarLink td{background-color:#fff; color:#f60; border: 1px solid #ccc;;}
.sidebarLink {font-family: sans-serif; font-weight: bold; font-size: small;}
And the HTML:
<div id="sidebar">
<table style="table-layout: fixed; word-wrap: break-word border-collapse: collapse;" class="sidebarLink" cellpadding="5" cellspacing="4" width="150">
<a href="index.php?test=table1">
<tr align="middle">
<td>Link 1</td>
</tr>
</a>
<a href="index.php?test=table2">
<tr width="90" align="middle">
<td>Link 2</td>
</tr>
</a>
</table>
</div>
I could turn this into a form with buttons and style the buttons to look like I have the table right now. The problem is that causes a performance issue with the table itself and the onHover feature so it would be great if someone knows a way to make this function in firefox.
That's completely bogus HTML and I'm amazed it even works in IE6. You can't just put arbitrary elements between a table and its cells.
It doesn't look like you should need a table for this at all? Just have the two links (maybe in a list) and give them display: inline-block; and width: 75px;.
Incidentally, there are more browsers than Firefox and IE6 nowadays, and IE6 has got to be wayyy at the bottom of the popularity ladder by now. Even Google largely gave up on it years ago.
Why not do:
<div id="sidebar">
<table style="table-layout: fixed; word-wrap: break-word border-collapse: collapse;" class="sidebarLink" cellpadding="5" cellspacing="4" width="150">
<tr align="middle">
<td> Link 1</td>
</tr>
<tr width="90" align="middle">
<td>Link 2</td>
</tr>
</table>
</div>
I have the following code in my html email.. it's inside a table field:
<span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span>
Now, this 'orange line' does show up in html email when it's send to Thunderbird, but a recipient that uses Outlook 2010 doesn't see the line.
And yes, I know there is another thread about this, but I tried that solution (only difference I saw was that I had display:block instead of display:inline-block;).. and it didn't work.
Any other suggestions?
table:
<table border=0 cellpadding=5 cellspacing=0 style="font:300 15px/1.625 'Helvetica Neue',Helvetica,Arial,sans-serif">
<tr><td colspan=5><span class=solid style="width:100%;height:1px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr>
<td nowrap style="font-size:12px;" colspan=2>Item Description</td>
<td width=50 nowrap style="font-size:12px;">Price</td>
<td width=50 style="font-size:12px;">Quantity</td>
<td width=50 nowrap style="font-size:12px;">Sub Total</td>
</tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr>
<td valign=top>
</td><td style="font-size: 10px;" nowrap valign=top><h2 style="margin:0;">Vitamin C </h2></td>
<td nowrap valign=top>$39.95</td>
<td nowrap valign=top><input type="text" name="qty1" value="3" size=2 readonly=readonly></td>
<td nowrap valign=top>$1.00 </td></tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:block;"></span></td></tr>
<tr><td colspan=4>Order Subtotal</td><td>$1.00</td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px dashed #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3> </td>
<td colspan=2>[checkout]</td></tr></table>
When the table does not appear in the emails.
I spent a lot of time researching and in the end I found the solution.
Here I leave a code that has served me in Outlook emails and iMac Mail.
To show the table:
<table rules="all" bordercolor="#4d4c4d" border="1" bgcolor="#FFFFFF" cellpadding="10" align="center" width="800">
</table >
I hope it serves you.
It seems you could put the border on the TD instead of the SPAN, that works in OL 2010.
I added:
.solid1 {border-top:1px solid #f89d30;}
.dashed1 {border-top:1px dashed #f89d30;}
used those in the TD that encloses the span, deleted the spans completely and replaced them with and now it looks the same in outlook as it does in browser (and the same as your original html).
#Malachi you also need to include a background colour for your <td>
so
<td bgcolor="#da5903" style="height:5px;">
<img src="mydomain.com/orangepixel.gif" alt="" />
The gif is there purely to make the TD behave and fix to the right height. Background images are not always supported, so it is safer to use an IMG, the reason it is transparent is because you use the background colour on the TD, the image is purely to fix the height.
This might not be a complete answer, as I don't have access to an outlook 2010 client (see edit below), but here is my best attempt:
According to this, the display style property is not supported in outlook 2010:
http://campaignmonitor.cachefly.net/assets/files/css/campaign-monitor-guide-to-css-in-email-jan-2013.pdf?ver=1252
Since <span> is an inline element, and since display doesn't work in outlook 2010, then giving an inline element a border might not be supported in outlook 2010. Try to switch it to a div (or better, put the border-top style on the tr/ td)
e.g.
<tr><td colspan="5"><div class="solid" style="width:100%;height:1px;border-top:1px solid #f89d30;"></div></td></tr>
EDIT: just tested it on outlook 2010, it didn't do the trick.
What always worked for me for outlook, is to use a tr and td with height 1px, no padding or margin / spacing, and a 1px clear pixel image (or   and a very small font size)
Alternative to the accepted answer:
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
Source: https://powerusers.microsoft.com/t5/Power-Apps-Community-Blog/Create-HTML-Table-with-Border-while-sending-Email-using/ba-p/1437996
First of all, this is for email, so I can't put css in the head, only in the table, td, ul, etc.
I'll paste my code snippet and screenshots of what it looks like in IE, Firefox, and MS Outlook.
<html>
<head>
</head>
<body>
<table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
<tr bgcolor=#FF8100 valign="top">
<td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
<td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
</tr>
<tr bgcolor=#FFCA99 valign="top">
<td>Review
</td>
<td>
<ul style="margin: 0px 0px 0px 15px;">
<li>Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
<li>Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at #AGENT.FAX.)</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
It looks great in IE, but in Firefox there's a huge margin, and in Outlook, only a tiny part of the bullet is showing.
IE:
Firefox:
Outlook:
I have to assume the audience is likely to use all of these options to view this email, so how can I make it look good universally? I tried putting the padding in the ul style, I tried making a bullet image, using that as the li background image, and giving ul no style... that didn't work either. Everything I try looks horrible on at least 2 out of the 3 email views.
I'd really appreciate the help!
(Gmail is the strictest on what css will be interpreted, so I have to follow their rules. Those can be found here -> http://www.campaignmonitor.com/css/ You can see that Gmail on Android won't allow list-style-x, so I can't use any of them. I can only use the ones with all green check marks.)
Thanks!
-Holly
Put the padding on the td, not the ul, you probably need to reset the styles of ul and li elements too
<html>
<head>
</head>
<body>
<table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
<tr bgcolor=#FF8100 valign="top">
<td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
<td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
</tr>
<tr bgcolor=#FFCA99 valign="top">
<td>Review
</td>
<td style="padding-left:15px;">
<ul style="padding:0px;margin:0;">
<li>Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
<li>Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at #AGENT.FAX.)</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Simply resetting the padding/margins on the ul and li went pretty far! Thanks #keeg!
With this code:
<html>
<head>
</head>
<body>
<table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
<tr bgcolor=#FF8100 valign="top">
<td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
<td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
</tr>
<tr bgcolor=#FFCA99 valign="top">
<td>Review
</td>
<td style="padding-left:25px;">
<ul style="padding:0px;margin:0;">
<li style="padding:0px;margin:0;">Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
<li style="padding:0px;margin:0;">Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at #AGENT.FAX.)</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
It looks like this in IE, Firefox, and Outlook (in that order from top to bottom), which isn't perfect because of Outlook's view of it, but much more acceptable:
Padding is not supported in all email clients.
To insure correct spacing between list items, don't make it a list.
Sorry.
<tr>
<td width="10">•</td><td width="5" style="font-size:1px;"> </td><td... content</td>
</tr>
<tr>
<td width="10" height="5" style="font-size:1px; line-height:1px;"> </td> etc...
empty TDs don't display in IE, TDs without a font-size render as default (say 12px) size in IE and many, many more things like this. Declaring an empty row with height and styling of font-size and line-height on the empty table cells fixes the space between items.
Hi i have a issue in outlook 2010 i want to give 10px space between the tds but its not working. please help.
<table style="cellspacing:0px;cellpadding:0px;border:0;border-spacing:10px;">
<tbody>
<tr>
<td id="cont0" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link0" href="#" style="border:0">
<img id="previewimage0" style="border:0" src="http://i.sample.com/00/s/MTY2WDIwMA==/$(KGrHgoS,KEEk,K!Bv9GBQIi!CNhLg~~60_0.JPG">
</a>
</td>
<td id="cont1" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link1" href="#" style="border:0">
<img id="previewimage1" style="border:0" src="http://i.sample.com/00/s/MTQ5WDIwMA==/$(KGrHqERQ,IE+tWswcklBQIi!C8rQg~~60_0.JPG">
</a>
</td>
</tr>
</tbody>
</table>
try adding a table cell between them with the width of 10px :
</td>
<!-- your first td ends -->
<!-- the spacer td -->
<td align="top" width="10> </td>
<!-- your second td begins -->
<td id="cont1" align="top">
Works for my email templates everytime in all email clients.
Try adding the cellspacing property to the table tag
<table cellspacing="10" style="border:0;">
Marks answer will do the job perfectly, don't add cellspacing or cellpadding as it is incredibly inconsistent across email clients, I would also say don't use margin and padding for the same reason but in rare cases where you cannot use any other spacing method you wont have any choice. For your border I would also avoid using the shorthand and set each part of the border individually:
border-color: #ffffff;
border-style: solid;
border-width: 1px;
as some clients will just ignore the shorthand version.
where possible you should use html styling rather than inline css, as even though inline is the only real way to use css, html is still more widely recognised across older email clients.
valign="top"
cellpadding="0"
cellspacing="0"
all of these can be added to the tag rather than including them in styles. This will ensure any old clients or even just company webmails wont kick up a fuss.
I know you didn't ask about it, but just for consistencies sake I thought I would point that out.
The DITA Open Toolkit automatically inflicts some inline table attributes when one publishes to HTML, including frame="border" and rules="all".
I need to override this "rules" attribute using CSS styles for cells, and while I can get the desired result in IE and Chrome, Firefox puts solid black gridlines in the table and refuses to budge on the matter.
Obviously I can't edit the HTML, company policy is to not edit the XSLT, so how can I remove these gridlines using CSS alone?
I've tried various cunning combinations of border-xxxxxx styles and given them !important declarations to no effect.
The HTML says...
<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all">
<thead>
<tr>
<th class="cellrowborder">Type </th>
<th class="cellrowborder">Comment </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder">Caution </td>
<td class="cellrowborder">Think twice. </td>
</tr>
<tr>
<td class="cellrowborder">Attention </td>
<td class="cellrowborder">Be careful. </td>
</tr>
<tr>
<td class="cellrowborder">Danger </td>
<td class="cellrowborder" >Be scared. Be very scared. </td>
</tr>
</tbody>
</table>
The CSS says
table {border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
font-size: 9pt;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px;}
tr {border: none;}
.cellrowborder {border: none;}
So while it looks as I'd expect in IE, it doesn't in Firefox UNLESS I remove those frame/border/rules attributes in the HTML. Which I can't in production.
Use jQuery's remove attribute on document load to remove the old attributes all together.
api.jquery.com/removeAttr
I've had a quick play with <table frame="border" rules="all">. The key seems to be to override it with another border, for example:
table {
border: none;
border-collapse: collapse;
}
td {
border: 1px solid silver;
}
It's not ideal if you need to remove the border altogether, but I guess you could match the border-color to the page background?
border-color seems to apply.
Maybe using FireBug Inspect Element can help you detect the CSS property and allow you to target it in Firefox (instructions here).
Can you post an example of the code?