Ghost underline even text-decoration is none

Question

I know this top has been discussed a lot and I don't really see any similar case from my search. Maybe I'm wrong. I feel like this is incredible so I'm wondering if anyone can shed me some light.

I've got below two tables one nest the other. One has set with underline and one hasn't. See the code below.　From my understanding, even if the underline style on the outer table is effective (which should be because there's no text), it should display a line underneath the nested table (note that table has padding inside). But the line looks like being set on the nested table...

<table width="640" align="center" bgcolor="#000001">
  <tr>
    <td style="color:#ff0000; text-decoration:underline;">
      <table width="100%">
        <tr>
          <td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
            <a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The crazy thing is if you add a large font-size on the outer table. You'll get the below result.

<table width="640" align="center" bgcolor="#000001">
  <tr>
    <td style="color:#ff0000; text-decoration:underline; font-size: 100px;">
      <table width="100%">
        <tr>
          <td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
            <a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

I had the code on CodePen if you think that's easier for you.

BTW, the ghost underline is RED in Firefox but WHITE in Chrome. That also confuses me, if you have any idea on that too. Please tell me.

Any idea?

text decoration is for ... well text, try setting borders to none — Dev Man, Jan 20 '20 at 14:15
related to understand what is happening: https://stackoverflow.com/a/59028672/8620333 — Temani Afif, Jan 20 '20 at 14:17
if you make the nested table `inline-table` you will fix your issue (https://stackoverflow.com/a/54816896/8620333) — Temani Afif, Jan 20 '20 at 14:18
https://www.sitepoint.com/text-decoration-css-property/ You can't undo text-decoration of the ancestor. — Roberto Zvjerković, Jan 20 '20 at 14:19

DumbCoder7 · Answer 1 · 2020-01-20T15:10:53.610

The problem is the parent td tag. Try the following :

<table width="640" align="center" bgcolor="#000001">
  <tr>
    <td style="color:#ff0000; font-size: 100px;">    <!--this line was the problem -->
      <table width="100%">
        <tr>
          <td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
            <a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

I understand that this may not be the expected behavior, had it been a hierarchy of div tags, but tables are known to mess with CSS styles.

Hope this helps!

I think you missed a closing `` tag. – user12711697 Jan 20 '20 at 14:46 — user12711697, Jan 20 '20 at 14:46

score 0 · Accepted Answer · answered Feb 03 '20 at 04:35

Temani got the point. And those two links(1, 2) in the comments explain the issue well. I didn't realize it's not just wrong with underline but with the text-decoration itself.

It can be explained by a simple code like below. That the text-decoration will "spread" into any inline children if it's not floated, positioned, inline-block or inline-table.

<div style="color:#ff0000; text-decoration:underline;font-size: 100px; ">
  <div>
    <a href="https://google.com" style="color:#000000; text-decoration:none;"
      >Text here</a
    > aaa
  </div>
</div>

From the reference:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). But, in CSS 2.1, it is undefined whether the decoration propagates into block-level tables. For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

So for my case, I can set inline-block on the <a> tag or set inline-table on the nested <table>.

Ghost underline even text-decoration is none

2 Answers2