title: Outlook 07,10 Buttons padding issues Email
body: <p>I'm Litmus-testing a very simple email. Looks good in all email clients except Outlook 2007 and 2017. Apparently, in these two specific browsers it overlaps the buttons and completely removes and spaces that were there:
  Please see image attached and see my Fiddle / Snippet for full code, thank you for your help in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/K9UeD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K9UeD.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
      &lt;title&gt;Request a quote today.&lt;/title&gt;
      &lt;style&gt;
          &lt;!--[if gte mso 9]&gt;
   li {
      text-indent: -5em; /* Normalise space between bullets and text */
  } &lt;![endif]--&gt;
                  /* Some resets and issue fixes */
          #outlook a { padding:0 ; }
                  body{ background-color: #687079; width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }    
          .ReadMsgBody { width: 100%; }
          .ExternalClass {width:100%;}
          .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
          table td {border-collapse: collapse;}
          .ExternalClass * {line-height: 115%;} 
          .left  {text-align:left !important; width:100% !important; height:auto !important;} 
          .appleLinksGray
          {color:#666666 !important; text-decoration:none !important;}
          .appleLinks a {color:#666666; text-decoration: none;}
  .appleLinksWhite a {color:#666666; text-decoration: none;}
        ul {
         padding: 10px;
         text-align: center!important;
      list-style-position: inside!important;
  }    .center{
      margin:0 auto;
      text-align:center;
  }
         
          /* End reset */
                 
                 
                  /* These are our tablet/medium screen media queries */
          @media screen and (max-width: 630px){
  
          body{ background-color: #ffffff; }
                                 
                          /* Display block allows us to stack elements */                      
              *[class="mobile-column"] {display: block; }
                         
                          /* Some more stacking elements */
              *[class="mob-column"] {float: none !important;width: 50% !important;}    
                               
                          /* Hide stuff */
              *[class="hide"] {display:none !important;}          
             
                          /* This sets elements to 100% width and fixes the height issues too, a god send */
                          *[class="100p"] {width:100% !important; height:auto !important;}                              /* This sets elements to 100% width and fixes the height issues too, a god send */
                          *[class="stack"] {display:block !important;;
  
      width:100%; !important;} 
                                 
                          /* For the 2x2 stack */                
                          *[class="condensed"] {padding-bottom:40px !important; display: block;}
                         
                          /* Centers content on mobile */
                          *[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
              
              /* left aligns content on mobile */
                          *[class="left"] {text-align:left !important; width:100% !important; height:auto !important;}    
                         
                          /* 100percent width section with 20px padding */
                          *[class="100pad"] {width:100% !important; padding:20px;}
                         
                          /* 100percent width section with 20px padding left &amp; right */
                          *[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
                         
                          /* 100percent width section with 20px padding top &amp; bottom */
                          *[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
                         
                 
          }
                          *[class="appleLinksGray"] 
          {color:#666666 !important; text-decoration:none !important;}
                         
                 
          }
          
                         
         
      &lt;/style&gt;
     
     
  &lt;/head&gt;
   
   
  &lt;div style="background-color: #687079;"&gt;
   
  &lt;body style="padding:0; margin:0; background-color: #687079;"&gt;
       &lt;div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"&gt;
  Lorem ipsom dolor corjs hrnnmeo.&lt;/div&gt;
   
  &lt;table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%" class="100p"&gt;
      &lt;tr&gt;
          &lt;td align="center" valign="top" style="background-color: #687079;" class="100p"&gt;
         
              &lt;table width="640" border="0" cellspacing="0" cellpadding="0" class="hide" style="background-color: #687079;" class="100p"&gt;
              &lt;/table&gt;
             
              &lt;table width="640" cellspacing="0" cellpadding="0" bgcolor="ffffff" class="100p"&gt;
                  &lt;tr&gt;
                      &lt;td style="background-color: #687079;" width="640" valign="top" class="100p"&gt;
              
               &lt;tr&gt;
              &lt;td bgcolor="#ffffff" style="padding:0;"&gt;
              &lt;div align="center"&gt;
  
                  &lt;!-- Table used to set width of email --&gt;
  
                  &lt;table class="container" width="640" border="0" cellspacing="0" cellpadding="0"&gt;
                      &lt;tr&gt;
                          &lt;td bgcolor="#ffffff"&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td class="center" align="center" valign="middle" style="font-family:Arial, Geneva, sans-serif; font-size:22px; color:#4379bc; margin: 0 auto !important; padding-top:0px; padding-right:12px; padding-bottom:0px; padding-left:12px; font-weight:bold;"&gt;&lt;a href="https://google.com" target="_blank" alias="When it’s time to think 
  about insurance: Link" style="text-decoration:none;"&gt;&lt;img alt="When it’s time to think 
  about insurance,: Image" class="100p" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/600x250_email_banner_746_17.jpg" width="600" height="238" border="0" style="text-decoration:none;"/&gt;&lt;/a&gt;&lt;/td&gt;  
                                      &lt;/tr&gt;
                                  &lt;/table&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;       
              
     &lt;tr&gt;
    
                &lt;td class="100p" style="background-color: #687079; padding:0;"&gt;&lt;div align="center"&gt;
          
                 &lt;!-- Table used to set width of email --&gt;
          
                     &lt;table class="100p" width="640" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0"&gt;
  
                      &lt;tr&gt;
                          &lt;td class="mobile-column" valign="top" bgcolor="#ffffff"&gt;&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                            
  &lt;/table&gt; &lt;table width="640" border="0" cellspacing="0" cellpadding="30" style="background-color:#ffffff;" class="100p"&gt;
  &lt;tr&gt;
      &lt;td align="center" style="background-color:#ffffff; font-size:16px; color:#000000;"&gt;&lt;font face="Arial, sans-serif"&gt;&lt;span style="font-size:16px;"&gt;     
  
  &lt;br&gt;&lt;span style="font-size:30px; color:#00539c;"&gt;&lt;b&gt;Insurance that’s not just … Insurance&lt;/b&gt;&lt;/span&gt;&lt;br&gt;
             
   &lt;br&gt; 
  &lt;p align="left"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
   &lt;br&gt;
   &lt;br&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.&lt;/p&gt;
   &lt;br&gt;
       
  
                                                               &lt;!-- First Button : Begin --&gt;
                                  &lt;table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;"&gt;
                                      &lt;tr style="background-color: #ffffff;"&gt; 
                                          &lt;td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"&gt; 
                                              &lt;a href="https://www.google.com" style="color: #ffffff !important; background:##5291bc; border: 15px solid #00539c; mso-padding-alt: 10px 0; padding: 0 12px;  font-family: Arial, sans-serif; font-size: 18px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"&gt; 
                                                  &lt;!--[if mso]&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;![endif]--&gt;&lt;font color="#FFFFFF"&gt;REQUEST A QUOTE&lt;/font&gt;&lt;!--[if mso]&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;![endif]--&gt;
                                              &lt;/a&gt;
                                          &lt;/td&gt;
                                          
                                      &lt;/tr&gt;                                           
      &lt;/table&gt;
  &lt;!-- First Button : END --&gt;  &lt;/tr&gt;
                         
            
                    &lt;table width="640" border="0" cellspacing="0" cellpadding="0PX" style="padding: 0px; background-color:#ffffff;" class="100p"&gt;
                  &lt;tr&gt;
                      &lt;td align="CENTER" style="padding: 0px; background-color:#ffffff; font-size:16px; color:#666666;"&gt;&lt;span style="color: #666666; font-family:Arial,sans-serif;font-size: 18px;line-height: normal;text-align: -webkit-center;"&gt;&lt;span style="font-size:16px; line-height:0px;"&gt;&lt;b&gt; &amp;ndash; OR &amp;ndash;&lt;/span&gt;&lt;/a&gt; &lt;br&gt;
  &lt;/b&gt;
                            &lt;/span&gt;&lt;br&gt;
                  
                          
                      &lt;/td&gt;
                      
                      
                  &lt;/tr&gt;
  
  
  
                        
                                                               &lt;!-- Second Button : Begin --&gt;
                                  &lt;table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;"&gt;
                                      &lt;tr style="background-color: #ffffff;"&gt; 
                                          &lt;td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"&gt; 
                                              &lt;a href="tel:888-671-8000" style="color: #ffffff !important; background:##5291bc; border: 15px solid #00539c; padding: 0 12px;  font-family: Arial, sans-serif; font-size: 18px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"&gt; 
                                                  &lt;!--[if mso]&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;![endif]--&gt;&lt;font color="#FFFFFF"&gt;CALL NOW&lt;/font&gt;&lt;!--[if mso]&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;![endif]--&gt;
                                              &lt;/a&gt;
                                          &lt;/td&gt;
                                          
                                      &lt;/tr&gt;                                           
      &lt;/table&gt;
  &lt;!-- Second Button : END --&gt;  &lt;/tr&gt;
      
              
                   
                        
                  
              
         &lt;!-- END Table used to set width of email --&gt;
  
        
              
  
         
     &lt;/tr&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
     &lt;img src="http://www.google-analytics.com/collect?v=1&amp;t=event&amp;tid=UA-2584670-1&amp;cid=3333&amp;ec=email&amp;ea=open&amp;cs=exacttarget&amp;cm=email&amp;cn=insl2q&amp;dr=exacttarget&amp;el=Request%20a%20quote%20for%20insurance%20from%20AAA%20today." /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;&lt;custom name="opencounter" type="tracking"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/8u7x9cdu/" rel="nofollow noreferrer">jsfiddle.net/8u7x9cdu/</a></p>