Outlook Email logos not rendering correctly

[Katie_O_Brien]

Hello! All of our email templates have our two logos on them, they look fine in every platform except Outlook. The logos should be stacked one under the other, can someone help with a fix for just Outlook? 

Logos - all other platforms

Logos - Outlook

                  <table class="mktoModule one-column" id="socialWithLogo" mktoname="Social With Logo" border="0 " cellpadding="10 " cellspacing="0 " width="100% " style="border-spacing:0;background-color:${emailBackgroundColor}; ">
                    <tr>
                      <td>
                        <table width="100% " border="0 " cellpadding="0 " cellspacing="0 ">
                          <tr>
                            <td height="20 " width="100% " style="font-size: 20px; line-height: 20px; ">&nbsp;

                            </td>
                          </tr>
                        </table>
                        <table width="100% " border="0 " cellpadding="0 " cellspacing="0 ">
                          <tr>
                            <td align="left " width="150 " style="-moz-border-radius: 4px; -webkit-border-radius: 4px;
                        border-radius: 4px; ">
                              <table>
                                <tr>
                                  <td style="padding-right: 7px;">
                                    <a href="${socialIconLink1}" style="width:30px;text-decoration: none;border:0;" class="button_link ">
                                      <img src="${socialIcon1}" width="30 " alt="Facebook" style="border-width:0;width:100%;max-width:30px;height:auto; "
                                      />
                                    </a>
                                  </td>
                                  <td style="padding-right: 7px;">
                                    <a href="${socialIconLink2}" style="width:30px;text-decoration: none;border:0;" class="button_link ">
                                      <img src="${socialIcon2}" width="30 " alt="Twitter" style="border-width:0;width:100%;max-width:30px;height:auto; "
                                      />
                                    </a>
                                  </td>
                                  <td style="padding-right: 7px;">
                                    <a href="${socialIconLink3}" style="width:30px;text-decoration: none;border:0;" class="button_link ">
                                      <img src="${socialIcon3}" width="30 " alt="Instagram" style="border-width:0;width:100%;max-width:30px;height:auto; "
                                      />
                                    </a>
                                  </td>
                                </tr>
                              </table>
                            </td>
                            <td align="right " width="123 " style="float: right;">
                              <div class="mktoImg" id="footerLogo" mktoName="Footer Logo" mktoImgsrc="http://go.mysticlake.com/rs/485-SMD-064/images/logo_ML_purple.png"
                                alt="Mystic Lake" mktoImgLink="http://www.mysticlake.com/" mktoLockImgStyle="true">
                                <a>
                                  <img width="123" align="right" style="display:block;border-width:0;width:100%;max-width:123px;height:auto;padding-bottom:5px;"
                                  />
                                </a>
                              </div>
                              <div class="mktoImg" id="footerLogoTwo" mktoName="Footer Logo" mktoImgsrc="http://go.mysticlake.com/rs/485-SMD-064/images/LSC Logo_aug18.png"
                                alt="Little Six" mktoImgLink="http://www.littlesixcasino.com/" mktoLockImgStyle="true">
                                <a>
                                  <img width="123" align="right" style="display:block;border-width:0;width:100%;max-width:123px;height:auto;padding-top: 5px;"
                                  />
                                </a>
                              </div>
                            </td>
                          </tr>
                        </table>
                        <table width="100% " border="0 " cellpadding="0 " cellspacing="0 ">
                          <tr>
                            <td height="10 " width="100% " style="font-size: 10px; line-height: 10px; ">&nbsp;

                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>

[Phillip_Wild]

Hi Katie

Since this isn't a Marketo-specific question, you will likely find more success on the Email Geeks Slack community under the #code channel. The community is very responsive and you will likely get the right answer within 15 minutes 🙂

Sorry! Outlook can be a pain.

[Dave_Roberts]

Hey Katie, do you want the logos to always stack one atop the other -- or -- are they supposed to be next to eachother on desktop or something like that?

If you're looking to get them to always stack, you might want to add a table in place of the 2 <div>s you've got setup now and then inside that table, use 2 <tr> (rows) and stack your content that way. As a quick example to illustrate the idea here, I've wrapped some tags around what you've already got. The new code is commented out so it's a little easier to read, and you'd of course want to add all the parameters for the new elements similar to the tables above it around the social icon section.

<td align="right " width="123 " style="float: right;">
<!--
<table>
<tr>
<td>
-->
<div class="mktoImg" id="footerLogo" mktoName="Footer Logo" mktoImgsrc="http://go.mysticlake.com/rs/485-SMD-064/images/logo_ML_purple.png"
 alt="Mystic Lake" mktoImgLink="http://www.mysticlake.com/" mktoLockImgStyle="true">
<a>
  <img width="123" align="right" style="display:block;border-width:0;width:100%;max-width:123px;height:auto;padding-bottom:5px;"/>
</a>
</div>
<!--
</td>
</tr>
<tr>
<td>
-->
<div class="mktoImg" id="footerLogoTwo" mktoName="Footer Logo" mktoImgsrc="http://go.mysticlake.com/rs/485-SMD-064/images/LSC Logo_aug18.png"                               alt="Little Six" mktoImgLink="http://www.littlesixcasino.com/" mktoLockImgStyle="true">
<a>
  <img width="123" align="right" style="display:block;border-width:0;width:100%;max-width:123px;height:auto;padding-top: 5px;"/>
</a>
</div>
<!--
</td>
</tr>
</table>
-->
</td>

 If you were to go this route, you might also want to change the alignment of your images from right to center.