In my current project, the sale label (png) should be overlayed by the sale percentage (text) and should sit on the top-right of the product picture.
The main issue occurs in Outlook Desktop (2019). Neither the text nor the sale label stays at the top-right as Outlook Desktop ignores "margin" attribute. My solution is inserting ghost prior to the text , and adding "left" css attribute(in vml image element) to the sale label.
The text however never goes on top of the sale label but stays right at the bottom of it, though I’ve applied "z-index" css attribute to both the image and the text. (Outlook desktop seems to render them separately)
Any suggestion would be highly appreciated.
<table border="0" align="center" cellspacing="0" cellpadding="0" style="width:173px;"><tr><td height="173" valign="top" align="center" bgcolor="#ffffff" background="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/White_chicken_egg_square.jpg/600px-White_chicken_egg_square.jpg" style="background-repeat:no-repeat;background-position: center;background-size:contain;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0; width:129pt; height:129pt;"><v:fill type="frame" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/White_chicken_egg_square.jpg/600px-White_chicken_egg_square.jpg" /><![endif]--><div><div align="right"><table align="right" width="42" height="60" border="0" cellpadding="0" cellspacing="0" style="max-width:42px;margin: 0px 3px 0px 0px;"><tr><td width="42" valign="top" align="center" background="https://img.udn.com/art/udnshopping_edm/images/onsale-label%20copy.png" style="background-repeat:no-repeat;background-position: center;background-size:contain;"><!--[if gte mso 9]><v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="behavior: url(#default#VML); display: inline-block; position: absolute; width: 32pt; height: 45pt; top: 0pt; left: 95pt; border: 0; z-index: 1;" src="https://img.udn.com/art/udnshopping_edm/images/onsale-label%20copy.png" /><table border="0" cellspacing="0" cellpadding="0" style="width: 129pt; display: block; position: absolute; z-index: 5;"><tbody><tr><td valign="top" style="width:66pt;height:45pt;"></td><td valign="top" style="width:32pt;height:45pt;"><![endif]--><table width="42" border="0" cellspacing="0" cellpadding="0" style="width: 42px;"><tr><td height="60" align="center" valign="middle" style="height:60px; color:#ffffff; text-align: center;font-size: 14px; line-height: 16px;"><br>5%<br>off</td></tr></table><!--[if gte mso 9]></td></tr></tbody></table><![endif]--></td></tr></table></div></div><!--[if gte mso 9]></v:rect><![endif]--></td></tr><tr><td width="173" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#fcfcfc" style="padding:5px; font-size:12px; text-align:center;line-height:1.5; height:60px; max-height:60px; overflow:hidden;" valign="top"><span style="color:#4f4f4f;">Product Name Goes Here Product Name Goes Here Product Name Goes Here</span></td></tr><tr><td width="173" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#fff8d9" style="padding:5px; font-size:17px;letter-spacing:0.5px;font-weight: bold; text-align:center;line-height:1; height:14px; max-height:14px; overflow:hidden;" valign="top"><span style="color:#fca147;">$8888</span></td></tr></table>