1

I have a Visual Force email template that shows Products ordered and Tracking.

In a nutshell: Tracking / Products both exist on Sales Order Lines for a specific Sales Order. Products have a Line_Status__C that isn't null. Tracking is on the Description field. All other fields are null

The issue: It seems the tracking numbers create a blank space after Products and Products cause a blank space to be shown before tracking.

Images/Code below. Any help would be appreciated. I am not a developer and got help with this code.

enter image description here enter image description here

<messaging:emailTemplate subject="{!relatedTo.Purchase_Order__c} Shipped" recipientType="User" relatedToType="Order_Header__c">
    <messaging:htmlEmailBody >
        <body style="font-family: 'Trebuchet MS'">
            <h4>
                Just letting you know Purchase Order - {!relatedTo.Purchase_Order__c}, 
                was shipped today.
            </h4>
            <hr style="border: solid thin #0099CC; margin-top: -18px;" />

            <br />

            <br />

            <table cellpadding="5" style="border-collapse: collapse" width="100%">
                <tr>
                    <td style="background-color: #0099CC; color: #FFFFFF">
                        <b>Stock Code</b>
                    </td>
                    <td style="background-color: #0099CC; color: #FFFFFF">
                        <b>Description</b>
                    </td>
                    <td style="background-color: #0099CC; color: #FFFFFF">
                        <b>Shipped Qty</b>
                    </td>
                    <td style="background-color: #0099CC; color: #FFFFFF">
                        <b>Status</b>
                    </td>
                </tr>
                <apex:repeat value="{!relatedTo.Order_Detail__r}" var="lineItem">
                    <tr style="display:{!IF(lineItem.Line_Status__c != null, '', 'none')}">
                        <td style="border-bottom: 1px solid #0099CC;">
                            <b>{!lineItem.Stock_Code__c}</b>
                        </td>
                        <td style="border-bottom: 1px solid #0099CC;">
                            {!lineItem.Description__c}
                        </td>
                        <td style="border-bottom: 1px solid #0099CC;">
                            {!lineItem.Shipped_Qty__c}
                        </td>
                        <td style="border-bottom: 1px solid #0099CC;">
                            {!lineItem.Line_Status__c}
                        </td>
                    </tr>
                </apex:repeat>
            </table>

            <br/>

            <h4>
                Tracking Code: 
                <strong>
                    <apex:repeat value="{!relatedTo.Order_Detail__r}" var="lineItem">
                        <BR>{!IF(ISBLANK(lineItem.Stock_Code__c), lineItem.Description__c, NULL)}</BR>
                    </apex:repeat>
                </strong>
            </h4>
        </body>
    </messaging:htmlEmailBody>
</messaging:emailTemplate>
0

The reason you're seeing this is because of the way you have your table defined where you include cellpadding:

<table cellpadding="5" style="border-collapse: collapse" width="100%"> 

This padding creates a 5 pixel "buffer" or "space" both before and after the contents of each cell. If you don't want any spacing before or after the contents of a cell, remove the cellpadding from your table definition or set it to 0.

EDIT

Even though you've specified style="border-collapse", your borders will style have a width unless you set border-width to 'none' or 'hidden'.

None: No border; the computed border width is zero.

Hidden: Same as 'none', except in terms of border conflict resolution for table elements.

Now, because you're doing something with the border-bottom, you may need to set the property to none or hidden for just the border-right, border-left and border-top.

You may discover that it's best to also keep border-top and continue to use border-collapse with your table as well. You'll need to try it to see what works best for you. My instincts tell me that this is likely to be the case. Browser and email reader behavior can vary and your templates will be safest using CSS 2.1 as I've specified here.

  • Thanks, but it's the same thing for either of these: <table cellpadding="0" style="border-collapse: collapse" width="100%"> <table style="border-collapse: collapse" width="100%"> – aronfromct May 18 '16 at 14:54
  • You don't have any stylesheets of any kind applied to this that aren't shown do you? – crmprogdev May 18 '16 at 15:03
  • No style sheets, just the VF template. – aronfromct May 18 '16 at 15:50
  • See my edited answer. – crmprogdev May 18 '16 at 16:59
  • Thanks for your patience, I am not CSS expert. Is this what I should try? <table style="border-collapse: collapse" border-width="hidden" border-right="hidden" border-left="hidden" border-top="hidden"> I had no luck with this. The odd thing is with my Yahoo email as viewed on my cell phone I see a Gap because the "Tracking Code" text and the tracking numbers and no gaps elsewhere, but that was always the case. – aronfromct May 18 '16 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.