Outlook Email logos not rendering correctly

Forum|Forum|5 years ago
April 17, 2020
2 replies
2400 views

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?

                  <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>

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Dave_Roberts

New Participant

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.

P

PhillipWi1

New Participant

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded