Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Timothy Anderson
Timothy Anderson
10,761 Points
Posted by Timothy Anderson
Timothy Anderson
10,761 Points

HTML Email Issue

I developed a set of emails for a client for a request literature campaign. I'm really happy with how they turned out but 2 out of 4 of them have layout issues specific to Microsoft outlook 2010.

We tested across all other platforms (Apple Mail, iOS, Android, Gmail, MS Outlook 2012+, etc.) and are happy with the result. But MSO 2010 looks terrible.

Given that they are coded up for email, I have an internal style sheet (2 media queries), some inline styles to assist with MSO, Android, and Gmail, as well as an internal conditional style sheet ( <!--[if (gte mso 10)|(IE)]> ) to target MS Outlook.

Can anyone help me fix this? Is MSO 2010 considered a supported platform by anyone? Either way, it's what the client wants.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset-UTF-8" /> <title>Wood-Mode Email 2</title> <style type="text/css">

                            /*DOCUMENT STYLES*/

@media screen and (min-width: 520px) {

bodyTable {

  border: 1px solid black;
  color: #1e1e1e;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  height: auto;
  width: 100%;
    max-width: 700px;
}

#wood-modeImageContainer {
  background-color: #1e1e1e;
  padding: 25px 0px;
}

#wood-modeImageContainer img {
  height: auto;
  width: 165px;
}

#main-nav {
  Margin-top: 0;
  padding: 20px 0px;
  font-size: 1em;
  font-weight: bold;
}

#main-nav a {
  padding: 20px 5px;
}

#showroomexample img {
  height: auto;
  width: 100%;
  Margin-bottom: -4px;
}

#blue-banner {
  background-color: #c9e0e6;
  padding: 25px 85px;
}

#blue-banner p strong {
  color: #00a2c5;
  font-size: 1.5em;
}

  #blue-banner span p {
    font-size: 1.2em;
    line-height: 1.3;
    margin-top: -8px
}

.main-content {
  padding: 12px 0;
}

.main-content h1 {
  margin-bottom: -10px;
}

.main-content p {
  padding: 10px 25px;
  line-height: 1.7;
}

.main-content img {
  height: auto;
  width: 85%;
  margin-top: 30px;
}

.main-content-double {
  border-collapse: collapse;
  border-spacing: 0;
}

.main-content-double p {
  text-align: center;
  line-height: 1.6;
}

.main-content-double td {
  vertical-align: top;
}

.main-content-double img {
  height: auto;
  width: 100%;
}

.img-pad {
  padding: 0 6px 0 1px;
}

.img-pad-two {
  padding: 0 1px 0 0;
}

.button-link {
        margin: 18px 0px 40px 0px;
}

.button-link a:link {
  color: #1e1e1e;
  text-decoration: none;
  padding: 12px;
  border: 1px solid black;
  font-weight: bold;
}

a:link {
  color: #1e1e1e;
  text-decoration: none;
}

a:visited {
  color: #1e1e1e;
  text-decoration: none;
}

#bottom-blue-banner {
  background-color: #c9e0e6;
  padding: 27px 0 15px 0;
}

#bottom-blue-banner a:link {
  color: grey;
  text-decoration: underline;
}

#bottom-blue-banner a:visited {
  color: grey;
}

#social-nav {
  background-color: #1e1e1e;
  color: white;
  font-weight: bold;
  padding: 35px 0;
}

#social-nav img {
  height: auto;
  width: 35px;
  Margin: 0 10px 10px 10px;
}

#aux-footer {
  background-color: #f4f6f5;
  color: #727273;
  font-size: .9em;
  padding: 32px 40px 25px 40px;
}

  #aux-footer p {
    margin-top: 45px;
 }

#aux-footer a:link {
  color: #727273;
}

#aux-footer a:visited {
  color: #727273;
}

#aux-footer-links a {
  padding: 0 7px;
}

#aux-footer p a {
  text-decoration: underline;
}

#footer {
  background-color: white;
  color: #727273;
  font-size: .9em;
  padding: 30px 15px;
}

}

@media screen and (max-width: 520px) {

#bodyTable {
  border: 1px solid black;
  color: #1e1e1e;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  height: auto;
  width: 100%;
}

#wood-modeImageContainer {
  background-color: #1e1e1e;
  padding: 25px 0px;
}

#wood-modeImageContainer img {
  height: auto;
  width: 165px;
}

#main-nav {
  Margin-top: 0;
  padding: 20px 0px;
  font-size: 10px;
  font-weight: bold;
}

#main-nav a {
  padding: 0 0px;
}

#showroomexample img {
  height: auto;
  width: 100%;
  Margin-bottom: -4px;
}

#blue-banner {
  background-color: #c9e0e6;
  padding: 20px 40px;
}

#blue-banner p strong {
  color: #00a2c5;
  font-size: 1em;
}

  #blue-banner span p {
    font-size: 1em;
    line-height: 1.3;
    margin-top: -4px
}

.main-content {
  padding: 12px 0;
}

.main-content h1 {
  margin-bottom: -10px;
}

.main-content p {
  padding: 10px 5px 5px 5px;
  line-height: 1.5;
}

.main-content img {
  height: auto;
  width: 85%;
  margin-top: 30px;
}

.main-content-double {
  border-collapse: collapse;
  border-spacing: 0;
}

.main-content-double p {
  text-align: center;
  line-height: 1.4;
}

.main-content-double td {
  vertical-align: top;
}

.main-content-double p strong {
  margin-bottom: -100px;
}

.main-content-double img {
  height: auto;
  width: 100%;
  margin-bottom: 5px;
}

.button-link {
    margin: 18px 0px 40px 0px;
}

  .button-link a:link {
  color: #1e1e1e;
  text-decoration: none;
  padding: 12px;
  border: 1px solid black;
  font-weight: bold;
}

a:link {
  color: #1e1e1e;
  text-decoration: none;
}

a:visited {
  color: #1e1e1e;
  text-decoration: none;
}

#bottom-blue-banner {
  background-color: #c9e0e6;
  padding: 15px 0;
}

#bottom-blue-banner a:link {
  color: grey;
  text-decoration: underline;
}

#bottom-blue-banner a:visited {
  color: grey;
}

#social-nav {
  background-color: #1e1e1e;
  color: white;
  font-weight: bold;
  padding: 35px 0;
}

#social-nav img {
  height: auto;
  width: 35px;
  Margin: 0 10px 10px 10px;
}

#aux-footer {
  background-color: #f4f6f5;
  color: #727273;
  font-size: .7em;
  padding: 25px 40px;
}

  #aux-footer p {
    margin-top: 45px;
 }

#aux-footer a:link {
  color: #727273;
}

#aux-footer a:visited {
  color: #727273;
}

#aux-footer-links a {
  padding: 0 7px;
}

#aux-footer p a {
  text-decoration: underline;
}

#footer {
  background-color: white;
  color: #727273;
  font-size: .8em;
  padding: 30px 15px;
}

}

</style>

<!--[if (lte mso 10)|(IE)]> <style> body { border: 1px solid black; color: #1e1e1e; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; height: auto; max-width: 500px; }

#wood-modeImageContainer {
  background-color: #1e1e1e;
  padding: 25px 0px;
}

#wood-modeImageContainer img {
  height: auto;
  width: 165px;
}

#main-nav {
  Margin-top: 0;
  padding: 20px 0px;
  font-weight: bold;
}

#main-nav td {
  padding: 15px;
}

#main-nav td a {
  font-size: 1.6em;
}

#showroomexample img {
  height: auto;
  width: 100%;
  Margin-bottom: -4px;
}

#blue-banner {
  background-color: #c9e0e6;
  padding: 55px 300px;
}

#blue-banner p strong {
  color: #00a2c5;
  font-size: 2.8em;
}

  #blue-banner span p {
    font-size: 2.3em;
    line-height: 1.3;
    margin-top: -10px
}

.main-content {
  padding: 25px 0;
}

.main-content h1 {
    font-size: 3em;
    margin: 20px 0 0px 0;
}

.main-content p {
  font-size: 1.8em;
  padding: 10px 65px;
  line-height: 130%;
    margin-bottom: -120px;
}

.main-content img {
  height: auto;
  width: 85%;
  margin-top: 30px;
}

.main-content-double {
  border-collapse: collapse;
  border-spacing: 0;
}

.main-content-double td p {
    font-size: 1.8em;
    text-align: center;
  line-height: 130%;
}

.main-content-double td {
  vertical-align: top;
}

.main-content-double img {
  height: auto;
  width: 100%;
  margin-bottom: 5px;
}

.main-content-pad td {
    padding: 50px 30px;
}

.button-link {
    margin: 18px 0px 70px 0px;
    font-size: 2.2em;
}

.button-link a {
    padding: 15px;
}

.button-link a:link {
  color: #1e1e1e;
  text-decoration: none;
  padding: 12px;
  border: 1px solid black;
  font-weight: bold;
}

a:link {
  color: #1e1e1e;
  text-decoration: none;
}

a:visited {
  color: #1e1e1e;
  text-decoration: none;
}

#bottom-blue-banner {
  background-color: #c9e0e6;
    font-size: 1.8em;
    padding: 65px 0;
}

#bottom-blue-banner a:link {
  color: grey;
  text-decoration: underline;
}

#bottom-blue-banner a:visited {
  color: grey;
}

#social-nav {
  background-color: #1e1e1e;
  color: white;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  padding: 65px 0;
}

#social-nav td {
  Margin: 0 20px 0 20px;
}

#aux-footer {
  background-color: #f4f6f5;
  color: #727273;
  padding: 75px 80px;
}

#aux-footer p {
    font-size: 1.4em;
    margin-top: 45px;
}

#aux-footer-links td {
    font-size: 1.5em;
    margin: 0 80px;
    padding: 0 2px 60px 2px;
}

#aux-footer a:link {
  color: #727273;
}

#aux-footer a:visited {
  color: #727273;
}

#aux-footer p a {
  text-decoration: underline;
}

#footer {
  background-color: white;
  color: #727273;
    font-size: 1.5em;
    padding: 80px 0;
}

</style> <![endif]-->

<!--[if (gte mso 11)|(IE)]> <style> body { border: 1px solid black; color: #1e1e1e; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; height: auto; max-width: 500px; }

#wood-modeImageContainer {
  background-color: #1e1e1e;
  padding: 25px 0px;
}

#wood-modeImageContainer img {
  height: auto;
  width: 165px;
}

#main-nav {
  Margin-top: 0;
  padding: 20px 0px;
  font-weight: bold;
}

#main-nav td {
  padding: 15px;
}

#main-nav td a {
  font-size: 1.6em;
}

#showroomexample img {
  height: auto;
  width: 100%;
  Margin-bottom: -4px;
}

#blue-banner {
  background-color: #c9e0e6;
  padding: 55px 300px;
}

#blue-banner p strong {
  color: #00a2c5;
  font-size: 2.8em;
}

  #blue-banner span p {
    font-size: 2.3em;
    line-height: 1.3;
    margin-top: -10px
}

.main-content {
  padding: 25px 0;
}

.main-content h1 {
    font-size: 3em;
    margin: 20px 0 0px 0;
}

.main-content p {
  font-size: 1.8em;
  padding: 10px 65px;
  line-height: 130%;
    margin-bottom: -120px;
}

.main-content img {
  height: auto;
  width: 85%;
  margin-top: 30px;
}

.main-content-double {
  border-collapse: collapse;
  border-spacing: 0;
}

.main-content-double td p {
    font-size: 1.8em;
    text-align: center;
  line-height: 130%;
}

.main-content-double td {
  vertical-align: top;
}

.main-content-double img {
  height: auto;
  width: 100%;
  margin-bottom: 5px;
}

.main-content-pad td {
    padding: 50px 30px;
}

.button-link {
    margin: 18px 0px 70px 0px;
    font-size: 2.2em;
}

.button-link a {
    padding: 15px;
}

.button-link a:link {
  color: #1e1e1e;
  text-decoration: none;
  padding: 12px;
  border: 1px solid black;
  font-weight: bold;
}

a:link {
  color: #1e1e1e;
  text-decoration: none;
}

a:visited {
  color: #1e1e1e;
  text-decoration: none;
}

#bottom-blue-banner {
  background-color: #c9e0e6;
    font-size: 1.8em;
    padding: 65px 0;
}

#bottom-blue-banner a:link {
  color: grey;
  text-decoration: underline;
}

#bottom-blue-banner a:visited {
  color: grey;
}

#social-nav {
  background-color: #1e1e1e;
  color: white;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  padding: 65px 0;
}

#social-nav td {
  Margin: 0 20px 0 20px;
}

#aux-footer {
  background-color: #f4f6f5;
  color: #727273;
  padding: 75px 80px;
}

#aux-footer p {
    font-size: 1.4em;
    margin-top: 45px;
}

#aux-footer-links td {
    font-size: 1.5em;
    margin: 0 80px;
    padding: 0 2px 60px 2px;
}

#aux-footer a:link {
  color: #727273;
}

#aux-footer a:visited {
  color: #727273;
}

#aux-footer p a {
  text-decoration: underline;
}

#footer {
  background-color: white;
  color: #727273;
    font-size: 1.5em;
    padding: 80px 0;
}

</style> <![endif]-->

</head> <body> <center> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> <tr> <td align="center" valign="top" id="bodyCell"> <!-- // BEGIN EMAIL -->

                  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="emailContainer">
                    <tr>
                        <td align="center" valign="top" id="wood-modeImageContainer">

                        <img src="http://res.cloudinary.com/dimawkoph/image/upload/v1511819145/wood-mode_logo_wht__converted__360_k5nkam.png"  alt="Wood-Mode logo" title="Wood-Mode logo">

                        </td>
                      </tr>
                    <tr>
                        <td align="center" valign="top" id="main-nav">

                          <table>
                            <td><a href="https://www.wood-mode.com/design-inspirations" target="_blank" style="color: #1e1e1e;text-decoration: none;font-weight: bold;">INSPIRATION</a></td>
                            <td><a href="https://www.wood-mode.com/gallery-by-room" target="_blank" style="color: #1e1e1e;text-decoration: none;font-weight: bold;">ROOMS</a></td>
                            <td><a href="https://www.wood-mode.com/cabinetry-options" target="_blank" style="color: #1e1e1e;text-decoration: none;font-weight: bold;">OPTIONS</a></td>
                            <td><a href="https://www.wood-mode.com/design-inspirations/video-gallery" target="_blank" style="color: #1e1e1e;text-decoration: none;font-weight: bold;">EXPERIENCE</a></td>
                            <td><a href="https://www.wood-mode.com/find-a-showroom" target="_blank" style="color: #1e1e1e;text-decoration: none;font-weight: bold;">FIND A SHOWROOM</a></td>
                          </table>

                          </td>

                        <tr>
                            <td align="center" valign="top" id="blue-banner">

                                <p><strong>Hi Jeff. Inspiration is on its way.<br /> And right in front of your eyes.</strong></p>

                                <span><p>While you're in "idea mode" click below, and do some oohing and ahhing.</p><span>

                              </td>
                          </tr>

                      </tr>
                    <tr>
                        <td align="center" valign="top" id="showroomexample">
                            <div>
                            <img src="http://res.cloudinary.com/dtrbqr2hn/image/upload/v1514306780/EdisonHeights_Island_low-res_5x7_hero_hkpvhb_with_overlay_pmbq7t.jpg" alt="Showroom Example" title="Photo of one of our showrooms" width="1300" usemap="#links">
                            <map name="links">
                              <area shape="rect" coords="400,100,475,170" href="https://www.wood-mode.com/find-a-showroom" title="Find a Showroom!" alt="Find a Showroom!" />
                              <area shape="rect" coords="450,230,545,325" href="https://www.wood-mode.com/find-a-showroom" title="Find a Showroom!" alt="Find a Showroom!" />
                              <area shape="rect" coords="240,270,325,350" href="https://www.wood-mode.com/find-a-showroom" title="Find a Showroom!" alt="Find a Showroom!" />
                            </map>
                          </div>
                          </td>
                      </tr>

                    <tr>
                        <td align="center" valign="top" rowspan="0" class="main-content">

                          <h1>Be illuminated!</h1>

                          <p>No more rummaging through drawers. No more "where the heck is it?" The perfect amount of spot lighting makes your home more functional, and shows off your fabulous taste, too.</p>

</td></tr>

<!-- <tr><td></td></tr> -->

                  <table class="main-content-double">
                    <tr>
                      <td><a href="https://www.wood-mode.com/design-inspirations/video-gallery#edison-heights" target="_blank"><img src="http://res.cloudinary.com/dtrbqr2hn/image/upload/v1513021000/Let_there_be_light_middle_left_sm_zkawys.jpg" alt="video link" title="Check out our video content" width="650"></a></td>
                      <td><a href="https://www.wood-mode.com/design-inspirations/video-gallery#drawer-glass-storage" target="_blank"><img src="http://res.cloudinary.com/dtrbqr2hn/image/upload/v1513021000/aha_there_it_is_lighting_middle_right_sm_r3mqo1.jpg" alt="video link" title="Check out our video content" width="650"></a></td>
                    </tr>

                    <tr class="main-content-pad">
                      <td><p><strong>Let there be light!</strong><br />
                          Shed the light on every minute of quality time. This Edison Heights kitchen video is filled with bright ideas.</p></td>
                      <td><p><strong>Aha! There it is!</strong><br />
                          There are no secrets in this kitchen. Integrated LED lighting makes everything easier to use.</p></td>
                    </tr>
                  </table>
                <tr>
                <td align="center" valign="top">
                  <div class="button-link"><a href="https://www.wood-mode.com/lighting" target="_blank" style="color: #1e1e1e;text-decoration: none;padding: 12px;border: 1px solid black;font-weight: bold;">INSPIRED LIGHTING</a></div>

                  <table class="main-content-double">
                    <tr>
                      <td><a href="https://www.wood-mode.com/lighting" target="_blank"><img src="http://res.cloudinary.com/dtrbqr2hn/image/upload/v1514929274/edisonshallow_wiu9w2.gif" alt="video link" title="Check out our video content" width="650"></a></td>
                      <td><a href="https://www.wood-mode.com/lighting" target="_blank"><img src="http://res.cloudinary.com/dtrbqr2hn/image/upload/v1514929275/edisondeep_wdpcho.gif" alt="video link" title="Check out our video content" width="650"></a></td>
                    </tr>

                    <tr class="main-content-pad">
                      <td><p><strong>Open up to new solutions.</strong><br />
                          No more playing "find the paring knife." Add integrated lighting in your drawers, and every corner will be usable.</p></td>
                      <td><p><strong>Shine in the kitchen.</strong><br />
                          This cabinet with deep drawer dividers features integrated lighting. So grab that cookie sheet and bake away.</p></td>
                    </tr>
                  </table>

                <tr>
                <td align="center" valign="top">
                  <div class="button-link"><a href="https://www.wood-mode.com/design-inspirations" target="_blank" style="color: #1e1e1e;text-decoration: none;padding: 12px;border: 1px solid black;font-weight: bold;">GET INSPIRED</a></div>

                          </td>
                      </tr>
                    <tr>
                        <td align="center" valign="top" id="bottom-blue-banner">

                          <img src="http://res.cloudinary.com/dimawkoph/image/upload/v1509146969/email-1/u-gota_bnwnfr.png" alt="gps image" title="gps image" width="30">

                          <p><strong>FIND A SHOWROOM <br />TO MEET YOUR DESIGNER</strong></p>

                          <p><a href="https://www.wood-mode.com/find-a-showroom" target="_blank" style="color: grey; text-decoration:underline;">LEARN MORE</a></p>

                          </td>
                      </tr>
                    <tr>
                        <td align="center" valign="top" id="social-nav">

                          <p>JOIN THE CONVERSATION</p>

                          <table>
                            <tr>
                            <td><a href="https://www.facebook.com/WOODMODE" target="_blank"><img src="http://res.cloudinary.com/dimawkoph/image/upload/v1509146968/email-1/facebook_ecp1xp.png" alt="Facebook icon" title="Facebook icon" width="80"></a></td>
                            <td><a href="https://www.instagram.com/wood_mode" target="_blank"><img src="http://res.cloudinary.com/dimawkoph/image/upload/v1509146968/email-1/instagram_jyb9s3.png" alt="Instagram icon" title="Instagram icon" width="80"></a></td>
                            <td><a href="https://twitter.com/woodmode?lang=en" target="_blank"><img src="http://res.cloudinary.com/dimawkoph/image/upload/v1509146970/email-1/twitter_y9mjky.png" alt="Twitter icon" title="Twitter icon" width="80"></a></td>
                            <td><a href="https://www.houzz.com/pro/woodmode/" target="_blank"><img src="http://res.cloudinary.com/dimawkoph/image/upload/v1509146969/email-1/n_kecd2k.png" alt="Houzz icon" title="Houzz icon" width="80"></a></td>
                            <td><a href="https://www.pinterest.com/woodmode" target="_blank"><img src="http://res.cloudinary.com/dimawkoph/image/upload/v1509149853/email-1/pinterest.png" alt="Pintrest icon" title="Pintrest icon" width="80"></a></td>
                            </tr>
                          </table>

                          </td>
                      </tr>
                    <tr>
                        <td align="center" valign="top" id="aux-footer">

                          <table id="aux-footer-links">
                            <tr>
                            <td><a href="https://www.wood-mode.com/privacy-policy" target="_blank" style="color: #727273;text-decoration: none;">Privacy Policy</a></td>
                            <td><a href="https://www.wood-mode.com/contact-us" target="_blank" style="color: #727273;text-decoration: none;">Contact Us</a></td>
                            <td><a href="http://info.wood-mode.com/acton/rif/{{Env.AccountId}}/{{Env.MsgId}}/-/{{Env.RecId}}/{{Env.SrcId}}/zout" target="_blank" style="color: #727273;text-decoration: none;">Unsubscribe</a></td>
                            </tr>
                          </table>

                          <p>Please do not reply to this email. If you need to contact Wood-Mode with questions or concerns, please <a href="https://www.wood-mode.com/contact-us" style="color: #727273;">click here</a>.</p>

                          </td>
                      </tr>
                    <tr>
                        <td align="center" valign="top" id="footer">

                          <p>&copy; 2018 Wood-Mode. All Rights Reserved.<br />

One Second Street, P.O. Box 250, Kreamer, PA 17833, USA</p>

                          </td>
                      </tr>
                  </table>
                  <!-- END EMAIL // -->
              </td>
          </tr>
      </table>
  </center>
</body>
</html>

Any help at all would be appreciated.

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi Timothy,

Do you have a final.zip file and perhaps screenshots I could review?

1 Answer

Alan Brown
Alan Brown
20,524 Points
Alan Brown
Alan Brown
20,524 Points

Hi Timothy, There’s a lot going on there. Could be worth reducing it to an example that represents one or more of the issues. HTML coding is game of compromise. If you haven't done so already start following blogs from litmus.com, campaignmonitor.com and mailchip.com. They have a wealth of cross email client support articles.

Check here (https://www.campaignmonitor.com/css/) that all the css properties are compatible with Outlook.

And here for creating buttons… https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

Step one would be to avoid using margins ;-)