Underline in different color than text for newsletter.(outlook compatible)

Question

I want to underline text not with the same color as text. I know that I can set a border in a but that does not work in Outlook.

What I did is create an 1 px table(actually a zero px table but 1 is the least height I guess) nested in another table that has my text and make its width 100% so that it gets underlined. The problem with this solution is that the line is quite thick to be accepted for a newsletter.

Anyone has faced this problem? Any workarounds?

bordering anchor tag or span would be accepted if it worked on outlook but outlook is used still a lot for reading emails.

Check my code:

<table align="center" width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-weight:bold;">
                <tr>
                    <td style="border:1px solid #000000;padding-left:10px;padding-right:10px;padding-top:5px;">
                        <a href="http://www.google.com" style="color:#000001;text-decoration:none;line-height:14px;display:block;"><span style="font-size:13px;line-height:13px;text-decoration:none;font-weight:bold;"><b>Check this out!</b></span><span style="font-size:14px;line-height:14px;color:#000000;font-weight:bold;">&nbsp;›</span></a>
                        <table width="100%" height="0" style="font-size:0px;line-height:0px">
                        <tr>
                        <td width="100%" bgcolor="#30fd3e" height="0" style="font-size:0px;line-height:0px">&nbsp;</td>
                        </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="15" align="center" style="font-size:0px;line-height:0px;">        
                    &nbsp;&nbsp;</td>
                </tr>
             </table>   
        </td>
    </tr>
</table>

and JSfiddle:

http://jsfiddle.net/tZ2X6/1/

Thanks for your time guys,

Bill.

It like a hack try the below url ====================================== https://stackoverflow.com/a/58228507/3771354 — Vinod Kumar, Oct 04 '19 at 00:54

score 0 · Answer 1 · answered Jan 21 '14 at 07:47

0

For drawing a line, table inside a table is a bad idea for me.....not sure about outlook compatibility but span is a easier solution:

demo

span.line{
  display:block; /* important because need to have full width of "td" */
  padding-bottom:2px; /* height between text and underline */
  border-bottom:1px solid green; /* mention color of your choice here*/
  width:100%;
}

answered Jan 21 '14 at 07:47

NoobEditor

15,563
19
81
112

Hey mate thanks for the fast answer. Bordering span is the same as bordering anchor in newsletters. Outlook doesnt recognise it :( – vaskort Jan 21 '14 at 07:54
@BillKortsimelidis : crap...mmmm.....so what all is permissible in outlook???? :\ – NoobEditor Jan 21 '14 at 08:11
Yeah its crap but still has the 14% of email market share so we do have to care about it :P Btw i found a solution compatible to outlook, edited my question. – vaskort Jan 21 '14 at 11:21
it says it needs 10 rep for that! Im new :) – vaskort Jan 21 '14 at 11:23
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45704/discussion-between-noobeditor-and-bill-kortsimelidis) – NoobEditor Jan 21 '14 at 11:33

score 0 · Accepted Answer · edited Jan 21 '14 at 11:32

After some time I managed to find a compatible solution for outlook.

Instead of adding bgcolor to table I added a border bottom and its as thin as I want it.

code

<table align="center" height="30" width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="bottom">
            <table align="center" border="0" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-weight:bold;border:1px solid #000000;">
                <tr>
                    <td style="padding-left:10px;padding-right:10px;padding-top:5px;">
                        <a href="http://www.google.com" style="color:#000001;text-decoration:none;line-height:14px;display:block;"><span style="font-size:13px;line-height:13px;text-decoration:none;font-weight:bold;"><b>Check this out!</b></span><span style="font-size:14px;line-height:14px;color:#000000;font-weight:bold;">&nbsp;›</span></a>
                        <table width="100%" height="0"  border="0" cellpadding="0" cellspacing="0" style="font-size:0px;line-height:0px;border-bottom:1px solid green;">
                        <tr>
                        <td width="100%" style="font-size:0pt;line-height:0pt;">&nbsp;</td>
                        </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="5" align="center" style="font-size:0pt;line-height:0pt;">        
                    &nbsp;&nbsp;</td>
                </tr>
              </table>
         </td>
    </tr>
</table>

And Jsfiddle:

working fiddle

Please note that border=0 cellpadding=0 and cellspacing=0 is vital so the borders stay close to the text and it gives the underline effect.

Underline in different color than text for newsletter.(outlook compatible)

2 Answers2