I want to display an IBAN number in a html mail. To improve readability I want to add a blank after every 4th sign. To also provide a good usability I want to do this with padding, so the user can copy & paste the IBAN into his online banking system without any blanks. To achieve this I have to use a table, because Microsoft Outlook ignores padding on other elements:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right:5px;">
IBAN:
</td>
<td style="padding-right:5px;">
XX01
</td>
<td style="padding-right:5px;">
2345
</td>
<td style="padding-right:5px;">
6789
</td>
<td style="padding-right:5px;">
0123
</td>
<td>
4567
</td>
</tr>
</table>
(See this jsfiddle)
My problem: When I copy & paste the IBAN a blank is added after each td element. Is there a way to remove these blanks with html or css?
Related
I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.
Is there a way to make the text indent without a hard line break and indenting?
<div>
<table style="background:#8B0000 ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30">Test Email</td>
<td align="right"></td>
<td width="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30">
<p style="font-size: 10.5pt;font-weight: 700;color:#555"> Test.</p>
<div style="font-size: 10pt;color:#555">
<p> There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td></td>
<td height="30"> </td>
</tr>
</table>
</div>
Working code sample: https://jsfiddle.net/wa1z4nvr/4/
Remove the ensp entity and give your paragraph a margin you like.
<p style="text-indent: 0; margin: 1em;">There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
It looks like right now you're using en-spaces as your indent
This would create a behavior where the first line appears to be indented and the rest does not.
If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".
You can remove the from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.
The table containing your test text might look like this:
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30" style="padding-left: 1em">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
<div style="font-size: 10pt;color:#555">
<p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
i am trying to parse some text from bibliographic database which contains not standard tables. specifications of articles may or may not exist, bu if exist they have same tags for their specifications. For example; all articles have title but only some of them have keywords section. but when they have that section it shown with standard tags like that:
<tr>
<td align="right" valign="top" nowrap="nowrap">Database Name: </td>
<td>Social Science Database</td>
</tr>
<tr>
<td align="right" valign="top" nowrap="nowrap">Journal: </td>
<td>Social Science and Education, 2011,8(4):29-42</td>
</tr>
<tr>
<td align="right" valign="top" nowrap="nowrap">Author: </td>
<td>James H.; Chaomei C.</td>
<td align="right" valign="top" nowrap="nowrap">Type: </td>
<td>Journal</td>
</tr>
<tr>
<td align="right" valign="top" nowrap="nowrap">Article Type: </td>
<td>Research Article</td>
</tr>
<tr>
<td align="right" valign="top" nowrap="nowrap">Retrieve Type: </td>
<td>Bibliographic</td>
</tr>
<tr><td align="right" valign="top" nowrap="nowrap">Language: </td>
<td>En</td>
</tr>
<tr>
<td align="right" valign="top" nowrap="nowrap">Abstract Language: </td>
<td>En</td>
</tr>
Here is my question. I am trying to parse text with Knime using Xpath but i couldn't achieve anything i want. I want to find <tr>'s that contains specific text and take second <td>'s of that section. For example:
for "Database Name:" Xpath must get "Social Science Database".
I tried this code:
.//dns:tr//text()[contains(., 'Database Name:')]
But result contains just first , i need second one.I tried to that code, but it brings nothing.
.//dns:tr//text()[contains(., 'Database Name:')]/dns:td[*]
You can try this:
.//dns:tr//text()[contains(., 'Database Name:')]/../../dns:td[2]
.. takes you to the parent. You need to traverse 2 levels up and get the 2nd td.
recently I find that new version of firefox is show width, significantly different from chrome
this is my table which show completely different in fire fox and chrome . Is there any idea for this case?
<table id="headtable" class=" tahoma">
<tr>
<td width="84">نام سرور</td>
<td width="62">CPU</td>
<td width="46">RAM</td>
<td width="34" class="tool-tip">نوع هارد دیسک </td>
<td width="79">فضا</td>
<td width="43" class="tool-tip">پهنای باند </td>
<td width="46" class="tool-tip">ترافیک ماهیانه </td>
<td width="59">دیتا سنتر</td>
<td width="69" class="tool-tip">کنترل پنل </td>
<td width="47" class="tool-tip">هزینهی راه اندازی </td>
<td width="54">هزینهی ماهیانه</td>
</tr>
</table>
<div class="hole" id="hole">
<table id="panels-compare" class="tahoma compare panels">
<tr>
<td width="66">ایران۷</td>
<td width="62">Xeon 3430</td>
<td width="46">۸ گیگابایت</td>
<td width="58">SATA</td>
<td width="81">2x500GB</td>
<td width="43">۱۰۰ مگابیت</td>
<td width="46">۱۰۰ گیگابایت</td>
<td width="59">پارسآنلاین / افرانت</td>
<td width="69">DirectAdmin</td>
<td width="46">۵۰,۰۰۰</td>
<td width="54">۳۵۰,۰۰۰</td>
<td width="">سفارش</td>
</tr>
</table>
</div>
Weird. That can't be the code for the image as displayed, so I'm going to take a guess... Maybe you missed a column, it looks like some are the same size and others are not. Or, maybe the sum of the td widths is greater than one if its containing elements, and the browsers are responding to the invalid state differently. Similarly, it may be that invalid html elsewhere on the page is behind this - if all else fails, ensure your markup is valid.
It all depends on the "clutter" a browser has.
Google chrome has "clean" UI, it doesn't take up too much space for its address bar, bookmark bar etc..
Whereas Mozilla too has its own way of displaying things.
So there is no standard that defines how much screen a browser should use for address bar, bookmarks bar, home button, back-front buttons, tabs etc..
So just leave it as there is not much you can do other than what you've already done to have a uniform size.
I've just started using a new HTML email software (was using Campaign Monitor but now having to use a plugin within our CMS).
Our template uses some empty cells at the top with different background colors for aesthetic purposes.
When using Campaign Monitor these showed fine in Gmail but in the new software (eCampaign) Gmail is totally ignoring the height of the cells, making them all 1 pixel high.
I tried adding height="x" and style="height: x;" but neither seem to work.
I want to avoid using spacer gifs if I can.
Further down the email I've put in a tag but this makes the height too large then.
I've seen some suggestions of wrapping the in a tag but not sure if that will work.
Any suggestions?? Need an answer asap!
My code is as follows:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#edede9" style="font-size:1px; line-height:6; height:6;"></td>
</tr>
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#c4c3b6"><!-- --></td>
</tr>
<tr>
<td valign="top" height="1" colspan="2" bgcolor="#ffffff"><!-- --></td>
</tr>
</table>
The only way is to use a trans_dot.gif or other spacer image within the empty cells. It cant be done in any otherway.
So find or make a 1px * 1px transparent image and insert.
If a cell is without text or images it will collapse in 9 out of 10 email clients
We're creating html signatures for all the users within our domain, based on a simple html template.
...
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"><%Tel%></td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"><%Mobile%></td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"><%Fax%></td>
</tr>
...
The placeholders are replaced with the actual numbers for a user.
The following lines are a part of the generated signature, with telephone, mobile and fax numbers. If a user has no mobile number, the second tr-td is empty:
...
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;">T +123 456 789</td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"></td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;">F +123 456 789</td>
</tr>
...
When leaving a line empty ( like in the second line ) the html renders just fine in modern browsers, making sure the Tel and the Fax line are close together.
However, once I add this template to Outlook 2003, Outlook adds an extra 'nbsp;' to the html, between the empty td-tags. This results in an full empty line being shown between the tel and fax number.
Obviously, the user is annoyed with this extra line and cannot be bothered to remove the extra line manually each time. The signatures are read-only, so changing it in the settings is not an option.
Any ideas on why this happens, and how to fix this?
Edit: Apologies, Outlook version actually is 2003, not 2010.
Not sure if this will work but it's worth a shot. Have you tried just closing the tag like so:
<td colspan="3" style="font-style:normal; font-size:12px;"/>