Email signature generated html table stretched vertically in Outlook 2010
I have written an email signature generator in PHP. The program spits out output in the following file format:
signature_file.htm
signature_style开发者_开发问答.css
signature_image_folder
The images and the stylesheet are linked within the htm file. This works when viewed in a web browser.
When I copy the files into the following path:
..\Documents and Settings\user_name\Application Data\Microsoft\Signatures\
for the signature to show up in the signature manager in Outlook 2010, it appears just fine - with the fonts, images, etc. except the table which holds all the information is stretched vertically. It seems the rows' heights have been expanded to 100%.
Within the CSS file I have specified statically the table height, yet Outlook seems to be overriding it.
Also, when the signature is loaded from Outlook, it creates an *.rtf file. Within the rtf, the height is wrong as well.
I figured it out.
For some reason Outlook doesn't understand layout styling such as padding. I had to Get rid of all heights of rows, columns etc, get rid of all padding and just have a 'squashed' table sized by solely its contents. Then where i needed some padding, i just
it as needed.
Unfortunately this was all for nothing (but knowledge), since in the end the marketing people at my work told me to use an uglier layout which doesn't use tables... For shame! :) Thanks jackJoe for all your help! :D
Take care, Piotr.
Ok, I think I have some hints so that you can solve this.
(As you definitely know by now, Outlook is incredibly bad at dealing with html and it can do the most outrageous things even if it doesn't make sense).
So, my suggestions are:
Your table has a defined height:
(
table#signature_table
)height: 450px;
You need to remove that height! The table will have whatever height it needs.
Then, most elements have a
padding-top
andpadding-bottom
(ex:th#employee_name
andth#employee_position
), try to change this via defining a height to the<td>
of those elements; For example:If you had a padding-bottom: 20px, just make sure your
<td>
has enough height (with the text) to "stretch" it to the previous 20px, like<td height=40>
. This needs to be tested until you get the right size.Try to use pixels instead of points, point sizes are less "controllable";
Make sure you use inline styles (such as
style="font-size: 11px;"
), this is a way to make sure the styles are being applied, especially with email clients that don't accept external CSS (Gmail, etc). Apply all the styles and don't forget adding a font-family to the table (at least). It is a waste of code but in the end it will be worth the extra code.Simplify: Don't use table headers
<th>
and other tags like that (IMO), I only use<tr>
and<td>
that's it. I think Outlook can style<th>
in ways not expected. Creating html emails means you need to code the html and css like you were in 1999, so don't mind using tables, etc. Make sure the code validates.
精彩评论