Email/HTML Table help

Discussion in 'Web Design and Development' started by SwiftLives, Sep 28, 2011.

  1. SwiftLives macrumors 65816

    SwiftLives

    Joined:
    Dec 7, 2001
    Location:
    Charleston, SC
    #1
    I'm currently programming an email marketing piece. It uses rudimentary HTML and tables. The header and footer images are split into parts - three rows, since Constant Contact likes to keep them under 70k.

    I've previewed it in Safari, Firefox, and Chrome (all on the Mac) - it looks seamless.

    The problem I'm running into is that my boss uses Outlook on Windows. For some reason, the table is rendering with spaces between each image. I'm also assuming most people who receive this will be using Outlook.

    I've checked - cellspacing and cellpadding are all set to 0. I've clearly specified table height and data cell height. Even image height.

    First off, has anyone run into this issue before?
    Secondly, does anyone know of someplace I can check/verify the code?

    I appreciate your help. This is stumping me.

    I should probably add that I am not much of a programmer...
     
  2. aarond12 macrumors 65816

    aarond12

    Joined:
    May 20, 2002
    Location:
    Dallas, TX USA
    #2
    For not being a programmer, it sounds like you have a good grasp on things.

    Try putting the images back-to-back horizontally, not using a table. For the end of lines, use the <br/> tag something like this:

    Code:
    <img src="image1.png"/><img src="image2.png"/><br/>
    <img src="image3.png"/><img src="image4.png"/>
    
     
  3. Hansr macrumors 6502a

    Joined:
    Apr 1, 2007
    #3
    Image border = 0? Posting the markup would make it easier. Also thought about using inline css instead for this? Tables should only be used for tabular data.

    HTML is markup not programming.
     
  4. skyton macrumors 6502

    Joined:
    Jan 3, 2005
    Location:
    england
    #4
    Try adding a
    Code:
    style="display:block;"
    style to each of the images.

    Some email clients treat images the same way as text, so they allow extra space below the bottom line for descending characters.

    This fix definitely fixes issues in Hotmail in Firefox - not sure about Outlook though.

    It is good practice to use the display block trick on every image in your email anyway to prevent other issues,

    ----------

    Unfortunately due to the way that some email clients render HTML emails, tables are the only option to get half decent layouts, even if it is like coding from the dark ages!
     
  5. dkotter macrumors member

    Joined:
    Jul 30, 2009
    #5
    I have used a service called Email on Acid before in the past, and it works well. They have a free version of if, that gives you Outlook 03 I believe, as well as a few others. Or you can pay to get testing in more.
     
  6. nomade macrumors member

    nomade

    Joined:
    Dec 2, 2006
    #6
    Make sure to add <table border="0" cellpadding="0" cellspacing="0"> to your table markup
    Don't leave any cell empty, add a <br/> in your empty cell

    Those are Explorer/Outlook good practice

    Hope this could help
     
  7. skyton macrumors 6502

    Joined:
    Jan 3, 2005
    Location:
    england
    #7
    That looks useful - will check it out
     

Share This Page