Fallback for GANGA, Android Native, et al.

I just came across this - very nice! But as noted, it does not fare well for Gmail IMAP, Telstra Bigpond, and other clients that don't support embedded CSS like Android native.

Therefore, I found that simply adding a background colour to the text (via a table) works wonders. The text is clearly visible in all environments in that case. It just displays above the image, that's all.

I've also just centered the text--all in all a nice polished (and complete) example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head> <!-- START HEAD v2-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->

<!-- /* EMAIL CLIENT SPECIFIC FIXES */ -->
<style type="text/css">
@-ms-viewport { 
width: device-width; 
}
#outlook a {
padding:0;
}
.ReadMsgBody{
width:100%;
} 
.ExternalClass{
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
</style>

<!-- /* TEMPLATE SPECIFIC STYLES */ -->
<style type="text/css">
.faux-absolute{
  max-height:0;
  position:relative;
  opacity:0.999;
  left:0;
  margin-left:auto;
  margin-right:auto;
  width:80%;      
}
.faux-position{
  margin-top:30%;
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
body[data-outlook-cycle] .image{
  width:300px;
}
</style>

</head>
<body class="body" style="margin:0;padding:0;width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
    <table role="presentation" align="center" bgcolor="#E4E4E4" border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
            <td valign="top">
                <div class="faux-absolute">
                    <!--[if mso]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="mso-width-percent: 400; position:absolute; top:160px; left:40px;">
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div class="faux-position">
                        <table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td style="padding:20px;">
                        <p style="color:#ffffff;font-size:28px;text-align:center;margin:0;font-family:Arial,sans-serif;">Faux Absolute Position content</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </div>
                <img src="https://placekitten.com/600/400" alt="" class="image" style="width:100%;margin:0;display:block;">
            </td>
        </tr>
    </table>
</body>
</html>

M-J-Robbins / good-email-code

Fallback for GANGA, Android Native, et al. #13