Why is this not working?

by 9 replies
11
One of my email marketing clients has an email made up entirely of graphics as shown in the design below:



I make it in Photoshop and slice it up for Dreamweaver.
It looks fine in Dreamweaver, works fine in all browsers and almost all mail clients. But on Outlook and perhaps a few others it looks like this:



Notice the gaps. It's doing my head in. Tried putting it in tables, made sure all the padding/spacing etc is set to zero but it just won't work.

Normally the email doesn't have the middle images (cyan and blue) and it works fine.

Help
#programming #working
  • Are you using CSS or setting height/width inside table tags? You'll need to share the HTML / CSS for someone to find the problem.
    • [1] reply
    • Sounds silly, but Why you don't try to make it work initially in outlook and you move from there.
      Normally Microsoft related things are more picky and as said before share your code.
  • have you set the colspans?
    • [1] reply
    • Appreciate the replies so far!

      I'll post below this, thanks.

      I can't get it to work on outlook period. It shows up perfect when viewed in dreamweaver, in browsers, on apple stuff etc.

      My knowledge of HTML/CSS is limited.

      My code:


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>bo newsletter 6 slots</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
      #Table_01 {
      -webkit-transition: all;
      -moz-transition: all;
      -ms-transition: all;
      -o-transition: all;
      transition: all;
      }
      #Table_01:active {
      border-spacing: 0;
      }
      </style>
      </head>
      <body bgcolor="#FFFFFF">
      <!-- Save for Web Slices (bo newsletter 6 slots.psd) -->
      <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
      <tr>
      <td colspan="4" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_01.gif" width="600" height="78" alt=""/></td>
      </tr>
      <tr>
      <td colspan="4" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_02.gif" width="600" height="343" alt=""/></td>
      </tr>
      <tr>
      <td colspan="2" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_03.gif" width="300" height="205" alt=""/></td>
      <td colspan="2" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_04.gif" width="300" height="205" alt=""/></td>
      </tr>
      <tr>
      <td align="center" valign="middle"><img src="images/bo-newsletter-6-slots_05.gif" width="201" height="279" alt=""/></td>
      <td colspan="2" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_06.gif" width="200" height="279" alt=""/></td>
      <td align="center" valign="middle"><img src="images/bo-newsletter-6-slots_07.gif" width="199" height="279" alt=""/></td>
      </tr>
      <tr>
      <td>
      <img src="images/spacer.gif" width="201" height="1" alt="" /></td>
      <td>
      <img src="images/spacer.gif" width="99" height="1" alt="" /></td>
      <td>
      <img src="images/spacer.gif" width="101" height="1" alt="" /></td>
      <td>
      <img src="images/spacer.gif" width="199" height="1" alt="" /></td>
      </tr>
      </table>
      <!-- End Save for Web Slices -->
      </body>
      </html>
      • [1] reply
  • Thanks for the link, Brandon.

    Each image links to a different blog post on the clients website.
  • It's 3am on the day it NEEDED to be done, I'm up at 6am but I got it!

    Had to go a bit 1995 sure enough!

    Added the red image then <br>
    Added the green image then <br>
    Added the cyan and blue then <br>

    It looked wrong in the browser preview (gaps) but as a last gasp effort I put it into YMLP and it displays perfect for the test email!
Join the discussion

Next Topics on Trending Feed