Hey amazing and intelligent buddies!
I've been working on implementing a fallback system for email clients, but despite consulting resources like this HTML Emails: fallback for mso conditional? and other insightful blogs, I still seem to be facing some issues. While the emails display correctly in Outlook, Gmail is still rendering VML which leads to two images being displayed.
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td></td>
<td rowspan=2 class="desktop">
<!--[if mso]>
<v:rect style="width:600px;height:281px;" strokecolor="none">
<v:fill type="tile" color="#363636" src="http://www.frugi.org/emailpi/assets/header.jpg" /></v:fill>
</v:rect>
<v:shape id="someName" style="position:absolute;width:600px;height:281px;">
<p style="font-family:Georgia; font-size:13px;"><h2 style="color:Red;">Text Over Image Hack!!!</h2></p>
</v:shape>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
<img src="_PT_icon_personalize_05.png" style="width:0; overflow:hidden; display:none; float:left" >
<!--[if mso]>
</div>
<![endif]-->
</td>
</tr>
<tr>
<!--[if mso]>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
<td colspan=2 ><h2 style="color:Red;max-width:480px; width:0; overflow:hidden; display:none;">Text Over Image Hack!!!</h2></td>
<!--[if mso]>
</div>
<![endif]-->
</tr>
</table>
Can anyone point out what I might be overlooking here?
For Outlook:
For Gmail: