1

The two images show a problem I'm having with an absolute DIV -not- positioning properly within a relative DIV.

The second image is the email attachment which looks as intended as email attachment in various flavours of Outlook, Eudora and desktop GMail and even Safari. It also works fine on iPhone (Safari) email attachments.

However the first image shows how on an Android phone GMail, when you open this as an email, it appears messed up as shown . The absolute positioned DIV inside the relative parent DIV is behaving as if it is 'relative'.

All I've seen here is that one needs to put an absolute positioned DIV within a relatively positioned DIV. But that is NOT helping. Ideas?

The relevant code:

<style>
.header_wrapper {
    position: relative;
    margin: 0;
    padding: 0;
}

 .parkbg { 
    position: relative;
    top: 0; 
    margin: 0;
    padding: 0;
    outline: none;
 }

 .parkbg img { 
     width: 100%; 
   }

 .parkbackground {
   padding: 0;
   margin: 0;
   top: 0;
   padding: 0;
   height: 100%;
   position: absolute;
   z-index: 100;
   width: 100%;
   }
</style>

          <div class="header_wrapper">
            <div class="parkbg"><img src="https://example.com/images/parkbench.jpg'"/></div>
            <div class="parkbackground" width="100%">
                <div style="width: 300px; float: left; margin: 0; padding: 0 0 0 12px;"><p id="logoHeader"><a style="text-decoration: none; outline: none; color: #cfc" href="http://example.com">jch</span><span style="color: #fff; text-decoration: underline;">webdev</span></a></p>
                <p class="viewinbrowser">Message mangled? <a href="https://example.com/a18/">Click here to view in your browser</a>.</p>
                </div>  
                <div style="width: 286px; height: 100%; float: left;"> <p style="text-align: right; padding: 8px 12px 0px 0; margin: 0; color: #fff;" >
                   <a id="header_phone" href="tel:123456789">(123) 123-4567</a></p>
                    <div class="index">
                      <h3>NEWSLETTER</h3>
                      <p>April 2018</p>                  
                      <hr />    
                      <ul>
                        <li style=""><a href="#2">SPRING CLEANING</a>
                          <p><span>Every Site gets cluttered.</span> And today it matters, both for your security and for your search presence. You need to conduct regular inventories of your site to make sure everything is where it's supposed to be and to get rid of what's not supposed to be there.</p></li>
                        <li style="">                            </li>                          
                       </ul>
                </div>       
            </div>
          </div>

enter image description here

enter image description here

jchwebdev
  • 5,034
  • 5
  • 21
  • 30

1 Answers1

2

Sadly there is no absolute positioning in email development. Z-Index is not going to work in most email clients. There's issues with padding and margin as well. You can't use negative margins. margin with a lowercase m does not work in Outlook, but it works with a capital M.

You could do a background image to get your positioning, but that requires a special workaround for Outlook, which does not work with background, but does work with vml. This is an example:

<div style="background-color:#ff0000; width:600px;">
  <!--[if gte mso 9]><!-- -->
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
  <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
  </v:background>
  <![endif]-->
  <table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
        <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
          Background Image with text on top
        </h1>
      </td>
  </tr>
</table>
</div>

I understand that an answer telling you NO NO NO is not very helpful, but I am not sure where to start with your current approach, but wanted to help clarify why you're having difficulties. Email development is not really web development.

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28
  • It is helpful to know what is possible, so thank you. There is soooooooo much contrary info 'out there'. I thought this was a simple thing. But now that I actually start to look at all the dozens of HTML emails I receive daily, a pattern has emerged: NONE of them seem to use a background image overlaid with text as I'm trying to do. So there must be a good reason. Thanks again. – jchwebdev Apr 13 '18 at 21:02
  • PS... all I'm trying to do is get some text on top of a background image. I have tried several techniques (background img, side-by side divs with absolute positioning, etc.) NONE have worked in all the phones/tablets I've tried. If you have a reliable solution please let me know. – jchwebdev Apr 13 '18 at 21:05
  • @jchwebdev try the fiddle I posted for text over images. It works: https://jsfiddle.net/wallyglenn/7zLaLrfx/ – gwally Apr 13 '18 at 21:30