0

I am building content for an email and need to have a table that contains only images be responsive and resize accordingly. The code works well in Firefox but Chrome, Iphone 6 email client and others add whitespace in the table row/cell during the resize. If I set the height on the images to 100% there is no whitespace on resize but aspect ratio is poor on resize. Any ideas on how to fix?

<table border='0' cellpadding='0' cellspacing='0' width='100%' style='border-collapse:collapse;'>
  <tr>
    <td align='center'>
      <table border='0' cellpadding='0' cellspacing='0' style='border-collapse:collapse;'>
        <tr>
          <td colspan='3'><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/__top.png' style='display:block; width:100%;'></td>
        </tr>
        <tr>
          <td rowspan='2'><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/middle_left.png' style='display:block; width:100%;'></td>
          <td>
            <table border='0' cellpadding='0' cellspacing='0' style='border-collapse:collapse;'>
              <tr>
                <td colspan=2><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/question1_a.png' style='display:block; width:100%; '></td>
              </tr>
              <tr>
                <td><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/answer1_a.png' style='display:block; width:100%; '></td>
                <td><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/answer2_a.png' style='display:block; width:100%;'></td>
              </tr>
              <tr>
                <td colspan=2><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/answer3_a.png' style='display:block; width:100%;'></td>
              </tr>
            </table>
          </td>
          <td  rowspan='2'><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/middle_right.png' style='display:block; width:100%;'></td>
        </tr>
        <tr>
          <td><img src='http://image.s6.exacttarget.com/lib/fe9312727666017870/m/1/bottom.png' style='display:block; width:100%;'></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Kaye Stacks
  • 40
  • 4
brpsmith
  • 1
  • 3
    This problem is caused by having it being made up of multiple images. It would be much better to have a div with the image as the background, a button with ::before and ::after classes to get the triangles, a div with the blue color in a rbga format so you have the same transparency, and the text and buttons in there. – Keith Anderson Feb 23 '16 at 02:57
  • the issue is that this is constructed of just images. Not a good approach to HTML. use CSS in combination with HTML like @KeithAnderson said. Tables are NOT the best solution for this. `
    `s are the better solution. or `
    `s (a good alternative for `
    `s in HTML5)
     –  Feb 23 '16 at 03:09
  • do you even read the question? ***I am building content for an email*** so yes `table`s are important and needed here – dippas Feb 23 '16 at 03:11
  • as far as `::before` or `::after` pseudo-elements go (@KeithAnderson) W3Schools has a good article on them: http://www.w3schools.com/css/css_pseudo_elements.asp –  Feb 23 '16 at 03:12
  • @dippas you should still be able to use div tags in an email, and they should still do a much better job. –  Feb 23 '16 at 03:13
  • @DaMaxContent take a look at this [**Should you use DIV tags in HTML emails?**](https://www.campaignmonitor.com/blog/email-marketing/2011/05/div-tags-in-html-email-newsletters/) – dippas Feb 23 '16 at 03:15
  • 1
    True, but for your usage, a table is a terrible idea. The way you have it laid out is what is the problem. A different layout may do good for a table, but that layout is very ineffective. If you can not get away from a table, check this question out: http://stackoverflow.com/questions/8015515/background-image-css-inside-an-html-email-gmail-does-not-support –  Feb 23 '16 at 03:19
  • 1
    also, for lengthy questions use a snippet please or a jsfiddle. –  Feb 23 '16 at 03:22
  • I think max has given you the best answer you will get, it may seem frustrating, but that is just how it is. Whether you use a table or not, the background image still should be one whole image. – Keith Anderson Feb 23 '16 at 03:25
  • Thanks for all of the feedback. A table layout is best for email client support as divs don't work well in my experience - but open to approaches that work consistently across clients. I will checkout the referenced items. A background image does not work due to email client support - there are workarounds but Microsoft outlook web access is the biggest offender of backgrounds in email with no support and no way to fail gracefully. Also - I need the output to be all images, not ideal from an HTML efficiency perspective but required for design requirements. – brpsmith Feb 23 '16 at 21:34

0 Answers0