Create a Discussion

Unwanted spacing above <a> links in Outlook (all Win versions) and Windows 10

Steven Till posted 2019-06-04 15:41:52

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:
Click Here for Image Screenshot

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:

Click Here for CodePen Example

Rémi Parmentier replied 2019-06-04 16:01:13

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:

<a href="http://example.com" style="display:block;text-decoration:none;">
    <p id="COPY-normal">
        LEFT (scale)
    </p>
</a>

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:

<p id="COPY-normal">
    <a href="http://example.com" style="display:block;text-decoration:none;">
        LEFT (scale)
    </a>
</p>

Let me know if you have any other question.

Reply to Rémi Parmentier

Steven Till replied 2019-06-04 16:24:53

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!

Unwanted spacing above <a> links in Outlook (all Win versions) and Windows 10

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password