How to prevent td that contains a link from being clickable in a table on Outlook Emails?

user_15694887 0
Viewed 76

The problem is so simple, I have a table & tr & td etc .. inside a td there is a link !

The link has an image inside it..

I get the expected result on Outlook web desktop & gmail web desktop, mobile apps of outlook & gmail, but when it comes to Outlook 2016 Desktop, I get this weird behavior !

This is the code :

<td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right; background-color: red;" width="220">
  <a class="infos__link--img" href="https://www.google.com" style="background-color: green; box-sizing: border-box; font-family: Arial, sans-serif; display: inline-block;width: 100%;">
    <img alt="more info" src="https://wvw.naef.ch/l/881863/2021-02-15/n48v/881863/1613421727UpzRLznj/green_cta.png" style="box-sizing: border-box; font-family: Arial, sans-serif; max-width: 480px;" width="200">
  </a>
</td>

As you can see, the td has a red background & the link has a green one, but when I click the red zone, I am redeirected to the link! This is not supposed to happen!

Any idea on how to prevent that ?

Any help would be much appreciated really!

outlook email javascript
1 Answers

Don't expect a silly thing like this making any sense. I've just replicated the issue and I see that the cursor doesn't change. Yet if you click on the red, it'll open the link.

This is all down to the link sitting in a full width table cell. I say full width because you didn't supply a wrapping table and setting a width on a table cell won't actually do anything when there is a standalone cell in a table. Table cells will always expand to fill the width of the table. I'm not sure how your overall code is structured, I'm just going from what you've given.

So to get around the link expanding sneakily like that, your wrapping table needs to have no width set, which will effectively set the table's width to auto and conform to the content inside of it.

Alternatively, you would wrap the link in another table with no width set. i.e.:

<td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right; background-color: red;">
  <table border="0" cellpadding="0" cellspacing="0" role="presentation">
      <tr>
          <td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right; background-color: red;">
            <a class="infos__link--img" href="https://www.google.com" style="background-color: green; box-sizing: border-box; font-family: Arial, sans-serif; display: inline-block;width: 100%;">
              <img alt="more info" src="https://wvw.naef.ch/l/881863/2021-02-15/n48v/881863/1613421727UpzRLznj/green_cta.png" style="box-sizing: border-box; font-family: Arial, sans-serif; max-width: 480px;" width="200">
            </a>
          </td>
      </tr>
  </table>
</td>

Admin1
Related