
0
Unwanted spacing above <a> links in Outlook (all Win versions) and Windows 10
Hi everyone, I've been experimenting with Rémi Parmentier's "Fab 4" technique for calculating percentage-based column widths without the need for media queries. So far, I've been having a lot of success with it, however, I'm now encountering unwanted spacing above and sometimes below my <a> links which wrap my content.
This has been driving me crazy for two days now. Any assistance or insight would be GREATLY appreciated!
Here is a screenshot of what I'm seeing happen:
The spacing above the live-text is being caused by the <a> somehow.
I've set up a code pen with a simple 2-column table here:
Hi Steven ! Nice to see you've been experimenting with my technique. I gave a quick look at your code, and I think the problem comes from this:
While wrapping any content in an
<a>
element is perfectly valid in HTML5, some email clients don't support this. Especially Outlook and it's word rendering engine. So I would strongly advise against this, and use a single<a>
at the text level only. Like this:Let me know if you have any other question.
Hi Rémi, thanks for replying!
Yeah, I figured that your solution was going to be the answer. LOL. I know that the Word engine throws a big kink in email rendering, but I was hoping I could get the link wrapper to work, as this creates a ton of links within a single email (especially in retail emails that may have several product items. I suppose this solution will have to do.
I really appreciate your insight!
Cheers!