11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

Why is this not working?

by Scottish
9 replies
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
#working
  • Profile picture of the author IdeaBox
    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.
    {{ DiscussionBoard.errors[8442707].message }}
    • Profile picture of the author jaimegm
      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.
      {{ DiscussionBoard.errors[8444875].message }}
  • Profile picture of the author jminkler
    have you set the colspans?
    {{ DiscussionBoard.errors[8452181].message }}
    • Profile picture of the author Scottish
      Appreciate the replies so far!

      Originally Posted by IdeaBox View Post

      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.
      I'll post below this, thanks.

      Originally Posted by jaimegm View Post

      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.
      I can't get it to work on outlook period. It shows up perfect when viewed in dreamweaver, in browsers, on apple stuff etc.

      Originally Posted by jminkler View Post

      have you set the colspans?
      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>
      {{ DiscussionBoard.errors[8453500].message }}
      • Profile picture of the author Brandon Tanner
        My guess is that you are either using HTML elements that Outlook does not support (scroll down this page to see what Outlook supports), or Outlook is not rendering your tables properly (which would not surprise me in the least, because tables were never meant to be used for layout purposes in the first place). You should use div's & CSS for layout.

        But just out of curiosity... why not just make the entire email one single image? Would be a lot simpler.
        Signature

        {{ DiscussionBoard.errors[8453636].message }}
        • Profile picture of the author wayfarer
          Originally Posted by Brandon Tanner View Post

          , or Outlook is not rendering your tables properly (which would not surprise me in the least, because tables were never meant to be used for layout purposes in the first place). You should use div's & CSS for layout.
          Yeah, sounds good, but really not practical when it comes to HTML emails. The problem is, Outlook uses Microsoft Word as its html rendering engine, and is about as backwards as imaginable when it comes to standards support. The only thing I've found that works to make emails render as needed in all clients is to code like it's 1995 all over again. That means using as little CSS as possible, and using tables for everything. But not even every table element and attribute works for everything, so you'll need experience, and probably the guidance of someone who has made a lot of HTML emails, if you're going to possibly get it right.

          Originally Posted by Brandon Tanner View Post

          But just out of curiosity... why not just make the entire email one single image? Would be a lot simpler.
          Also a bad idea, since most email clients have images disabled by default. Sure, most people know to enable images to view things in a "pretty" way, but chances are less they will do so for a single image. Plus, a lot of network-level spam filters filter out emails that consist of little or no text, and one big image.
          Signature
          I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
          {{ DiscussionBoard.errors[8453830].message }}
          • Profile picture of the author Brandon Tanner
            Originally Posted by wayfarer View Post

            Yeah, sounds good, but really not practical when it comes to HTML emails. The problem is, Outlook uses Microsoft Word as its html rendering engine, and is about as backwards as imaginable when it comes to standards support. The only thing I've found that works to make emails render as needed in all clients is to code like it's 1995 all over again. That means using as little CSS as possible, and using tables for everything. But not even every table element and attribute works for everything, so you'll need experience, and probably the guidance of someone who has made a lot of HTML emails, if you're going to possibly get it right.


            Also a bad idea, since most email clients have images disabled by default. Sure, most people know to enable images to view things in a "pretty" way, but chances are less they will do so for a single image. Plus, a lot of network-level spam filters filter out emails that consist of little or no text, and one big image.
            I must admit that I haven't experimented much with HTML emails -- I always send plain text emails -- so I was just assuming that the best practices for websites also apply to HTML emails. I guess that's not the case. If HTML emails rely on tables to look right, that's pretty bad!
            Signature

            {{ DiscussionBoard.errors[8454081].message }}
  • Profile picture of the author Scottish
    Thanks for the link, Brandon.

    Each image links to a different blog post on the clients website.
    {{ DiscussionBoard.errors[8453670].message }}
  • Profile picture of the author Scottish
    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!
    {{ DiscussionBoard.errors[8453841].message }}

Trending Topics