19

In normal HTML for browsers, making elements overlap is easy.

But in the dark world of HTML email, where the motto is "code like it's 1996" because Outlook uses the rendering engine from MS Word and Gmail removes almost everything, every method for making two elements overlap that I can think of is unsuitable due to poor client support:

  • Position isn't supported in many clients, so no position: absolute; or position: relative; and no top, left, right...
  • Negative margins get removed by Gmail and others. So, no negative margins.
  • Using the 'overhang' from an element with overflow: visible; and a width and height that is less than the size of the element's contents doesn't work very well when <img> tags all need explicit heights and widths or where layouts, due to lack of float support and erratic treatment of <div>s, by necessity need to be based on tables most of the time. (that said, if anything is possible, something based on this seems like the most likely option)
  • Nothing involving background images is an option as these are removed in Gmail and others
  • Don't even think of trying to use CSS3 or javascript in a HTML email...

Is there anything that can be reliably used to create overlap between elements in cross-client HTML emails? And/or any way to make an element extend out from its bounding box without affecting the positioning of its neighbours?

For example, suppose you wanted to do something like this (dashed lines and backgrounds showing bounding boxes), where the large image hangs down over the row below rather than pushing it down...

enter image description here

An element (in this case, an <img>, but not necessarily an image) overlaps other elements (in this case, the row below - but not necessarily a separate row) without pushing them away.

Is there any way to do that without major client compatibility problems?

EDIT: Just found this piece of crazy twisted genius: making table cells overlap using colspans and rowspans. This could be an option, not yet thoroughly tested its cross-client rendering though, any info from prior experience or research is welcome.

Assume we're making a newsletter where we can't predict what clients our customers will be using, so we have to support popular mainstream email clients: Outlook, Gmail, Yahoo, Hotmail, Thunderbird, iOS/OSX, Android...

Community
  • 1
  • 1
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
  • I've heard that apparently the overlapping table cells trick is not working with Microsoft Outlook 2007 and higher (versions using the Word rendering engine) - can't test at the moment, confirmation or refutation would be appreciated. – user56reinstatemonica8 Feb 20 '13 at 16:56
  • 1
    Sadly - I can confirm this trick is not working in 2007 or 2010. – Sean Patrick Sutton Aug 01 '13 at 14:14
  • Background images work in 99% of email clients if use backgrounds.cm technique. The best is table slicing with imgs and live content areas but this can explode especially with images blocked – Gortonington Jun 19 '15 at 18:22

2 Answers2

3

A little late to the conversation, but this similar answer is the technique you are looking for.

Your example is a lot more complex however as you are spanning over both rows and columns. I'm up for the challenge:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr><!-- This row is needed to enforce col widths in Outlook -->
    <td width="100">
    </td>
    <td width="300">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="400" valign="top" height="80" colspan="2" bgcolor="#bbbbbb">
      Title Here
    </td>
    <td width="200" valign="top" height="120" rowspan="2" bgcolor="#dddddd">
      Image Here
    </td>
  </tr>
  <tr>
    <td width="100" valign="top" height="540" rowspan="2" bgcolor="#cccccc">
      Column<br>...<br>...<br>...
    </td>
    <td width="300" valign="top" height="40" bgcolor="#aaaaaa">
      Heading 1
    </td>
  </tr>
  <tr>
    <td width="500" valign="top" height="500" colspan="2" bgcolor="#eeeeee">
      Content<br>...<br>...<br>...
    </td>
  </tr>
</table>

This is as close as you'll get. You can't make non-rectangles, so the top Header in the body has to be in it's own cell.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
1

The genius' solution worked in most situation. But for outlook 2007, 2010 and 2013, it didn't work for the rowspan will be deleted.

user2322774
  • 11
  • 1
  • Outlook doesn't delete them, it just doesn't respect their widths if you span in the first row. See answer below or [this link](http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122) for more info – John Mar 21 '14 at 18:06