Formatting HTML email signature for Outlook Mac OS - what am I doing wrong?

Question

I edited this html-only Codepen template to make an email signature for my office.

I tried to import my HTML email signature into Outlook — I opened my index.html file in Chrome, selected my code with Cmd + A, copied it with Cmd + C, and pasted it into the Outlook signature interface with 'Keep Source Formatting' selected — using supposedly the correct method to import html email signatures into Outlook with Mac OS. My signature looked all messed up and squished, like my index.html file from the /src folder.

My email signature in Outlook:

I tried the copy/paste method with the template's index.html file and there are some style changes from Chrome to Outlook, but the spacing remained solid.

Template email signature in Outlook:

Is there something I'm missing with my code? The only difference I can tell between my signature and the template is the fact that I have the entirety of my email signature in

, while the template only uses a table for the logo/social icons section. TYIA!

index.html code

Screenshot of my email signature's Chrome display:

John Smith (He / Him)
Digital Media Specialist
Office of My Boss

Office: 516-284-3300Cell: 516-284-3300
1234 W Monroe St Chicago, IL 60661

example.com

joebeans · Accepted Answer

I found that any padding or margins within my table did not register at all in Outlook. I'm not sure if this is specific to tables, as I found other people had success with padding in Outlook.

My solution

What finally worked was adding extra rows and columns with a specified height/width to act as padding. For me at least, that was the only workaround for my Outlook issues. I hope my answer can maybe help another novice who was super frustrated, like I was! ☺️


    
 
    

      

  
    
        
      
    
      
    
      
        
          
            John Smith  (He / Him)
          
        
        
        
          
            Digital Media Specialist
          
        
        
        
          
            Office of My Boss 
          
        
        
             
    
  
      
  
    
      
        
        
          
              
                  Office:
                  
                      516-284-3300
                  
               
                 | 
              Cell:
                  
                       516-284-3300
                  
                                                         
          
        
        
        
          
              1234 W Monroe St 
               | 
              Chicago, IL 60661 
          
        
        
      
    
  
   
  
    
      
        
          
             
          
          
          
             
          
          
          
             
          
          
          
             
          
          
          
             
          
          
          
             |
          
          
              example.com

Formatting HTML email signature for Outlook Mac OS - what am I doing wrong?

Answers (2)

My solution

Related Questions