1

I'm developing a custom email template in the visualforce component, but outlook opens this email all unconfigured, the impression I get is that it ignores the css. I did google searches, I'm using inline css, added the !important after the css, changed the width to px and % but to no avail. I would like the top margin not to be as far from the header as you can see in the images. Does anyone know how I can solve this or is it impossible? In Gmail and in other emails it recognizes the css normally, even in Outlook web itself it recognizes it, the problem is the windows outlook application

 <h3 style="border: 1px solid #e85e0b; text-align: center; background: #e85e0b; margin-bottom: 0px; width: 100%">
                    Coberturas</h3>
                <table style="width: 90%!important; margin-top:5px!important; margin-left:auto!important; margin-right:auto!important; position: absolute!important" align="center" >
                    <thead style="border: 1px solid #939393; text-align: center; background: #F5F5F5; width: 90%!important" align="center">     
                       <apex:outputPanel layout="none"  rendered="{!if(bemSize>1 , true ,false)}">
                        <tr>
                            <th style=" margin-left: auto; margin-right: auto">Bem Segurado</th> 
                            <th style=" margin-left: auto; margin-right: auto">Opções de Cobertura</th> 
                            <th style=" margin-left: auto; margin-right: auto">Importância Segurada</th>
                            <th style=" margin-left: auto; margin-right: auto">Franquia</th>
                            <th style=" margin-left: auto; margin-right: auto">Observações</th>
                        </tr>
                        </apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!if(bemSize==1 , true ,false)}">
                        <tr>
                            <th style=" margin-left: auto; margin-right: auto">Opções de Cobertura</th> 
                            <th style=" margin-left: auto; margin-right: auto">Importância Segurada</th>
                            <th style=" margin-left: auto; margin-right: auto">Franquia</th>
                            <th style=" margin-left: auto; margin-right: auto">Observações</th>
                        </tr>
                        </apex:outputPanel>
                    </thead>     
                    <tbody style="border: 1px solid #939393;background: #F5F5F5; width: 90%!important" align="center">
                        <apex:outputPanel layout="none"  rendered="{!if(varLMI==false && bemSize>1 , true ,false)}">
                        <apex:repeat value="{!Cobertura}" var="cob">
                            <tr>
                                <td style="text-align: left">{!cob.BemSegurado__r.Identificacao__c}</td>
                                <td style="text-align: left">{!cob.Opcoes_de_Coberturas__r.Name}</td>
                                <td style="text-align: right">R$ {!cob.ImportanciaSeguradaFormatada__c}</td>
                                <td style="text-align: right">{!cob.Franquia_Cob__c}</td>
                                <td style="text-align: right">{!cob.Observacao__c}</td> 
                            </tr>
                        </apex:repeat>
                     </apex:outputPanel>
                     <apex:outputPanel layout="none"  rendered="{!if(varLMI==true && bemSize>1, true ,false)}"> 
                        <apex:repeat value="{!CoberturaLMI}" var="cob">
                            <tr>
                                <td style="text-align: left">LMI Único</td>
                                <td style="text-align: left">{!cob.Opcoes_de_Coberturas__r.Name}</td>
                                <td style="text-align: right">R$ {!cob.ImportanciaSeguradaFormatada__c}</td>
                                <td style="text-align: right">{!cob.Franquia_Cob__c}</td>
                                <td style="text-align: right">{!cob.Observacao__c}</td> 
                            </tr>
                        </apex:repeat>
                     </apex:outputPanel>
                        
                    <apex:outputPanel layout="none"  rendered="{!if(varLMI==false && bemSize<=1 , true ,false)}">
                        <apex:repeat value="{!Cobertura}" var="cob">
                            <tr>
                                <td style="text-align: left">{!cob.Opcoes_de_Coberturas__r.Name}</td>
                                <td style="text-align: right">R$ {!cob.ImportanciaSeguradaFormatada__c}</td>
                                <td style="text-align: right">{!cob.Franquia_Cob__c}</td>
                                <td style="text-align: right">{!cob.Observacao__c}</td> 
                            </tr>
                        </apex:repeat>
                     </apex:outputPanel>
                     <apex:outputPanel layout="none"  rendered="{!if(varLMI==true && bemSize<=1, true ,false)}"> 
                        <apex:repeat value="{!CoberturaLMI}" var="cob">
                            <tr>
                                <td style="text-align: left">{!cob.Opcoes_de_Coberturas__r.Name}</td>
                                <td style="text-align: right">R$ {!cob.ImportanciaSeguradaFormatada__c}</td>
                                <td style="text-align: right">{!cob.Franquia_Cob__c}</td>
                                <td style="text-align: right">{!cob.Observacao__c}</td> 
                            </tr>
                        </apex:repeat>
                     </apex:outputPanel>    
                    </tbody>   
                </table>

in the Gmail enter image description here in the outlook app: enter image description here

Improve this question
5
  • 1
    I can advise you to use layout="none" on apex:outputPanels, so they are not rendered as span's in result HTML. That might be a reason
    – kurunve
    Jan 31, 2022 at 15:36
  • 1
    Your table element has an layout: auto in the style attribute. I'm not familiar with it, but that could be me. Did you mean table-layout: auto? The table style also has align=center which might trip up outlook.com. You can just remove that since you've also added at the end
    – Kasper
    Jan 31, 2022 at 19:42
  • 1
    Btw, if you don't @ a person on stack exchange then that person may never see your message unless they manually check back. The exception to that is if your sending a message to the poster of the question or answer. They'll automatically receive a ping
    – Kasper
    Jan 31, 2022 at 19:49
  • 1
    @Kasper Thanks!!! I removed the layout: auto and kept the align="center", as you can see it worked, now the mess is at the top margin. But it's already much better
    – Souza
    Feb 1, 2022 at 19:12
  • 1
    @kurunve Thank you! It keeps disrespecting the css but it's not going to spam which is very important so thanks
    – Souza
    Feb 1, 2022 at 19:13

1 Answer 1

Reset to default
1

Allign issue

There's a few places where you have:

<th style=" align=center; margin-left: auto

Inline css in the style attribute can never contain an = sign. The values are always separated with a :.

The align tag is also not supported in inline css (That's the css you can place inside a style attributes "").

You can use align="center" outside of the style attribute . This is normally not recommended for websites because it not supported in HTML 5. However, this is an email template and depending on the email client it may be supported or even required for you layout. (There are a lot of email clients and all of them may render the email template HTML differently. There's far less standardization in de rendering for email HTML than there is for website HTML.)

You could therefore check if this will work for you:

<th align="center" style="margin-left: auto

or you can check if your layout will work as you want it if you remove the align attribute all together:

<th style="margin-left: auto

Spacing issue

The art of getting email template css to work correctly is complicated. There's a lot of hidden gotcha's that you don't have with normal HTML. I generally try to find a template of someone who knows what they were doing and which looks a bit like mine and then try to adjust that template with the required css adjustments and Visualforce tags.

In this case I would guess that the table tag needs a few extra attributes

<table border="0" cellpadding="0" cellspacing="0"

I'm not sure how the Outlook app renders emails these days but Outlook used to have few specific requirements of its own. You can read about a few of there here.

Improve this answer
4
  • 1
    really, what a grotesque mistake on my part with align=center, thanks for the correction, I made the changes, do you have any suggestions on how I can make this table not be so far (margin-top) from the h3 element? I've tried everything I could imagine. Thanks for the answers.
    – Souza
    Feb 1, 2022 at 21:09
  • 1
    @GuedesSá No problem, happens to all of us at times. I've added a suggestion for the spacing issue but I'm not sure if that will solve it.
    – Kasper
    Feb 1, 2022 at 21:24
  • 1
    it didn't work out, but that's ok, the most important thing was the centralization was delivered. I will delve deeper into this topic, thank you very much for your help! @Kasper
    – Souza
    Feb 2, 2022 at 18:11
  • 1
    Happy to help @GuedesSá. Ik know how hard email templates can be. You might be able to find some specific (stack exchange) forums to help with email templates. Visualforce is relatively straight forward in comparison.
    – Kasper
    Feb 2, 2022 at 22:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .