0

We are building Email content with HTML, most of the content is wrapped in anchor tags. I am trying to hide underlines of anchor tag.

I tried 'text-decoration: none;' on the anchor tag, which hides underline when opened in Outlook app on the PC. But links still appears in mobile version of Outlook (both ios and android).

<a href="my-link" style="font-family:Arial; font-weight:bold; text-decoration:none;"> Link Title </a>

These are the other alternatives i have tried to hide underlines on mobile.

  1. Add additional 'text-decoration' with '!important'

    <a href="my-link" style="font-family:Arial; font-weight:bold; text-decoration:none !important; text-decoration:none;"> Link Title </a>
  1. Wrapped anchor tag with 'span'

<style type='text/css'>
a {text-decoration: none;}
</style>
<span>
    <a href="my-link" style="font-family:Arial; font-weight:bold; text-decoration:none !important; text-decoration:none;"> Link Title </a>
</span>
  1. In the design, content is in 'td'. So added 'text-decoration: none;' to 'td' as well.

    <td style='text-decoration:none;'>
        <a href="my-link" style="font-family:Arial; font-weight:bold; text-decoration:none !important; text-decoration:none;"> Link Title </a>
    </td>

But none of these seems to work. Can someone assist me with this ?

Updated with complete code:

I am building the table structure dynamically as below:

var myLink = '';
var myContent = '';
var trStyle = '';
var tdHeadStyle = '';
var tdTextStyle = '';

if(category === 'Letter'){
myLink = "<a href='"+dynamicURL+"' style='font-family:Arial;font-weight:bold;text-decoration:none;color:#FFFFFF;'>"+dynamicTitle+"</a>"
trStyle = "background-color:#979797; height:180px; padding:10px; font-family:Arial,Helvetica, sans-serif;"
tdHeadStyle = "color:#FFFFFF; font-family:Arial !important; font-size:28px; font-weight:bold;"
tdTextStyle = "font-family:Arial !important; font-size:18px;"

tdHTML += "<tr style='"+trStyle+"'"+
"<td colspan='2'>"+
"<table border='0' cellpadding='0' cellspacing='0'>"+
"<tr style='font-family:Arial,Helvetica, sans-serif;'>"+
"<td style='"+tdHeadStyle+"'>"+myLink+"</td>"+
"</tr>"+
"</table></td></tr>";

$('#emailLetter').append("<html lang='en'><head><style type='text/css'> a {text-decoration:none;} </style></head><body><table>"+tdHTML+"</table></body></html>");
Naju
  • 19
  • 6
  • Have you tried adding the text-decoration: none to a span inside the anchor tag instead of the other way around? – C0c0b33f Sep 16 '19 at 21:00
  • ^ I don't know if this will fix anything, it's the A tag that is causing the underline. Can you post more of your code, potentially all of it? I cannot replicate this at all when I paste your original A tag. But if I remove the text-decoration property all together, the underline appears in both Android & iOS, so it seems more like another setting somewhere is causing this, potentially. –  Sep 17 '19 at 07:41
  • @Digital_Frankenstein Please find update code. – Naju Sep 17 '19 at 15:13
  • @c0c0b33f I tried the approach you recommended, but lines still show up ! – Naju Sep 17 '19 at 15:29
  • Sorry to be a pain, but you'll need to post the final HTML output. Then we can test, hopefully replicate the issue, dig through the code, identify what is missing/needs removing and then allow you to make the changes you need to, to your original code base. –  Sep 18 '19 at 08:44

0 Answers0