Databases
StackOverflow2013
Postsdbo
POMake elements overlap in cross-client HTML emails?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMake elements overlap in cross-client HTML emails?
    primarykey
    data
    text
    <p>In normal HTML for browsers, making elements overlap is easy. </p> <p>But in the dark world of HTML email, where the motto is "code like it's 1996" because Outlook uses the rendering engine from <em>MS Word</em> and Gmail removes almost everything, every method for making two elements overlap that I can think of is unsuitable due to poor client support: </p> <ul> <li><strong><code>Position</code></strong> isn't supported in many clients, so no <code>position: absolute;</code> or <code>position: relative;</code> and no <code>top</code>, <code>left</code>, <code>right</code>...</li> <li><strong>Negative margins</strong> get removed by Gmail and others. So, no negative margins.</li> <li>Using the 'overhang' from an element with <strong><code>overflow: visible;</code></strong> and a width and height that is less than the size of the element's contents doesn't work very well when <code>&lt;img&gt;</code> tags all need explicit heights and widths or where layouts, due to lack of <code>float</code> support and erratic treatment of <code>&lt;div&gt;</code>s, <a href="http://htmlemailboilerplate.com/" rel="nofollow noreferrer">by necessity need to be based on tables</a> most of the time. (that said, if anything is possible, something based on this seems like the most likely option)</li> <li>Nothing involving <strong>background images</strong> is an option as these are removed in Gmail and others</li> <li>Don't even think of trying to use CSS3 or javascript in a HTML email...</li> </ul> <p>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?</p> <p>For example, suppose you wanted to do something like this (dashed lines and backgrounds showing bounding boxes), where the large image <em>hangs down over</em> the row below rather than pushing it down...</p> <p><img src="https://i.stack.imgur.com/6IkWH.png" alt="enter image description here"></p> <p>An element (in this case, an <code>&lt;img&gt;</code>, but not necessarily an image) overlaps other elements (in this case, the row below - but not necessarily a separate row) without pushing them away. </p> <p>Is there any way to do that without major client compatibility problems?</p> <p><strong>EDIT:</strong> Just found <a href="https://stackoverflow.com/a/1829885/568458">this piece of crazy twisted genius</a>: 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.</p> <hr> <p>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...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USuser568458
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMake elements overlap in cross-client HTML emails?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMake elements overlap in cross-client HTML emails?
      1. USTUNER88
      1. VTFavorite
    3. VO
      singulars
      1. POMake elements overlap in cross-client HTML emails?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'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.
      singulars
      1. POMake elements overlap in cross-client HTML emails?
      1. USuser568458
    2. COSadly - I can confirm this trick is not working in 2007 or 2010.
      singulars
      1. POMake elements overlap in cross-client HTML emails?
      1. USSean Patrick Sutton
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload