-1

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.

enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Request a quote today.</title>
    <style>
        <!--[if gte mso 9]>
 li {
    text-indent: -5em; /* Normalise space between bullets and text */
} <![endif]-->
                /* 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 & right */
                        *[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
                       
                        /* 100percent width section with 20px padding top & bottom */
                        *[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
                       
               
        }
                        *[class="appleLinksGray"] 
        {color:#666666 !important; text-decoration:none !important;}
                       
               
        }
        
                       
       
    </style>
   
   
</head>
 
 
<div style="background-color: #687079;">
 
<body style="padding:0; margin:0; background-color: #687079;">
     <div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Lorem ipsom dolor corjs hrnnmeo.</div>
 
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%" class="100p">
    <tr>
        <td align="center" valign="top" style="background-color: #687079;" class="100p">
       
            <table width="640" border="0" cellspacing="0" cellpadding="0" class="hide" style="background-color: #687079;" class="100p">
            </table>
           
            <table width="640" cellspacing="0" cellpadding="0" bgcolor="ffffff" class="100p">
                <tr>
                    <td style="background-color: #687079;" width="640" valign="top" class="100p">
            
             <tr>
            <td bgcolor="#ffffff" style="padding:0;">
            <div align="center">

                <!-- Table used to set width of email -->

                <table class="container" width="640" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td bgcolor="#ffffff">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <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;"><a href="https://google.com" target="_blank" alias="When it’s time to think 
about insurance: Link" style="text-decoration:none;"><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;"/></a></td>  
                                    </tr>
                                </table></td>
                            </tr>
                        </table></td>
                    </tr>
                </table>
            </div></td>
        </tr>       
            
   <tr>
  
              <td class="100p" style="background-color: #687079; padding:0;"><div align="center">
        
               <!-- Table used to set width of email -->
        
                   <table class="100p" width="640" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0">

                    <tr>
                        <td class="mobile-column" valign="top" bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          
</table> <table width="640" border="0" cellspacing="0" cellpadding="30" style="background-color:#ffffff;" class="100p">
<tr>
    <td align="center" style="background-color:#ffffff; font-size:16px; color:#000000;"><font face="Arial, sans-serif"><span style="font-size:16px;">     

<br><span style="font-size:30px; color:#00539c;"><b>Insurance that’s not just … Insurance</b></span><br>
           
 <br> 
<p align="left">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
 <br>
 <br>
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.</p>
 <br>
     

                                                             <!-- First Button : Begin -->
                                <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                                    <tr style="background-color: #ffffff;"> 
                                        <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                                            <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"> 
                                                <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">REQUEST A QUOTE</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                                            </a>
                                        </td>
                                        
                                    </tr>                                           
    </table>
<!-- First Button : END -->  </tr>
                       
          
                  <table width="640" border="0" cellspacing="0" cellpadding="0PX" style="padding: 0px; background-color:#ffffff;" class="100p">
                <tr>
                    <td align="CENTER" style="padding: 0px; background-color:#ffffff; font-size:16px; color:#666666;"><span style="color: #666666; font-family:Arial,sans-serif;font-size: 18px;line-height: normal;text-align: -webkit-center;"><span style="font-size:16px; line-height:0px;"><b> &ndash; OR &ndash;</span></a> <br>
</b>
                          </span><br>
                
                        
                    </td>
                    
                    
                </tr>



                      
                                                             <!-- Second Button : Begin -->
                                <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                                    <tr style="background-color: #ffffff;"> 
                                        <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                                            <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"> 
                                                <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">CALL NOW</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                                            </a>
                                        </td>
                                        
                                    </tr>                                           
    </table>
<!-- Second Button : END -->  </tr>
    
            
                 
                      
                
            
       <!-- END Table used to set width of email -->

      
            

       
   </tr>
        </td>
    </tr>
</table>
   <img src="http://www.google-analytics.com/collect?v=1&t=event&tid=UA-2584670-1&cid=3333&ec=email&ea=open&cs=exacttarget&cm=email&cn=insl2q&dr=exacttarget&el=Request%20a%20quote%20for%20insurance%20from%20AAA%20today." />

</body>
</html><custom name="opencounter" type="tracking">

jsfiddle.net/8u7x9cdu/

Ted Goas
  • 7,051
  • 1
  • 35
  • 42
Clay
  • 37
  • 3
  • 10

2 Answers2

2

I noticed two things on reviewing your code.

  1. There are some unclosed tags and unbalanced <table>s. Be careful about closing a </tr> without first closing its <td>.

  2. It's safer to space things out by putting everything in it's own <td> for Outlook. Using a <br> doesn't always put an element on it's own line, but putting it in a new <tr><td> does. I've updated the part of the code with the buttons to look more like this:

    <tr>
        <td>
            <!-- First Button : Begin -->
            <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                <tr style="background-color: #ffffff;"> 
                    <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                        <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"> 
                            <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">REQUEST A QUOTE</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                        </a>
                    </td>
                </tr>                                           
            </table>
            <!-- First Button : END -->
        </td>
    </tr>

    <tr>
        <td>
            <table width="640" border="0" cellspacing="0" cellpadding="0PX" style="padding: 0px; background-color:#ffffff;" class="100p">
                <tr>
                    <td align="CENTER" style="padding: 20px 0px; background-color:#ffffff; font-size:16px; color:#666666;"><span style="color: #666666; font-family:Arial,sans-serif;font-size: 18px;line-height: normal;text-align: -webkit-center;"><span style="font-size:16px; line-height:0px;"><b> &ndash; OR &ndash;</span></a></b><br></span>
                    </td>
                </tr>
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <!-- Second Button : Begin -->
            <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                <tr style="background-color: #ffffff;"> 
                    <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                        <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"> 
                                <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">CALL NOW</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                        </a>
                    </td>
                </tr>                                           
            </table>
            <!-- Second Button : END -->
        </td>
    </tr>

You may need to fiddle around with the padding and line height, but something like this will display the layout you're looking for in all the annoying Windows desktop Outlooks.

Ted Goas
  • 7,051
  • 1
  • 35
  • 42
1

Clay, I have a fix for your button issues. I should point out you also have an issue with gmail. You could determine this yourself if you looked in Litmus. I don't believe that you're really paying attention to Litmus because I just ran your code myself before this reply.

You're also having issues with Yahoo, outlook.com, gmail, iPhones, Android, Windows 10 Mail.

I also remember that I tried to help you last week on identical issues. In previous email issues you posted (check Clay's Reputation panel) people keep giving you solid advice and you never followed it, gave us feedback on how it worked or showed any appreciation. The reason I say this is that you keep posting the same problems over and over and your code shows the same issues over and over.

Stack Overflow gives you what you put in. If you're just going to blow off our suggestions, what is the motivation to help you?

I'd be happy to let you flop around and fail. The way I learned is that I looked up problems on Stack Overflow and blowing you off hurts others that might treat email development seriously. So as an additional reminder, Outlook does not work with padding and margins:

This means that if you're setting your padding for the button height, it's not going to work in Outlook.

Outlook does not work with line-height values with only numbers. So line-height: 1.1 is going to be ignored because it doesn't understand. line-height: 40px; will be read and work. An additional tag you can use to help force Outlook to obey a line height it to place this directly in front of line-height: mso-line-height-rule: exactly; Read more:

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28