在Outlook中为HTML电子邮件签名添加边框空白

时间:2019-04-03 13:23:21

标签: html css html5 outlook

我在尝试在Outlook中编码和使用电子邮件签名时遇到问题。我能够使用HTML创建自定义电子邮件签名,并对其进行足够的格式化,使其在Outlook中可以正确显示该格式...差不多了。

我在以下一行中遇到了麻烦。在代码中,它位于符号关联图像注释之后(我认为在第118行附近):

<td colspan="2" style="border-top:1px solid; border-top-color:#0066ff; border-width:medium; width:480px; padding-top:8px; font-family:Arial,sans-serif; color:#9b9b9b; text-align:justify;"><img src="https://www.cascosigns.com/wp-content/uploads/2019/02/image010_crop.png" width="480" height="auto"></td>

This is what the signature should look like. 但是this is what the signature actually looks like.

我知道图像有一些细微的差异,但是我相信这是因为我正在使用两个不同的电子邮件客户端进行测试。我正在尝试做的是在电子邮件免责声明上方的底部垂直橙色边框和蓝色水平边框之间添加一个间隙,就像第一张图片中的一样。我已经尝试过padding和margin属性,但是没有任何效果。我该如何解决?

如果需要,这里是完整的调试代码:

<!-- Casco Signs Email Signature Template
     Created by Jeremy Myrtle
     Copyright © Casco Signs 2019

     This HTML file is the written code of an email signature. It is specifically designed for Casco Signs, however, it can be used for any email address.
     For best results, it is recommended that this HTML file be used with any email client that accepts HTML signatures.
     To navigate your way through and edit this file quickly, follow the comment marks within the code. They contain instructions and placeholder text that is designed 
     to help you make changes to the signature.
     Don't forget to always save the file after you make changes so that the changes you made will go into effect.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
    <title>Email Signature</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style>
        span.eco {
            font-family: Webdings;
            color: #006400;
        }
    </style>
</head>

<body>
    <!-- Table Start & Top Border -->
    <!-- There really isn't anything to customize here except for the top border on line 26.
     By default, this border is enabled and will be shown in the signature.
     To remove it, add a set of comment marks around the code on line 26.
    -->
    <hr height="4" width="480px" align="left" style="height:4px; border:0 none; color: #0066ff; background-color: #0066ff; width:480px; align:left;">
    <table style="width:480px; font-size:10pt; font-family:Arial, sans-serif; line-height:normal;" cellspacing="0" cellpadding="0">
        <tbody>
            <!-- Company Logo -->
            <!-- It is recommended that you do not edit this section. However, you are welcome to use your own Casco Signs logo if you have one.
                 Just place the URL of the logo you have into the "src:" and "href:" parameters on line 38.
                 In the event that your logo does not work, here is the default image URL that can be used:
                 Casco Signs Original Stacked | https://www.cascosigns.com/wp-content/uploads/2019/02/cascosigns_stack.png (default img)
                 If you don't have a Casco Signs logo saved, you can skip this section to use the default image.
            -->
            <tr>
                <td style="padding-top:10px; padding-bottom:12px; padding-right:15px; width:170px; vertical-align:center; border-right-style:solid; border-right-color:#ff7700; border-width:medium;" valign="center">
                    <a href="https://www.cascosigns.com" target="_blank">
                        <img alt="Casco Signs Logo" style="width:171px; height:171px; border:0;" src="https://www.cascosigns.com/wp-content/uploads/2019/02/cascosigns_stack.png" width="171" height="171" />
                    </a>
                </td>
                <!-- Information -->
                <!-- This section contains your personal information including your name, job title, company information and email address. 
                     You will need to edit this section to accommodate your information. 
                     You can also duplicate the different sections of information and edit them if you need to add something. The defaults listed below should get you started.
                     Just make sure that you copy from the <tr> tag to the </tr> tag, otherwise it may not display correctly.
                     To make it a little easier, each section has a comment mark above it indicating what section you are making changes to.
                -->
                <td style="padding-top:6px; padding-bottom:6px; width:320px;">
                    <table cellspacing="0" cellpadding="0">
                        <tbody>
                            <!-- Name -->
                            <tr>
                                <td style="font-size:12pt; font-family:Arial, sans-serif; font-weight:bold; color:#3d3c3f; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#1d458b; padding-left:6px;">Jeremy Myrtle</span>
                                </td>
                            </tr>
                            <!-- Job Title -->
                            <tr>
                                <td style="padding-bottom:11px; font-size:10pt; font-family:Arial, sans-serif; color:#3d3c3f; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#1d458b; padding-left:6px;">
                                        IT/Tech Services
                                    </span>
                                </td>
                            </tr>
                            <!-- Company Name -->
                            <tr>
                                <td style="font-size:10pt; font-family:Arial, sans-serif; font-weight:bold; color:#9b9b9b; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#000000; padding-left:6px;">
                                        Casco Signs Inc.
                                    </span>
                                </td>
                            </tr>
                            <!-- Company Address -->
                            <tr>
                                <td style="font-size:10pt; font-family:Arial, sans-serif; color:#9b9b9b; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#000000; padding-left:6px;">
                                        199 Wilshire Ave. SW
                                    </span>
                                </td>
                            </tr>
                            <!-- Company CSZ -->
                            <tr>
                                <td style="font-size:10pt; font-family:Arial, sans-serif; color:#9b9b9b; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#000000; padding-left:6px;">
                                        Concord, NC 28025
                                    </span>
                                </td>
                            </tr>
                            <!-- Company Phone Number -->
                            <tr>
                                <td style="font-size:10pt; font-family:Arial, sans-serif; color:#9b9b9b; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#000000; padding-left:6px;">
                                        Phone: 704-788-9055
                                    </span>
                                </td>
                            </tr>
                            <!-- Mobile Number (optional, hidden by default)-->
                            <!-- <tr>
                                 <td style="font-size:10pt; font-family:Arial, sans-serif; color:#9b9b9b; padding-left:15px;">
                                     <span style="font-family:Verdana, sans-serif; color:#000000; padding-left:6px;">
                                         Mobile: 980-231-1953
                                        </span>
                                    </td>
                                </tr>
                             -->
                            <!-- Fax Number -->
                            <tr>
                                <td style="font-size:10pt; font-family:Arial, sans-serif; color:#9b9b9b; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#000000; padding-left:6px;">
                                        Fax: 704-785-8471
                                    </span>
                                </td>
                            </tr>
                            <!-- Email Address -->
                            <tr>
                                <td style="font-size:10pt; font-family:Arial, sans-serif; color:#9b9b9b; padding-left:15px;">
                                    <span style="font-family:Verdana, sans-serif; color:#000000; padding-left:6px;">
                                        Email:
                                    </span>
                                    <span style="font-family:Arial, sans-serif; color:#1793d2;">
                                        <span style="font-family:Verdana, sans-serif; color:#000000">
                                            jmyrtle@cascosigns.com
                                        </span>
                                    </span>
                                </td>
                            </tr>
                            <!-- Company Social Media -->
                            <!-- This section contains social media icons that link to the company's social media accounts. There is no need to edit this section and it is recommended that you skip it. -->
                            <tr>
                                <td style="padding-top:6px; padding-left:15px;">
                                    <!-- Facebook -->
                                    <span style="display:inline-block; height:22px; padding-left:6px;">
                                        <span>
                                            <a href="https://www.facebook.com/CASCOSignsInc/" target="_blank">
                                                <img alt="fb" style="border:0; height:23px; width:23px;" src="https://www.cascosigns.com/wp-content/uploads/2018/06/facebook.png" width="23" height="23" border="0">
                                            </a>
                                            &nbsp;&nbsp;
                                        </span>
                                        <!-- Twitter -->
                                        <span>
                                            <a href="https://twitter.com/cascosignsinc?lang=en" target="_blank">
                                                <img alt="tw" style="border:0; height:23px; width:23px" src="https://www.cascosigns.com/wp-content/uploads/2018/06/Twitter.png" width="23" height="23" border="0">
                                            </a>
                                            &nbsp;&nbsp;
                                        </span>
                                        <!-- Instagram -->
                                        <span>
                                            <a href="https://www.instagram.com/cascosignsinc/?hl=en" target="_blank">
                                                <img alt="ig" style="border:0; height:23px; width:23px" src="https://www.cascosigns.com/wp-content/uploads/2018/06/instagram.png" width="23" height="23" border="0">
                                            </a>
                                            &nbsp;&nbsp;
                                        </span>
                                        <!-- YouTube -->
                                        <span>
                                            <a href="https://www.youtube.com/channel/UChhpKzRj-C6cunU6nco-52g" target="_blank">
                                                <img alt="yt" style="border:0; height:23px; width:23px" src="https://www.cascosigns.com/wp-content/uploads/2018/06/youtube.png" width="23" height="23" border="0">
                                            </a>
                                            &nbsp;&nbsp;
                                        </span>
                                        <!-- LinkedIn -->
                                        <span>
                                            <a href="https://www.linkedin.com/company/casco-signs-inc/" target="_blank">
                                                <img alt="ln" style="border:0; height:23px; width:23px" src="https://www.cascosigns.com/wp-content/uploads/2019/02/linkedin.png" width="23" height="23" border="0">
                                            </a>
                                            &nbsp;&nbsp;
                                        </span>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
    </table>
    <table>
        <!-- Sign Association Images -->
        <!-- This section holds the 5 grouped images of the sign associations that Casco Signs is a part of: 
             Southern States Sign Association (SSSA), International Sign Association (ISA), 
             North Carolina Petroleum & Convenience Marketers (NCPCM), Women's Business Enterprise National Council (WBENC), and International Car Wash Association (ICWA). 
             To remove the image, add comment marks before the <tr> tag on line 117 and after the </tr> tag on line 119. 
        -->
        <tbody>
            <tr>
                <td colspan="2" style="border-top:1px solid; border-top-color:#0066ff; border-width:medium; width:480px; padding-top:8px; font-family:Arial,sans-serif; color:#9b9b9b; text-align:justify;">
                    <img src="https://www.cascosigns.com/wp-content/uploads/2019/02/image010_crop.png" width="480" height="auto" />
                </td>
            </tr>
            <!-- Facility Closing Notification -->
            <!-- This section needs to be kept commented out unless the facility is closing due to holidays or other reasons. You can edit the text below.
                 To show the commented section, remove the comment tags before the <td> tag and after the </td> tag in line 126. 
                 To hide the commented section, add comment tags before the <td> tag and after the </td> tag in line 126.
                 Make sure you edit the text for the appropriate reason we are closing and don't forget to save your changes each time you use this section. 
            -->
            <!-- 
                <td colspan="2" style="border-top:1px solid; border-top-color:#ffffff; width: 480px; padding-top:6px; padding-bottom:4px; font-family:Arial,sans-serif; color:#9b9b9b; text-align:justify;">
                    <span style="font-family: Verdana, sans-serif; color:red; font-weight:bold; font-size:12px;">
                        Our facility will be closed on Thursday July 4th and Friday July 5th in recognition and celebration of our country's independence. We will reopen the following Monday, July 8th. If you have any questions or concerns, please call our offices.
                    </span>
                </td> 
            -->

            <!-- Disclaimer -->
            <!-- This section is used as a disclaimer letting clients know that this information should only go to the intended recipient and that Casco is 
                 not responsible for any viruses or malware that may cause damage to the user's device. 
                 If someone else gets it, they are required to delete the email and any copies they may have.
                 For more information, talk to Kevin Crutchfield.
            -->
            <tr>
                <td colspan="2" style="border-top:1px solid; border-top-color:#ffffff; width:480px; padding-top:4px; font-family:Arial,sans-serif; color:#9b9b9b; text-align:left;">
                    <span style="font-family:Verdana, sans-serif; color:#000000; font-size:9px; font-weight:bold;">
                        Unless otherwise indicated or obvious from the nature of the following communication, the information
                        contained herein is privileged and confidential information to Casco Signs Inc. The
                        communication is intended for the use of the individual or entity named above. If the reader of
                        this transmission is not the intended recipient, you are hereby notified that any
                        dissemination, distribution or copying of this communication is strictly prohibited. If you
                        have received this communication in error or are not sure whether it is privileged, please
                        immediately notify us by return e-mail and destroy any copies (electronic, paper or otherwise)
                        which you may have of this communication.<br /><br />
                        Although Casco Signs Inc. has taken reasonable precautions to ensure no viruses and/or malware are 
                        present in this email, we cannot accept responsibility for any loss or damage arising from the use 
                        of this email nor any attachments it may include.
                    </span>
                </td>
            </tr>
            <!-- Think Green -->
            <!-- This text is optional in your emails and is enabled by default.
                 Removing the text is identical to the Facility Closing Notification text. 
                 Just add comment symbols at the beginning the <tr> tag and after the </tr> tag in the section of text.
            -->
            <tr>
                <td colspan="2" style="border-top:1px solid; border-top-color:#ffffff; width:480px; padding-top:8px; font-family:Arial,sans-serif; color:#9b9b9b; text-align:justify;">
                    <span class="eco">P</span>
                    <span style="font-family:Verdana, sans-serif; color:#006400; font-size:11px; font-weight:bold;">
                        Please do not print this email unless necessary.
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
    <br><br>
</body>

</html>

0 个答案:

没有答案