function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
PpapasPpapas 

VisualForce Email Template - GRRRR!!

I am about to kill myself here guys. I cant tell/dont know what I am doing wrong. Please, I need a second pair of eyes.

 

I would really apprecaite your help

 

Visualforce Email tempalte does not apper exaclty the same when i Send Test to my email.

 

<messaging:emailTemplate recipientType="User"
    subject="This is a TEST">
    
   <messaging:htmlEmailBody >
       <html>
    
    <body>
     <STYLE type="text/css">
          body {
          background: #142952;
          
    }


#page {
    float: center;
    clear: both;
    width: 491px !important;
    width: 100%;
    padding: 2em 49px;
    color: #000;
    font-size: 1em;
    margin-left:auto;
    margin-right:auto;
    background:#CCC;
     </STYLE>
     
<div id="page">
      <p style="font-size:16px">This a TEST This is a TEST</p>
    </div>
       </body>
   </html>
</messaging:htmlEmailBody>
</messaging:emailTemplate>

 Thanks in advance guys!!

Best Answer chosen by Admin (Salesforce Developers) 
PpapasPpapas

I FOUND IT.  I blame myself. the issue was the at margins and the padding. i changed the !important attribute and i can drive it now exactly where i want it

 

Thanks again daveingram, though 

All Answers

DaveIngramDaveIngram

what issue are you having exactly?

PpapasPpapas

 

thanks daveingram so much for replying.

 

The issue i have exactly is that the preview of the vf email from the actual email is completely different. It looks like in the email (Outlook 2007) does not recognize the css styles.

 

The preview of the template is completely different from the actual email when I try to send test to me.

 

Thanks again for your help 

DaveIngramDaveIngram
Hi,

Outlook does not like CSS much, try inline styles instead. Eg <p style="color=000000">

Dave
PpapasPpapas

Thanks again,

 

I tried..no luck

<html>

<body>
	

<div style="float:center; width:490px !important; padding: 2em 50px; color:#000; font-size:1em; margin-left:auto; margin-right:auto; background:#ccc;">
      <p> TEST TEST TEST</p>
    </div>
</body>
</html>

 i am running out of options..i even create a component for that and nothing. I also tried to send it to my hotmail and my yahoo account to make sure is not the Outlook and I still get nowhere...

PpapasPpapas

I FOUND IT.  I blame myself. the issue was the at margins and the padding. i changed the !important attribute and i can drive it now exactly where i want it

 

Thanks again daveingram, though 

This was selected as the best answer
Mark RootMark Root
This email does not render properly in Gmail as the styles don't come through properly.  In taking a closer look at the message source, the CSS is being commented out for some reason.  The message renders fine on the Preview in SF, however.  Any ideas why? 

Mark.
Ben RosenthalBen Rosenthal
I haven't had a problem with Gmail rendering styles (except a couple like td background-color). A problem I experienced was with it failing to size the table columns properly when they were relative (percentages). When I changed to fixed-width columns, all was well.