2

This is my code:

<table>...Some content...</table>
<table>...Another content...</table>

I want to put the second table on top of the first table. This is to be used as an email template (in some clients position and margin are not available).

Marcelo Conceição
  • 303
  • 2
  • 13
  • 3
    It may be worth telling us what problem you are trying to solve, rather than "fixing the chosen solution" (i.e. why do you need to overlay 2 tables, what is the goal?) – naththedeveloper Aug 27 '15 at 14:20
  • Because the second table start 140px from the top of the first table. The second table has 300px height. With position you can do this with position absolute and top 140px or using a negative margin of -160px. The goal is to have this layout in all email clients. – Marcelo Conceição Aug 27 '15 at 14:46

3 Answers3

3

Those are the only two options available (outside of transform, which definitely won't work if position isn't available) that will allow one element to invade another element's space. If you can't use position or margin, then you're out of luck, and you need to re-evaluate what you are trying to achieve and why. Any chance you could do this with images?

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
  • These aren't the only two options - in fact, you mentioned a third option yourself :-) In terms of designing for email, images can be a good option, provided you don't need the layer you are using an image for to have text. In addition to the issue of image-based text not being selectable or readable by assistive technologies, it's also out of your control whether a recipient will have the images loaded or blocked by default - so it's pretty important to keep text as text if you go the image route. – ryantdecker Aug 27 '15 at 14:55
3

There are always ways...not always elegant, but when you have limited options, 'works' is often all you really need. IMO, creativity is as much about solving a problem with limited options as it is thinking 'outside the box'.

Most email clients allow you to set 'height', so simply wrap the first table (the background) in a div and give that div height:0px;. the table will overflow the div, but the next element won't respect it's space because it has 0 height, and will effectively be layered in front.

http://jsfiddle.net/L0d3tnzu/

If you want the size of the tables to match exactly, you'll probably have to explicitly set heights and widths, but the fiddle above illustrates the basic concept. Hope this helps!

EDIT: Based on the additional info in the comment (the second table should only partly overlap the first table) here is an updated fiddle: https://jsfiddle.net/acq3ob6y/1/

EDIT #2: Dang. Outlook switching to the Word/Office rendering engine for HTML/CSS might be the only way possible to get WORSE than the IE version. Sigh. (Thanks to @Gortonington for the comment/clarification, though!)

Ok, then, the idea of a background image is only a problem for retina displays (if you want them to be all crisp and beautiful and retina-ie), and retina devices are going to be handling CSS in a more modern way (hopefully!), so how about this as a solution: Media Query targeting device resolution loads CSS with the double-size img and uses css background-size to constrain it: http://jsfiddle.net/tcyjo7ok

Third try is a charm? At least the list of options is growing...

ryantdecker
  • 1,754
  • 13
  • 14
  • Thanks for the response Ryan. The problem is that the content inside the first table has an img with width and height (that is needed because of retina images). – Marcelo Conceição Aug 27 '15 at 15:00
  • That shouldn't be an issue for this method, the width and height can be specified as I mentioned. If you can post your actual table code and fork the fiddle, I'm happy to take a look. A link to the way it looks outside of outlook (your desired result) would help too, if you have one. Sidenote: it seems like a very fringe case that you would have a user with outlook as the email client on a device with retina display - perhaps you could use a CSS property like background-size to target more modern (Retina) devices that outlook and others will just ignore? – ryantdecker Aug 27 '15 at 15:03
  • The final result that I want is this: https://jsfiddle.net/035wcwok/. Note that I apply a negative margin top that will break in some email clients. I'm also using this framework: http://zurb.com/ink/ – Marcelo Conceição Aug 27 '15 at 15:12
  • I've updated that by adding the wrapper div and setting it's height to reflect the partial overlap (the height of the first table -100px, so `height:200px;`) you are trying to achieve. see second fiddle link I've added to the answer. Hope that does it for you! – ryantdecker Aug 27 '15 at 15:22
  • I think I did it using your solution: https://jsfiddle.net/035wcwok/1/ Many thanks. – Marcelo Conceição Aug 27 '15 at 15:23
  • you got it - happy to help! – ryantdecker Aug 27 '15 at 15:36
  • sorry to say, div width and height is not recognized at all in some email clients, most importantly the Outlooks. If these clients are a consideration in your needs, then this technique won't work. – Gortonington Aug 27 '15 at 17:35
2

The only way to overlay two elements across email clients is through use of background images. Even this can be broken in some clients and requires a lot of conditional and reiterate code (backgrounds.cm is good resource for email bg images).

This is the only option that will display in MOST clients. Even this is still very restricted and not very agile to use (but that is true in ALL email coding). Most other techniques will only work for a couple clients and break completely in all others.

Gortonington
  • 3,557
  • 2
  • 18
  • 30