Can't I override text-decoration to none?

Question

Possible Duplicate:
How do I get this CSS text-decoration override to work?

Chrome and Firefox are conspiring to thwart my attempt to have a td with the line-through text-decoration, sometimes disabled by a span, like so:

<style type="text/css">
tr.st td {
  text-decoration: line-through;
}

tr.st td span.unstrike{
  text-decoration: none;
  background:yellow;
}

tr.st td span#unstrike-id{
  text-decoration: none;
  background:yellow;
}

tr.st td span.unstrike-important{
  text-decoration: none ! important;
  background:yellow;
}

</style>


<table  border>
    <tbody>
      <tr>
        <td>normal</td>
      </tr>
      <tr class="st">
        <td>struck out</td>
      </tr>

      <tr class="st">
        <td>struck out <span class="unstrike">unstrike class: shouldn't I be normal?</span></td>
      </tr>

      <tr class="st">
        <td>struck out <span id="unstrike-id">unstrike-id identifier.  Shouldn't I be normal?</span></td>
      </tr>

      <tr class="st">
        <td>struck out <span class="unstrike-important">unstrike-important: shouldn't I  be even more normal?</span></td>
      </tr>
    </tbody>
  </table>

I'm squinting at the spec and I don't get it.

Special case for text-deocration? What gives?

demo here

Wow, that's interesting, it would seem the `text-decoration` is being applied to the whole TD's contents and ignoring whatever is underneath it. Never seen that. — Rudi Visser, Jun 18 '12 at 07:21
See this answer: http://stackoverflow.com/a/1261974/698179 - It may well be better to put a `span` in all of your `td`s, and apply styling individually as a child element. — Rudi Visser, Jun 18 '12 at 07:22
Yes, I see it now, Although I think this is the best precedent: http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work/1823388#1823388 — djsadinoff, Jun 18 '12 at 07:43

score 0 · Answer 1 · answered Jun 18 '12 at 07:39

0

If you have a specific sequence to which line-decoration to use the property, you can use :nth-child()

Or try to add line-decoration to span, not to td. Look my example: jsfiddle

answered Jun 18 '12 at 07:39

Xella

1,283
10
10

score 0 · Answer 2 · answered Jun 18 '12 at 07:42

0

The strike-through is applied to the table cell, rather than it's contents. A similar case would be applying a border to the <td>. Removing the border on the span will not stop the border on the td shining through.

You could add an opaque background to the span.

Adding:

position: relative;
display: inline-block;
top: 0px;

seems to fix it.

answered Jun 18 '12 at 07:42

Eric

95,302
53
242
374

Mostly I was looking for some explanation from the spec why this would be so. There are lots of fixes. Yours is definitely interesting. I would, however, hesitate to use it without a deeper understanding of why it works, and why inline-block works but an ordinary block (say a div) doesn't. – djsadinoff Jun 18 '12 at 08:05

score -1 · Answer 3 · edited May 23 '17 at 12:21

-1

Looks like this is a dupe of several questions, in particular:

How do I get this CSS text-decoration override to work?

In short, the (to me very fuzzy) language at http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration says "no override".

Moderators/editors, please close me as a dupe.

edited May 23 '17 at 12:21

Community

1
1

answered Jun 18 '12 at 07:48

djsadinoff

5,519
6
33
40

Can't I override text-decoration to none?

3 Answers3