I'm sending an html-formatted email with a link like this:
click here
It works fine in most email clients, but for a very small percentage of recipients, they receive a modified link that either removes the "." before "com" or adds a second "." before the com. Like one of these:
click here
click here
I can think of two possible causes
A bug in a mail server or email client
I'm thinking this is the more likely cause. The dot that gets doubled is the first dot on a line (see below), which seems to be part of the SMTP spec ("dot stuffing"). Some server or client is likely processing this incorrectly.
If this is the case, I still don't know how to prevent it from happening.
A formatting error in the email content that I'm sending
I've copied the email as received by gmail below. I've tried to remove unnecessary detail but keep anything that could potentially cause a problem.
Perhaps there is a special character that I should be escaping or encoding in a different way. I've seen conflicting info about whether to use \n or \r\n for line endings so not sure if that is relevant.
I can reformat my email template so that the dot in ".com" won't ever be the first dot on a line, but there could be other dots that could be first on a line.
Any insights would be greatly appreciated. This has been an infuriating bug!
--7322d27723a96e14a03643b49db19027e8314f2950d710d4f12530b99277
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain; charset=UTF-8
Mime-Version: 1.0
Use this link:
https://www.example.com/123?e=3Duser%40examp=
le.com&c=abcde
--7322d27723a96e14a03643b49db19027e8314f2950d710d4f12530b99277
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset=UTF-8
Mime-Version: 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.=
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=3D"http://www.w3.org/1999/xhtml">
<head><meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3DUTF=
-8" />
<title></title>
</head>
<body>
<table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" height=3D"100%" id=
=3D"bodyTable" width=3D"100%">
<tbody>
<tr>
<td align=3D"center" valign=3D"top">
<table border=3D"0" cellpadding=3D"20" cellspacing=3D"0" id=3D"emailContain=
er" width=3D"600">
<tbody>
<tr bgcolor=3D"#3d486f">
<td align=3D"center" style=3D"padding:10px 0;">
</td>
</tr>
<tr>
<td valign=3D"top">
<p>Click on this button:</p>
<p align=3D"center" style=3D"margin:20px 0;"><a href=3D"https://www.example=
.com/123?e=3Duser%40example.com&c=abc=
de" style=3D"padding:10px 25px; color:#FFF; text-decoration:none; cu=
rsor:pointer; border-radius:5px; background-color:#3d486f;">Vote</a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
--7322d27723a96e14a03643b49db19027e8314f2950d710d4f12530b99277--
Related
I did a template for our email marketing campaing. But on gmail, msn (browser based) are good but on outlook is bad. How can i solve the problem ?
A piece of my code:
<td valign="top" width="194" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="194px" height="194px" style="background-color:#fafafa; margin-top:20px;">
<tr mc:repeatable>
<td valign="top">
<img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" style="max-width:69px;float:left;margin-right:15px;" mc:label="image" mc:edit="tiwc200_image01" /><h4 class="h4" style="float: left;">ARAMA</h4>
<div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
</div>
</td>
</tr>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
You need to re-declare your font stack in every table cell.
Also, avoid margin, instead use padding in <td> tags.
Float is also not widely supported. If you want to float, you should be using align="left" instead, but for your example, it is better to keep it in tables.
Your code should look something like this:
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="60">
<img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" mc:label="image" mc:edit="tiwc200_image01" />
</td>
<td width="140" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; font-weight:bold; padding-left:15px; font">
ARAMA
</td>
</tr>
<tr>
<td width="100%" colspan="2" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
</div>
</td>
</tr>
</table>
I set the table width 200, you could change it to percentage based if you prefer.
Getting HTML emails to look great across all clients is something that pretty much everyone who has tried to do email marketing runs into. There is no simple answer to your question, but I would start by following some of this advice and testing your email templates with a tool like litmus.
Float simply will not work in Outlook 2007+. Versions of Outlook for Windows from 2007+ use Office as the rendering engine, and thus won't render standard HTML properly.
Align will often work, but the safest course of action is to create a two-column table with the image on the left and the text on the right. The image column should have an explicitly set width. (Don't try to make the table more than one row. In email HTML, it's better to nest a series of simple tables than to create one complex one.)
Make sure that you use the appopriate old-style pre-HTML 4 tag attributes in your table tags. In particular, to get your layout, make sure that the table cells have "valign='middle'".
If you're sending through one of the major email service providers, such as Mailchimp or Campaign Monitor (and you should be, to protect the integrity of your list), it will inline all your style code for you -- so you don't actually need to redeclare the styles for every table cell, you can simply use an embedded stylesheet.
We are managing CQ5 groups using the REST interface. To add a user we do
POST http://$host:$port/home/groups/t/test_group.rw.html
Content-Type: application/x-www-form-urlencoded
addMembers:my_principal_name
which works as expected as long as the the name contains ASCII characters only.
We tried to use latin 1 (ISO-8859-1). For example for a principal name ü:
POST http://$host:$port/home/groups/t/test_group.rw.html
Content-Type: application/x-www-form-urlencoded
addMembers:%FC
In this case no error is generated but the principal is not added.
Our workaround is to use UTF-8 and URL-encode it twice. ü is C3BC, URL-encoded it becomes %C3%BC and encoded another time %25C3%25BC
Summarizing, to add a member ü we have to submit
POST http://$host:$port/home/groups/t/test_group.rw.html
Content-Type: application/x-www-form-urlencoded
addMembers:%25C3%25BC
which works as expected.
Is this a bug or the API really requires to send UTF-8-encoded strings URL encoded twice?
Edit I tried with the additional _charset_ parameter
telnet ******** 8000
Trying ********...
Connected to ********.
Escape character is '^]'.
POST /home/groups/nethz/lz/06065.rw.html HTTP/1.1
Host: *********:8000
Content-Type: application/x-www-form-urlencoded
Cache-Control: no-cache
Authorization: Basic ****************=
_charset_=UTF-8&addMembers=aaaa_testgr%C3%BCppli
HTTP/1.1 200 OK
Connection: Keep-Alive
Server: Day-Servlet-Engine/4.1.44
Content-Type: text/html;charset=UTF-8
Date: Fri, 04 Oct 2013 10:50:19 GMT
Transfer-Encoding: chunked
4f6
<html>
<head>
<title>Content modified /home/groups/nethz/lz/06065</title>
</head>
<body>
<h1>Content modified /home/groups/nethz/lz/06065</h1>
<table>
<tbody>
<tr>
<td>Status</td>
<td><div id="Status">200</div></td>
</tr>
<tr>
<td>Message</td>
<td><div id="Message">OK</div></td>
</tr>
<tr>
<td>Location</td>
<td></td>
</tr>
<tr>
<td>Parent Location</td>
<td></td>
</tr>
<tr>
<td>Path</td>
<td><div id="Path">/home/groups/nethz/lz/06065</div></td>
</tr>
<tr>
<td>Referer</td>
<td></td>
</tr>
<tr>
<td>ChangeLog</td>
<td><div id="ChangeLog"><pre></pre></div></td>
</tr>
</tbody>
</table>
<p>Go Back</p>
<p>Modified Resource</p>
<p>Parent of Modified Resource</p>
</body>
</html>
0
Connection closed by foreign host.
We are getting a status 200 answer, but the subgroup aaaa_testgrüppli (aaa_testgr%C3%BCppli) is not inserted in /home/groups/nethz/lz/06065
Sling gets request encoding from the _charset_ POST parameter. ISO-8859-1 is a fallback value. Try setting this parameter to UTF-8.
I often link to GitHub source code via the #L param in the URI.
e.g. : https://github.com/github/learn.github.com/blob/gh-pages/episodes.yaml#L1
But is there a way to link to lines within a Markdown file?
e.g. https://github.com/github/learn.github.com/blob/gh-pages/README.md#L1 (does not work!)
I know I can link to 'sections', but lines are much better!
e.g. https://github.com/github/learn.github.com/blob/gh-pages/README.md#learngithubcom
As it is currently not possible, I take the next best option: use blame and then highlight the lines, e.g. https://github.com/rails/rails/blame/master/guides/source/configuring.md#L166
Now Supported with ?plain=1
Announced on June 30, 2021, there is now a parameter to disable markdown rendering:
Appending ?plain=1 to the url for any Markdown file will now display the file without rendering. As with other code files, it will also show line numbers, and can be used to link other users to a specific line or lines. For example, appending ?plain=1#L52 will highlight line 52 of a plain text Markdown file.
It sounded like you might want to use line numbers to link to a point in the rendered document. That is still possible, nor is it a standard feature of markdown renders to add line number anchors like that.
For the benefit of the reader: The long answer is yes, it is difficult, but possible.
GitHub allows to inline permalinks to the text portion of Markdown files
However there seems currently to be no way to create such permalinks directly, you must manually create them. As follows:
Display the markdown document
Above the document on the right click on the shortened SHA of the document
(you can use "History" and the commit in question as well)
The commit's diff is shown.
Above the commit on the right click on the the 3 dots ... and select "View file"
Now the Mardown is presented again however it is the permanent variant.
Above the document on the right click on "Blame"
Scroll down to the lines which contain the Markdown representation of the text to cite
Select the line or lines in question
Copy the URL from the address bar of the browser
Paste the URL into the issue etc.
This step is only needed within issues: In the URL replace /blame/ by /blob/
In the preview of the Issue you will see the expected direct citing of the text portion of the Markdown.
Drawback of the /blob/-variant
If you click on the URL, you see the full Markdown in the browser, the text portion is not marked as expected.
This is a limitation on how GitHub handles those URLs.
Drawback of the /blame/-variant
It is plain unreadable because of all those annotations and non-rendering of the Markdown.
Example
Note that I had to clone this example to be able to create an issue:
https://github.com/hilbix/learn.github.com/blob/gh-pages/README.md
Click on the SHA
https://github.com/hilbix/learn.github.com/commit/38034b3aee7f4fb7f46e94b3f9c2b3d3554291ba
"View File"
https://github.com/hilbix/learn.github.com/blob/38034b3aee7f4fb7f46e94b3f9c2b3d3554291ba/README.md
"Blame"
https://github.com/hilbix/learn.github.com/blame/38034b3aee7f4fb7f46e94b3f9c2b3d3554291ba/README.md
Mark some lines
https://github.com/hilbix/learn.github.com/blame/38034b3aee7f4fb7f46e94b3f9c2b3d3554291ba/README.md#L20-L23
Change the URL
https://github.com/github/learn.github.com/blob/38034b3aee7f4fb7f46e94b3f9c2b3d3554291ba/README.md#L20-L23
Paste this URL into some issue
Result: https://github.com/hilbix/learn.github.com/issues/1
This was entered into the issue:
https://github.com/hilbix/learn.github.com/blob/38034b3aee7f4fb7f46e94b3f9c2b3d3554291ba/README.md#L20-L23
see https://stackoverflow.com/a/57202063/490291
This renders to something like
learn.github.com/README.md
Lines 20 to 23 in 38034b3
$ git clone https://github.com/github/learn.github.com
$ cd learn.github.com
$ script/bootstrap
$ jekyll --server
see https://stackoverflow.com/a/57202063/490291
Here is the full HTML of the issue created (sorry, I did not manage to copy the CSS, too):
<td class="d-block comment-body markdown-body js-comment-body">
<p></p><div class="border rounded-1 my-2">
<div class="f6 px-3 py-2 lh-condensed border-bottom bg-gray-light">
<p class="mb-0 text-bold">
learn.github.com/README.md
</p>
<p class="mb-0 text-gray-light">
Lines 20 to 23
in
<a data-pjax="true" class="commit-tease-sha" href="/hilbix/learn.github.com/commit/38034b3aee7f4fb7f46e94b3f9c2b3d3554291ba">38034b3</a>
</p>
</div>
<div itemprop="text" class="blob-wrapper blob-wrapper-embedded data">
<table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8">
<tbody><tr class="border-0">
<td id="L20" class="blob-num border-0 px-3 py-0 bg-white js-line-number" data-line-number="20"></td>
<td id="LC20" class="blob-code border-0 px-3 py-0 bg-white blob-code-inner js-file-line"> <span class="pl-s1">$ git clone https://github.com/github/learn.github.com</span> </td>
</tr>
<tr class="border-0">
<td id="L21" class="blob-num border-0 px-3 py-0 bg-white js-line-number" data-line-number="21"></td>
<td id="LC21" class="blob-code border-0 px-3 py-0 bg-white blob-code-inner js-file-line"> <span class="pl-s1">$ <span class="pl-c1">cd</span> learn.github.com</span> </td>
</tr>
<tr class="border-0">
<td id="L22" class="blob-num border-0 px-3 py-0 bg-white js-line-number" data-line-number="22"></td>
<td id="LC22" class="blob-code border-0 px-3 py-0 bg-white blob-code-inner js-file-line"> <span class="pl-s1">$ script/bootstrap</span> </td>
</tr>
<tr class="border-0">
<td id="L23" class="blob-num border-0 px-3 py-0 bg-white js-line-number" data-line-number="23"></td>
<td id="LC23" class="blob-code border-0 px-3 py-0 bg-white blob-code-inner js-file-line"> <span class="pl-s1">$ jekyll --server</span> </td>
</tr>
</tbody></table>
</div>
</div>
<p></p>
<p>see <a rel="nofollow" href="https://stackoverflow.com/a/57202063/490291">https://stackoverflow.com/a/57202063/490291</a></p>
</td>
I recently looked for the same. Answer is No, as mentioned in other answers.
But I found a good alternative which gives almost the same result we want.
Adding text fragment to url.
For example: https://github.com/github/balanced-employee-ip-agreement#:~:text=FAQ
You just have to append #:~:text={text-that-you-want-to-be-focussed} at the end of the url
read more about text fragment here.
https://wicg.github.io/scroll-to-text-fragment/
Short answer: no. Markdown is rendered into an HTML document by GitHub, so it's not currently possible to see it in a raw form that also allows you to link to individual lines. Maybe GitHub will implement this kind of functionality sometime in the future, but for now, it's not possible.
There's now support for this in the UI
This just dropped: https://twitter.com/github/status/1443572280924147717
Click on README.md in the directory you're looking at
Its URL will look like this: https://github.com/rust-lang/rust/blob/master/README.md
Click the "Display the source blob" button:
The URL will change to https://github.com/rust-lang/rust/blob/master/README.md?plain=1, as described in this answer
You can now click on line numbers and obtain links to these lines
There's still no such button to do this for .rst files, but adding ?plain=1 to the URL works: https://github.com/python/cpython/blob/main/README.rst?plain=1
When you want to link to a line in a file controlled by you, you can use <a>: https://stackoverflow.com/a/6494918/5053865
Example:
<a name="your_link_name">
Some line which you want to link to
</a>
... some wall of text ...
and here you are able to link to [the line](#your_link_name)
Example on GitHub: https://github.com/evis/markdown-link-to-line (it's in readme file).
This way, you can't refer to a line with a given number, but can refer to a line with needed content (which is exactly what you often need).
First off:
I hate Outlook :)
Here is why:
I am trying to send an email with the following structure (this is just a simplified example so please don't tell me "Just get rid of the middle tds")
<table width="400">
<tbody>
<tr>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
<td width="0"></td>
<td width="0"></td>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
</tr>
</tbody>
</table>
The problem is, that the two tds in the middle lead to a space between the two pictures as you can see in this screenshot http://i48.tinypic.com/6i8rvk.png
I feel like I have already tried everything possible.
cellpadding = 0, cellspacing = 0, border = 0 on table
setting the width of every td with inline css
adding border-collapse: collapse to all tds and the table
adding margin:0, padding:0; border 0; to all tds in inline css
setting the font-size and line-height to 0 in inline css
Nothing worked.
Side notes:
If there is only one empty table cell in the middle, the rendering is fine. So it seems as if each td only accounts for half a pixel
This is already a simplified example and I cannot change the structure of the table meaning that I have to find a workaround for the rendering problems rather than fixing the rather unpretty coding style unfortunately.
Testing
Here is my testing environment - feel free to play around with it: http://putsmail.com/d58ffa01c4b3e29123baab00754716
try putting padding-left and/or padding-right to the tds containing the images, as inline css.
Latest edit: try this --
<tr>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="right" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="left" ><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>
i removed the width from tds containing images, hence it takes the default width of the images.
Outlook doesn't like hiding content ;-) But what should work - add some conditional code:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed">
<tr>
<td style="width:217px" valign="top">
column 1
</td>
<!--[if !mso]><!--><td style="line-height:0;max-height:0;width:0;overflow:hidden;font-size:0;display:none" valign="top">
hidden column 2
</td>
<!--<![endif]--><td valign="top">
column 3
</td>
</tr>
</table>
To hide it from outlook, the comments around the column with [!mso / endif] are enough. However you may want to hide in also in outlook.com, gmail.com and some others - for this the other styles are included. Don't forget to restore the settings in mobile view with media queries.
Good luck
Oleg
Have you tried putting the <td>s on the same line? That is, removing the linebreak between elements?
(inner element linebreaks are ignored)
<td>Foo
</td><td>
Bar</td>
Does "display: none" help?
<table width="400">
<tbody>
<tr>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
<td width="0" style="display:none"></td>
<td width="0" style="display:none"></td>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
</tr>
</tbody>
</table>
Btw, I did not suffer your problem on Outlook 2003, so I cannot verify it.
I have continued trying to solve this problem - nothing (I have tried every proposal here and more) worked.
In the end I went the more difficult but also the cleanest way I believe and wrote a script that removes all empty columns and all empty rows with an xsl transformation. Now it works in Outlook 2003 - 2010.
I've been messing with this for far too long, and managed to get IE8 working, but IE7 has me stumped.
I've got a table, and for each column, I am trying to extract a number of divs. I am only extracting divs which match specific selectors, not all divs in the column.
My original jquery selector was
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
This worked great in FF, but didn't trigger the .each function at all in IE.
After messing around for a bit, I got to
jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') > div.a7', table#a+'tableId).each(function(){
alert(jQuery(this.attr('id'));
});
Not so nice, but works in IE8.
I had tried all sorts of combinations using .eq(+'columnNum+') but nothing else was working.
Now I go and test in IE7, and again the .each isn't being triggered.
What is the nicest way (and cross-browser compatible) to work with this sort of .each element?
--------------addition--------------
After further testing and playing around with suggestions from DrJ and bdukes, I've found that the table#'+tableId breaks the function in both IE7&8.
I've gone back to my original code
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
as that seems to me the most efficient.
If I remove 'table#a'+tableId, i get the correct response in all browsers, except that it is adding up the results from all tables, and I need to be able to get only the results from one table at a time.
I have also tried 'table#a'+tableId+'>td:nth-child('+columnNum+')').each, but that doesn't work either.
The first function i've used works perfectly in firefox.
----------------the html being selected---------------------------
The tables are being created dynamically in javascript so I can't really copy and past it, but here is what the output looks like. It ends up looking kinda like a gantt chart on a table.
<table id="a1">
<tr>
<th colspan="5">
Group Name
</th>
</tr>
<tr class="rowId1" >
<td>
<div class="a1" id="a43" style="margin-left:13px; width:60px" ></div>
</td>
<td>
</td>
<td>
<div class="a3" id="a93" style="margin-left:4px; width: 80px" ></div>
<div class="a2" id="a94" style="margin-left:4px; width: 30px" ></div>
</td>
<td>
<div class="a1" id="a24" style="margin-left: 15px; width: 65px;" ></div>
</td>
<td>
</td>
</tr>
</tr>
<tr class="rowId1" >
<td>
<div class="a7" id="a24" style="margin-left:10px; width:60px" ></div>
</td>
<td>
<div class="a2" id="a15" style="margin-left:14px; width: 22px" ></div>
</td>
<td>
;
<div class="a2" id="a105" style="margin-left: 8px; width: 50px" ></div>
</td>
<td>
</td>
<td>
<div class="a4" id="a102" style="margin-left: 5px; width: 45px;" ></div>
</td>
</tr>
</table>
It turns out this was an issue with IE failing when two different elements have the same ID. Apparently this breaks the .each function.
I had two tables
table.notes#a1 & table.inputs#a1
The .each function should have gone through each table but instead found neither.
jQuery also wouldn't run in ie with
jQuery('div.a1, div.a3, div.a4, div.a7','table.inputs#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
which it should have done, as I am them pointing directly to a specific table even if the id is not unique.
I'm using id's retrieved from the database for the id, and IE doesn't like id's that start with numbers, so I just added an 'a' to the beginning of the id.
However, it apparently doesn't like that either, so now I'm adding the first letter of the class and then the '1' or whatever the id number is.
This solves the issue.