DEVHIDE
Login Or Sign up

Outlook 2007 blank between conditional comments

42 Views Asked by At

I've been coding html emails for many years using the various different conditional comment based 'bulletproof buttons' found on the web. Mostly these work fine but I'm having particular problems with Outlook 2007. In all of my tests the email functions correctly but in Outlook 2007 specifically content between the conditional comment buttons is invisible. The top header part of the email is fine until the end of the first button. Then the email is blank (but it seems the correct layout) until the next button which is displayed correctly. This happens throughout the email only displaying the buttons and code in between is blank.

It seems there's some overlap in the conditionals or they aren't closed properly. But I can't see where that is happening in the code.

I've tried many different button types but these seem to have the best overall compatibility it's just Outlook 2007 that is the issue here.

Any help greatly appreciated.

O

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>test</title>
<style type="text/css">
html, body {
    -webkit-text-size-adjust: none;
}
a[href^="tel"] {
    color: #FFFFFF;
    text-decoration: underline;
}
 @media screen and (max-width: 595px) {
*[class=responsive] {
    width: 100%!important;
}
*[class=invisible] {
    display: none!important;
}
*[class=mobile_show_table] {
    display: table!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
    width: 100%!important;
}
*[class=mobile_show_row] {
    display: table-row!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
    width: 100%!important;
}
*[class=mobile_show_cell] {
    display: table-cell!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
}
*[class=mobile_show_text] {
    display: table-cell!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 14px!important;
    line-height: 18px!important;
    color: #FFFFFF!important;
    text-align: center!important;
    mso-hide: none!important;
}
*[class=mobile_show_title] {
    display: table-cell!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 39px!important;
    font-weight: bold!important;
    line-height: 41px!important;
    color: #FFFFFF!important;
    text-align: center!important;
    mso-hide: none!important;
}
*[class=mobile_show_img] {
    display: block!important;
    width: 100%!important;
    max-width: 600px!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
}
*[class=mobile_show_limited] {
    width: 50%!important;
    display: table-cell!important;
    background-color: #FFFFFF!important;
    border: 2px solid #FF0000!important;
    padding: 5px 10px!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 12px!important;
    line-height: 12px!important;
    text-align: center!important;
    color: #FF0000!important;
    max-height: none!important;
    max-width: none!important;
    mso-hide: none!important;
}
*[class=mobile_show_limited_text] {
    width: 50%!important;
    display: table-cell!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 12px!important;
    line-height: 16px!important;
    color: #FFFFFF!important;
    text-align: center!important;
    max-height: none!important;
    max-width: none!important;
    mso-hide: none!important;
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color:#e8eaea;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #e8eaea;">
  <tr>
    <td width="100%" style="background-color: #e8eaea;"><!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->

      <table width="600" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto 0 auto; background-color: #FFFFFF;" class="responsive">
        <tr>
          <td width="600" class="responsive" style="background-color:#FFFFFF; border-bottom: 5px solid #1cadda"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="4%">&nbsp;</td>
                  <td width="92%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td width="100%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tbody>
                                <tr>
                                  <td width="45%" class="invisible"><a href="%url%" target="_blank"><img src="images/taste.gif" width="188" height="79" alt="" border="0" style="display: block;"/></a></td>
                                  <td width="10%"><a href="%url%" target="_blank"><img src="images/logo.gif" width="61" height="79" alt="" border="0" style="display: block;"/></a></td>
                                  <td width="45%"><div style="margin: 0 0 0 auto;"><!--[if mso]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="%url%" style="height:30px; v-text-anchor:middle; width:150px;"fill="t">
    <v:fill type="tile" color="#FFFFFF" />
    <w:anchorlock/>
    <center style="color:#1cadda;font-family:sans-serif;font-size:7px;">Lorem ipsum dolor</center>
  </v:rect>
<![endif]-->
                                      <div style="margin: 0 0 0 auto;mso-hide:all;">
                                        <table align="right" cellpadding="0" cellspacing="0" height="30" width="150" style="margin: 0 0 0 auto; mso-hide:all;">
                                          <tbody>
                                            <tr>
                                              <td align="center" bgcolor="#FFFFFF" height="30" style="vertical-align:middle;color: #1cadda; display: block; mso-hide:all;" width="150"><a href="%url%" style="font-size:14px;-webkit-text-size-adjust:none; font-family:sans-serif; text-decoration: none; line-height:30px; width:150px; display:inline-block; border: 1px solid #1cadda;" title="Button"><span style="color:#1cadda">Lorem ipsum dolor</span></a></td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </div>
                                    </div></td>
                                </tr>
                              </tbody>
                            </table></td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
        <tr>
          <td width="600" class="responsive" style="background-color:#ffae02;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="96%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td width="100%">&nbsp;</td>
                        </tr>
                        <tr class="invisible">
                          <td width="100%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tbody>
                                <tr>
                                  <td width="45%"><a href="%url%" target="_blank"><img src="images/main_image.jpg" width="293" height="488" alt="" border="0" style="display: block;"/></a></td>
                                  <td width="55%" style="vertical-align: top;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                      <tbody>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 39px; line-height: 41px; color: #FFFFFF; text-transform: uppercase;"><strong>Lorem ipsum dolor sit</strong></td>
                                        </tr>
                                        <tr>
                                          <td style="height: 12px; font-size: 12px; line-height: 12px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;"><strong>Dear ABCDEF,</strong></td>
                                        </tr>
                                        <tr>
                                          <td style="height: 12px; font-size: 12px; line-height: 12px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                                        </tr>
                                        <tr>
                                          <td style="height: 12px; font-size: 12px; line-height: 12px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                                        </tr>
                                        <tr>
                                          <td style="height: 18px; font-size: 18px; line-height: 18px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td><div style="margin: 0 auto 0 auto;"><!--[if mso]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="%url%" style="height:45px; v-text-anchor:middle; width:195px;"fill="t">
    <v:fill type="tile" color="#1cadda" />
    <w:anchorlock/>
    <center style="color:#FFFFFF;font-family:sans-serif;font-size:18px;">ORDER NOW</center>
  </v:rect>
<![endif]-->
                                              <div style="margin: 0 auto 0 0;mso-hide:all;">
                                                <table align="left" cellpadding="0" cellspacing="0" height="45" width="195" style="margin: 0 auto; mso-hide:all;">
                                                  <tbody>
                                                    <tr>
                                                      <td align="center" bgcolor="#1cadda" height="45" style="vertical-align:middle;color: #FFFFFF; display: block; mso-hide:all;" width="195"><a href="%url%" style="font-size:18px;-webkit-text-size-adjust:none; font-family:sans-serif; text-decoration: none; line-height:45px; width:195px; display:inline-block; font-weight: bold;" title="Button"><span style="color:#FFFFFF">ORDER NOW</span></a></td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </div>
                                            </div></td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-block;">
                                              <tbody>
                                                <tr>
                                                  <td style="background-color: #FFFFFF; border: 2px solid #FF0000; padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; color: #FF0000;">Limited time offer</td>
                                                  <td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; color: #FFFFFF; padding: 5px;">Ends XX/XX/XX</td>
                                                </tr>
                                              </tbody>
                                            </table></td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td><img src="images/payment_methods.jpg" width="229" height="47" alt=""/></td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                        </tr>
                                      </tbody>
                                    </table></td>
                                </tr>
                              </tbody>
                            </table></td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>

        <!--[if !mso]><!-->
        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all; background-color: #ffae02">
          <td width="100%" class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
              <tbody class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                  <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                  <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                      <tbody class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_title" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><img src="images/mobile_main_image.jpg" class="mobile_show_img" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;" alt=""/></td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_title" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">LOREM IPSUM DOLOR SIT</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_text" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_text" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><div style="margin: 0 auto 0 auto;"><!--[if mso]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="%url%" style="height:45px; v-text-anchor:middle; width:195px;"fill="t">
    <v:fill type="tile" color="#1cadda" />
    <w:anchorlock/>
    <center style="color:#FFFFFF;font-family:sans-serif;font-size:18px;">ORDER NOW</center>
  </v:rect>
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="0" style="line-height: 0; font-size: 0; max-height: 0;">
</td>
</tr>
</table>
<![endif]-->
                              <div style="margin: 0 auto 0 auto;mso-hide:all;">
                                <table align="center" cellpadding="0" cellspacing="0" height="45" width="195" style="margin: 0 auto; mso-hide:all;">
                                  <tbody>
                                    <tr>
                                      <td align="center" bgcolor="#1cadda" height="45" style="vertical-align:middle;color: #FFFFFF; display: block; mso-hide:all;" width="195"><a href="%url%" style="font-size:18px;-webkit-text-size-adjust:none; font-family:sans-serif; text-decoration: none; line-height:45px; width:195px; display:inline-block; font-weight: bold;" title="Button"><span style="color:#FFFFFF">ORDER NOW</span></a></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div></td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><table width="80%" border="0" cellspacing="0" cellpadding="0" class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all; margin: 0 auto;">
                              <tbody class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                                <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                                  <td class="mobile_show_limited" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">Limited time offer</td>
                                  <td class="mobile_show_limited_text" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">Ends XX/XX/XX</td>
                                </tr>
                              </tbody>
                            </table></td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
        <!--<![endif]-->

        <tr>
          <td width="600" class="responsive" style="background-color:#FFFFFF; border-top: 1px solid #1cadda; border-bottom: 1px solid #1cadda"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="4%">&nbsp;</td>
                  <td width="92%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-align: center; line-height: 24px; color: #1cadda;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim.</strong></td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
        <tr>
          <td width="600" class="responsive" style="background-color:#000000;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="4%">&nbsp;</td>
                  <td width="92%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; line-height: 16px; color: #FFFFFF;">Copyright &copy; 2018 XXXXXX, All rights reserved.</td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
  </tr>
</table>
</body>
</html>
html email button outlook outlook-2007
Original Q&A
1

There are 1 best solutions below

1
gwally On

I removed every mso-hide: all; and your code displayed the same in Outlook as in every other email client.

Strip them all out and replace them one by one as needed.

This works really well for hiding sections for Outlook and hiding sections from Outlook:

    <!--[if !mso]><!-- -->
      <img src="http://via.placeholder.com/300x300/0000ff/?text=Modern+Email" alt="Modern+Email" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <!--<![endif]-->
    <!--[if gte mso 9]>
      <img src="http://via.placeholder.com/300x300/ff0000?text=Outlook" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <![endif]-->

You can always copy the contents of this page and try it in Outlook and a modern browser to show how things should look using the above tags.

Good luck.

Related Questions in HTML

Related Questions in EMAIL

Related Questions in BUTTON

Related Questions in OUTLOOK

Related Questions in OUTLOOK-2007

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.