I'm making an email signature for my boss. So I upload the signature in my website and make him copy it and just paste it in his MS Outlook. In the html the signature looks fine when I try to test it, it also looks fine BUT when he's pasting it in his Outlook there's this unwanted space between the image and the text.
Here's how it's supposed to look:
Here's how it's turning out on his:
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:12px;
font-family: Arial;
}
/*table, td, th {
border: 1px solid black;
}*/
table {
width: 580px;
}
th {
text-align: left;
}
p {
font-size:10px;
}
</style>
</head>
<body>
<h2>Highlight + Copy + Paste</h2>
<table cellpading="0" cellspacing="0">
<tr>
<td rowspan="5" width="194px"><img style="display:block; border-collapse:collapse;" src="image.png"></td>
<td colspan="2" style="font-size:18px; padding:5px"><b>Name</b><br>
<span style="font-size:12px"><i>V.P. of Business Development</i></span></td>
</tr>
<tr>
<td width="150px" style="padding:5px;"><img src="http://i795.photobucket.com/albums/yy239/spacebitss/phone.jpg">+000000000</td>
<td><img src="http://i795.photobucket.com/albums/yy239/spacebitss/fax.jpg"> +000000000</td>
</tr>
<tr>
<td style="padding:5px;"><img src="http://i795.photobucket.com/albums/yy239/spacebitss/mail.jpg"> email</td>
<td><img src="http://i795.photobucket.com/albums/yy239/spacebitss/cell.jpg"> +000000000</td>
</tr>
<tr>
<td style="padding:5px;"><img src="http://i795.photobucket.com/albums/yy239/spacebitss/skype.jpg"> skype</td>
<td><img src="http://i795.photobucket.com/albums/yy239/spacebitss/web.jpg"> website</td>
</tr>
<tr style="padding:5px;">
<td colspan="2"><img src="http://i795.photobucket.com/albums/yy239/spacebitss/add.jpg"> address </td>
</tr>
</tr>
<tr>
<td colspan="3"><p style="color:gray;">This message is only for the use of the person(s) for whom it is intended. It may contain confidential information.<br>
The unauthorized use, copying, distribution, or disclosure of this e-mail or any of its contents by anyone other than the intended recipient is unauthorized and unlawful.
If you have received this e-mail in error, please notify the sender immediately and destroy all copies of this transmission.
Thank you. <br> <span style="color:green; font-size:11px;"><img src="http://i795.photobucket.com/albums/yy239/spacebitss/tree.png"> Please think of the environment before you consider printing this e-mail</span></p>
</td>
</tr>
</table>
The code you provided is :
Duplicated (you have the same signature twice).
Contains non-standard attributes.
Contains non standard attribute values.
In other word, I doubt anyone will attempt to fix this code for you. What I would suggest is that you start from scratch using tools such as this:
https://www.exclaimer.ca/email-signature-creator/
https://htmlsig.com/
Etc.
Related
I'm trying to make a signature for email (Lotus Notes). However, while it looks fine on Lotus (yay) I'm getting this space between the title and email address on Gmail.
And I have no idea why that is.
Picture of how it looks on Lotus Notes:
And how it looks on gmail:
Here link to a Fiddle Doesn't work properly as it does on email (don't know why):
<table border="0" cellpadding="6" cellspacing="0">
<tr align="left">
<td valign="top" width="100" ><img src="https://i.imgur.com/XCyNdd6.png" alt="logo" ></td>
<td valign="top" width="700" ><strong><span style=" display:table;font-family: Arial; font-size: medium; "><font size="3" face="Arial">John Doe Smith</font></span></strong>
<table align="left" width="100%" cellpadding="2", cellspacing="0">
<tr >
<td><span style="display:table; font-size:small; margin-top:0px; text-decoration:none; font-family: Arial; color:#16161D;"><font size="2" face="Arial" color="#16161D">https:/URL-example.eu</font></span></td>
</tr>
<tr >
<td><span style=" display:table; font-size: small; text-decoration:none; font-family: Arial;"><font size="2" face="Arial" color="#16161D";>email#URL-example.eu</font></span></td>
</tr>
</table>
<table align="left" width="100" cellpadding="2", cellspacing="" >
<tr align="left">
<td width="30"><img src="https://i.imgur.com/f6DwyDA.png" alt="Example Name Facebook Account"></td>
<td width="35"><img src="https://i.imgur.com/BDQERsI.png" alt="Example Name Instagram Account"></td>
<td width="50"><img src="https://i.imgur.com/Xx1atey.png" alt=Example Name Twitter Account"></td>
</tr>
</table>
</td>
</tr>
</table>
Thank you for all your help.
It probably has to do with how you're adding the signature in Gmail.
The simplest method is to open your HTML + CSS in a webpage (you can even use the Stack Snippet you shared just full screen it) and hit ctrl/cmd + A to select all the content on the page it should highlight all in blue including images. Then hit ctrl/cmd + C to copy it to clipboard and just paste it into the signature field in Gmail. Your code works fine if you do the above.
I couldn't replicate this in a Gmail test. Should be fine - but check #JHeth's answer.
Nevertheless, I also found a slight difference on Outlook iOS, as it added a line-height:150% to the <font> and <a> tags. There are often defaults like this, so it's best to always specify font-size and line-height for <font> and <p> and <a> tags, and there will also be colour and text-decoration defaults for <a>.
For block elements there are default margins and paddings.
So that's how you will get consistency, by adding a HTML-email equivalent CSS reset (note it has to be inline like you've done here, as opposed to <style>).
I'm trying to create a web-mail template with a zebra-striped style that looks the same on different clients. This template comes out from a third party application ( that I cannot control ) that iterates over candidates and the only thing that i can do is, for each candidate, to create a partial, something like this pseudo-code:
for(candidate of candidates) {
<table class="zebra" width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse">
<tbody>
<tr>
<td style="padding-left:28px;"> </td>
<td class="colored-dome" valign="top" width="600" style="text-align: left; font-family:Arial; text-transform:uppercase; color:#ffffff; text-decoration:none; font-size:18px; padding:5px 38px 5px 10px;">
<span>^candidate.role^</span>
</td>
<td style="padding-left:28px;"> </td>
</tr>
</tbody>
</table>
}
As you can see here i'm using a css class:
table.zebra:nth-child(odd) td.colored-dome {
background-color:#8274b6;
}
table.zebra:nth-child(even) td.colored-dome {
background-color:#9d9d9d;
}
because I can't use nth-child: selector inline. So I tryed:
<style> tag inside <head> ,
<style> tag inside <body> (as an attempt),
css file from working remote url,
but none of this solution works on outlook 2010, hotmail, gmail. So my question is: is there a way to create a working web-mail-zebra-striped for those clients? Can we say that these solutions will never work for Hotmail, Gmail or Outlook?
nth-child does not work in Outlook or Gmail and a few other clients.
https://www.campaignmonitor.com/css/selectors/nth-child/
The solution to ensure this always works is to inline the style you want for those email clients.
I am trying to edit the html formatted string in RadEditor control. Its a simple
<table style="width: 100%; font-family: Verdana;">
<tbody>
<tr> <td>a</td></tr>
<tr> <td>b</td></tr>
<tr> <td>c</td></tr>
</tbody> </table>
but while debugging, the out put of RadEditor in code behind is like :
<Table Style="Width: 100%; Font-Family: Verdana;">
<Tbody>
<Tr><Td>A</Td></Tr>
<Tr> <Td>B</Td></Tr>
<Tr> <Td>C</Td></Tr>
</Tbody></Table>
it making each first character Capital. Is there any mode to set ?
Following is my aspx code to render :
<telerik:RadEditor ID="editorBody" Runat="server" Skin="WebBlue" ContentAreaCssFile="~/css/EditorContentAreaStyles.css" BackColor="White" EnableResize="False" Height="600px" >
<CssFiles>
<telerik:EditorCssFile Value="~/css/EditorCSSToApply.css" />
</CssFiles>
<Content>
</Content>
</telerik:RadEditor>
Same code working fine in another form.
Is it possible to place a character on a border line displayed in a table?
I am trying to discover a way to re-create musical staff notation for webpages using html rather than inserting images.
I have actually got the staff itself to render fine, 5 horizontal lines divided by vertical bars using this in my css header:
table.musStaff{border-collapse:collapse;}
.trms{border-bottom:2px solid black;}
.tdms{border-left:2px solid black;}
and this where I need to render a musical staff:
<table class="musStaff">
<tr><td> <td> <td> </td></tr>
<tr class="trms"><td> <td> <td> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr><td> <td> <td> </td></tr>
</table>
All the are merely included as temporary place holders.
So my problem is I need to be able to place ● chars representing notes on the lines as well as between the lines, rendered by the <tr class="trms"> (border-bottom:2px solid black).
Other than that I think I would be good to go.
Is this what you are trying to achieve?
HTML
<div><span>o</span></div>
CSS
div {
border-right: 1px solid black;
display: inline-block;
font-size: 20px;
line-height: 20px;
height: 1em;
position: relative;
width: 1em;
}
span {
position: absolute;
right: -5px;
}
jsfiddle
You can position anything anywhere you like if you are willing to get into the details and cross-browser issues of css positioning.
For example:
<td style="position:relative; top:-12px">●</td>
http://jsfiddle.net/markm/2ft3ojbn/
If I were working on this, however, I would seriously look at using svg or the canvas instead of html and css — this is the kind of task these tools are made for. In the end it will be much more maintainable and readable. It will also be easier to program. In fact there are some libraries out there already to help — for example:
http://www.vexflow.com
I've been working on making a signature (CSS+HTML) work across multiple platforms, and have hit the wall when it comes to Hotmail.
For some reason, when sending this signature to my Hotmail address, it gets stretched vertically. It seems that Hotmail, for one reason or another, is adding a lot of white space below the text in each table cell?
The problem is clearly illustrated in this graphic: http://www.madculture.es/images/test.jpg
The first signature there, is the intended output. I added borders on #2, to better highlight the problem. Signature three is how it looks when received in Hotmail! :(
This signature works fine in Outlook 2003-2013, Gmail, Lotus Notes, but not in Hotmail.
Does anyone know what could be the reason? I'm clueless, having experimented with this for days now.
Here's the full code for the signature:
<div>
<table border="1" cellspacing="0" cellpadding="1" height="50" style="font-family: Verdana, Arial, sans-serif; font-size: 1em;">
<tr>
<td rowspan="4">
<img src="mc2.png" nosend="1" width="170" height="86" />
</td>
<td style="padding-top: 2px;">
John D. Doe
</td>
</tr>
<tr>
<td style="font-size: 0.85em; font-weight: bold; color: #932D1F; padding-bottom: 2px;">
Marketing & analytics
</td>
</tr>
<tr>
<td style="display: block;">
johnd#doe.com
</td>
</tr>
<tr>
<td style="font-size: 1.05em; font-weight: bold; color: #444; padding-top: 1px;">
Madrid
</td>
</tr>
</table>
</div>
I hope someone can help...
Try slowly removing elements and re-testing at every stage. As a start:
Your table has a height set that's less than your main image
Use nested tables, not rowspan for better email client support
Avoid padding and use set heights instead
Don't set your td to display: block
Add font styling directly to td s (not the table) to get Outlook working correctly