Attachments mess with HTML Email Template

238 views Asked by At

I have some trouble with a HTML Email Template I created. Something with the code is probably not right.

This is the code:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>

</STYLE>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">

</HEAD>
<BODY style = "background:#EBEBEB;">


<table border="0" cellpadding="2" width="800" align="center">
    <tr>

    <td width="790">

    <div style = "position: absolute; width: 768px; height: 1136px;">


    <div style = "position: absolute; width: 90%; top: 0%; bottom: 0%; margin: 5%; left: 0px; background-color: #FFFFFF; border-radius: 3px; box-shadow: 0px 0px 5px #888888;">

        <!--Logo-->
        <div style = "padding-top: 1%;" align = "center"><img src = "imglink" width="170" height="84"/></div>

        <div class="body-content" id="body-content" style="line-height:27px;">
            <div>
                <font color="#404040" face="HelveticaNeue-Light, Times, serif" style="font-size:17px; text-align:left;">
                    <span contenteditable="true" apple-content-name="body" style="display:block; width:90%; margin: 5%; left: 0px;">
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                        Duis nonsequ ismodol oreetuer et dolore facidunt, vulluptat volore consecte dolesed dolor velit adionse magnisc se illandi gniamet, vendre feum veniamc onullutpatin ipit wisi dolesting.
                    </span>
                </font>
            </div>
        </div>
    </div>

</div> 

    </td>
    </tr>
</table>


</BODY>
</HTML>

Actually adding the File attachment into the content-field works fine, it aligns with the text and there is no visible Problem. After sending the email and receiving it on the same client (Email on Mac OS X) the whole thing looks destroyed and the text is somehow covered as well. My understanding of HTML web design is probably not enough to know what is going on there, please help.

This is the unsend email, everything fine

The email before it is sent. (Attachment is on the bottom of the (content) textfield

This is the received Email After receiving it is not in its origin shape.

1

There are 1 answers

0
Julio Ludovic Ramihone On

You can try starting with the tags :

<messaging:emailTemplate subject="FUN {!relatedTo.FUN_BC__c}-{!relatedTo.Name}" recipientType="Contact" relatedToType="BC__c" >

<messaging:attachment renderAs="pdf" filename="{!relatedTo.Name}.pdf"> </messaging:attachment>  </messaging:emailTemplate>