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;"/>
Related
I have multiple tables where I am trying to read the rows together. Here is an example table:
<table class="data-table" role="presentation">
<tr role="rowgroup">
<td role="gridcell">
<strong>Name</strong>
</td>
<td role="gridcell">
John Doe
</td>
</tr>
<tr role="rowgroup">
<td role="gridcell">
<strong>Size</strong>
</td>
<td role="gridcell">
XL
</td>
</tr>
<tr role="rowgroup">
<td role="gridcell">
<strong>Color</strong>
</td>
<td role="gridcell">
blue
</td>
</tr>
</table>
In this rendered example, This should read the first the full row "Name - John Doe". It works as intended on Chrome but fails to read the full row with IE11. Is there a reason why that is happening?
Edit, I looked into it further and it seems to happen if the table is wraped with a tag. Not sure why it is happening but at least I can repoduce the issue more consistently.
This markup is quite complex and I'm not sure what you're aiming to achieve.
This seems like a data table to me. Could you remove the role="presentation" so that the table is exposed to AT as a data table, then mark the first column up as <th> column headers, and the second column as <td> cells? That way you don't need to try and control what the screenreader says and when, and you're using semantic markup.
Most screenreader users know how to interact with data tables to extract the information they need, and trying to mask this interaction and control the user experience is unlikely to work out well.
Trust your users :-)
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?
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.
EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
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