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

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