Create a Discussion

Nothing Showing Up in Outlook 7/10

Abby Hayes posted 2017-09-20 00:07:22

Hi, all. I've just pulled together an email with an image background. I'm using the bulletproof tool to make the code, and then figured out how to use columns to put a text box type table over the middle of the image. It looks great in all the tests, except nothing at all is showing up for Outlook 7/10 -- not even the fallback color and wonky-looking text.

Can someone help? I'm relatively new to this, so I'm sure there are some mistakes or pieces that are not best practice!

Abby Hayes replied 2017-09-20 13:30:17

Sorry, that makes sense. Thanks for the tutorial.

<!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="format-detection" content="telephone=no"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

    <title>EdChoice</title>

    <style>


        /* Some resets and issue fixes */
        #outlook a { padding:0; }
        body{ 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%;}   

        /* End reset */


        /* These are our tablet/medium screen media queries */
        @media screen and (max-width: 630px){


            /* Display block allows us to stack elements */                      
            *[class="mobile-column"] {display: block;} 

            /* Some more stacking elements */
            *[class="mob-column"] {float: none !important;width: 100% !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;}                    

            /* 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;}            

            /* 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;} 


        }


    </style>


</head>

<body style="padding:0; margin:0">

<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
                <tr>
                    <td background="http://image.exct.net/lib/fef71276756301/m/1/7dbf9ddf-b389-4ee2-bb8e-8ec97dd53e06.png" bgcolor="#6b3077" width="600" valign="top" class="100p">
                        <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
                            <v:fill type="tile" src="http://image.exct.net/lib/fef71276756301/m/1/7dbf9ddf-b389-4ee2-bb8e-8ec97dd53e06.png" color="#6b3077" />
                            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                <![endif]-->
                                <div>
                                    <table width="600px" border="0" cellspacing="0" cellpadding="20" class="100p">
                                        <tr>
                                            <td width="200px" height="200px" valign="top">

                                                <table border="0" cellspacing="0" cellpadding="0" class="100p">
                                                    <tr>
                                                        <td align="left" width="192px;" class="100p" height="70px;" padding-bottom:><img src="http://image.exct.net/lib/fef71276756301/m/1/8d9e63d1-9817-4012-93d8-3008f660b9c3.png" alt="Logo" border="0" style="display:block" /></td>
                                                        <td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">View in Browser</a> &nbsp; | &nbsp;<a href="#" style="color:#FFFFFF; text-decoration:none;">Forward to a Friend</a></font></td>
                                                    </tr>
                                                </table>
                                                <table border="0" cellpadding="0" cellspacing="0" width="600">
                                                    <tr>
                                                        <td align="center" height="700px" valign="center"><br><br><br><br><br><br><br>
    <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="100" class="templateColumnContainer">
            </table>
            <tr>
            <table align="center" border="0" cellpadding="0" cellspacing="10" width="400" class="templateColumnContainer" bgcolor="#6b3077">
                <tr>
                    <td class="centerColumnContent">
                        <td align="center" style="color:#FFFFFF; font-size:22px;">
                                                            <font face=" Arial, sans-serif">

                                                                <Span style="font-size:22px;">Why do Indiana parents choose their children's schools?<br /></Span>
                                                                <br />

<div> <!--[if mso]>
   <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.edchoice.org/blog/research-finds-indiana-parents-think-school-choice-choose-schools/" style="height:50px;v-text-anchor:middle;width:265px;" arcsize="60%" strokecolor="#FF6900" fillcolor="#ffffff">
   <w:anchorlock/>
   <center style="color:#FF6900;font-family:sans-serif;font-size:21px;font-weight:bold;">FIND OUT HERE</center>
   </v:roundrect>
   <![endif]--><a href="https://www.edchoice.org/blog/research-finds-indiana-parents-think-school-choice-choose-schools/" style="float: center; background-color:#ffffff;border:2px solid #FF6900;border-radius:30px;color:#FF6900;display:inline-block;font-family:sans-serif;font-size:21px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:335px;-webkit-text-size-adjust:none;mso-hide:all;" target="_blank" alias="Report button">FIND OUT HERE</a>
   </div><br>
            <table align="right" border="0" cellpadding="0" cellspacing="0" width="100" class="templateColumnContainer">
                <tr>
                    <td class="rightColumnContent">
                    </td>
                </tr>
            </table>



</body>

Reply to Abby Hayes

Jaina Mistry replied 2017-09-20 07:46:22

Hi Abby, posting your code will help folks around here help you fix your code. You can either share your code via Builder or post it directly in your post, using Markdown - https://litmus.com/community/markdown

Reply to Jaina Mistry

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Nothing Showing Up in Outlook 7/10

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password