Why does Google keep stripping my <style> tag when I try to overlay text on an image?
I want the image to be on the left with two text blocks positioned over it on the right (one higher and one lower). It looks fine visually, but when I send it to my Gmail account, the styles are removed and the text blocks appear below the image.
<style>
.container {
position: relative;
}
.text-blocka {
position: absolute;
top: 0px;
right: 10px;
left: 200px;
text-align: right;
color: #044C56;
font-size: 32px;
font-weight: bold;
font-family: Arial;
line-height: 150%;
}
.text-blockb {
position: absolute;
bottom: 20px;
right: 20px;
color: black;
padding-left: 100px;
padding-right: 20px;
text-align: right;
font-size: 24px;
line-height: 120%;
}
</style>
<div class="container">
<img src="http://image.insights.invitae.com/lib/fe4215707564067f741774/m/1/8a2d8efe-96c0-4ad1-8a7c-2f7630a37dd4.png" alt="Test" style="width:50%;">
<p class="text-blocka">Are you expecting results? <br>They will be ready soon!
</p>
<p class="text-blockb">
In the meantime, log in to <br>your portal account to:
</p>
</div>