Use VML to overlay the image over the original. Note: don't use px or pt in the height/width/top/left of the v:image.
<td><!--[if gte mso 9]><v:image src="https://lorempixel.com/600/400/" style="position:relative;top:0;left:0;width:600;height:400;z-index:2;"></v:image><![endif]--><img src="https://lorempixel.com/600/400/" alt="" width="600" height="400" border="0" style="border:0; width:100%;display:block;" /></td>
or if you need it linked:
<td><!--[if gte mso 9]><v:image src="https://lorempixel.com/600/400/" href="https://www.google.com" style="position:relative;top:0;left:0;width:600;height:400;z-index:2;"></v:image><![endif]--><a href="https://www.google.com" target="_blank"><img src="https://lorempixel.com/600/400/" alt="" width="600" height="400" border="0" style="border:0; width:100%;display:block;" /></a></td>
Dev, here's the latest that I've been using that addresses some line height and odd spacing that may occur in some email clients:
<span style="white-space:nowrap; display:inline-block;">www‌<span style="font-size:1px; line-height:4px; display:none;"> </span>.deadlink.‌<span style="font-size:1px; line-height:4px; display:none;"> </span>com.</span>
In the above, the following code is what's used in between the 'break points' to keep it from linking:
‌<span style="font-size:1px; line-height:4px; display:none;"> </span>
and then, depending on the length of the entire link, I use the nowrap/inline-block spans to keep certain text together.
Hi Sheik, I tried your suggestion but it didn't work.
Simple way to override macOS/iOS dark mode colors:
For background colors, use a one color gradient:
background-image: linear-gradient(#ffffff,#ffffff)
For text, use this along with your standard color style:
-webkit-text-fill-color: #000000 !important;
For borders, include original border style plus...
-webkit-border-before: 2px solid #000000 !important; (use for top border)
-webkit-border-after: 2px solid #000000 !important; (use for bottom border)
-webkit-border-start: 2px solid #000000 !important; (use for left border)
-webkit-border-end: 2px solid #000000 !important; (use for right border)
Hi Mark,
Just at a quick glance, there's really a lot of unnecessary/redundant code being used, and it could possibly be unclosed Outlook tags.
If you need it recoded quickly just let me know. Email: bthies@thiespublishing.com
Thanks,
Brian
I know this post is old, but there's a really simple fix. In the past we set a line-height to 0 on <tr>'s for Outlook, however, beginning with Outlook 2016, the minimum line-height became .7pt (.75pt to be exact) which reintroduced the issue.
Here's my fix. Place this in the head of the document:
<!--[if gte mso 9]>
<style>
tr { font-size:1px; line-height:0.7pt; }
</style>
<!--[if gte mso 9]>
And anywhere you encounter a blank <td> with a height that is less than 21px, place an Outlook conditional non-breaking space:
<!--[if (gte mso 9)]> <![endif]-->
If the space is narrow where you have the blank <td>, use a zero-width space instead:
<!--[if (gte mso 9)]><![endif]-->
For many emails, I've found just the code in the <head> of the document will resolve a good portion of the problems without having to use the conditional non-breaking space/zero-width space. So just test and add where necessary.
I've coded thousands of emails using this, and have had no issues.
As mentioned, VML inside of VML causes issues in Outlook, and may vary in the degree of issues depending on the version of Outlook used as well as the position in the entire document.
My suggestion would be to embed the button image in the VML background just for Outlook. You'd have three options at that point using Outlook conditional statements:
1.) Place an Outlook only transparent .png over the spot on the background image and link it. Downside is that Windows 10 Mail won't like it since it doesn't allow images over background images.
2.) Place a <div> and a <a> tag over the spot on the background image. Using a combination of font-size and line-height on the div, and non-breaking spaces in the <a> tag, you can recreate the clickable area of the button over the background image. It doesn't need to be perfect as long as it covers it.
3.) Place a table over the button image with a set height and width and link the table. Just keep in mind when linking an entire table in Outlook, that it'll add a hidden paragraph tag below the table causing extra space to appear, so make sure the button isn't near anything else below including the bottom of the background.
An alternative if you're pulling your hair out is to include the image in the background just for Outlook/W10Mail, and hide the standard image tag from those. If the image needs to be linked, use comment code, a series of div's and non-breaking spaces to create a "square" shape for the <a> tag, specifically coded for only those email clients.