ansaurus

Question

Answer 1

+1 A:

You shouldn't have to use important or inline styles for this. Try

h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}

EDIT

In that case with tr since yeah you applied text-decoration to it, you have to take text-decoration off the same element tr not td. Otherwise do:

tr td { text-decoration: whatever }

and then when needed

<td style="text-decoration: none;"></td>

Dmitri Farkov 2009-11-18 19:51:26

I've clarified based on my example, but doing tr td applies it to all TDs, where I only need an individual one

JustLoren 2009-11-18 19:57:35

...also, this example doesn't work lol

JustLoren 2009-11-18 20:00:17

Good point, I should put the line-through on the tds

JustLoren 2009-11-18 20:02:48

I accepted this answer because it kept my style set at the TR, which is one of my design goals, where Zarembisty's answer is definitely applicable, but is set at the TD level

JustLoren 2009-11-18 20:05:47

Answer 2

+1 A:

There was a similar question a little while back and according to that answer you can't do what you're trying to accomplish.

EDIT: Given your example, why not just apply the line-through to TD elements individually

<html>
  <head>
  <style type="text/css">

    td.deleted {text-decoration:line-through}
  </style>
  </head>

  <body>
    <table>
      <tr>
        <td class="deleted">this needs to be line-throughed</td>
        <td>This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>

Marek Karbarz 2009-11-18 19:56:38

egads, I hope the answer isn't "lawl you're up a creek without a paddle"

JustLoren 2009-11-18 20:01:34

Not sure who to give the answer to, both you and Dmitri have given a lot of good info and the same correct solution -_-

JustLoren 2009-11-18 20:03:50

if in doubt go with the earlier (Dmitri wins)

Marek Karbarz 2009-11-18 20:04:57

Answer 3

A:

The line-through is applied to the H2, so you have to take it off of the H2.

<html>
  <head>
  <style type="text/css">

    h2 {text-decoration:line-through}
    h2.alt { text-decoration: none; }
    h2.alt span { border: 1px solid black; }
  </style>
  </head>

  <body>
    <h2>Line-through</h2>
    <h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
  </body>
</html>

(Viewable here: http://jsbin.com/anopa/)

The child (span) cannot affect the style of the parent (h2), which is where the style is applied. You have to alter where the style was originally applied.

Edit: updated example

Justin Johnson 2009-11-18 19:57:44

But that would defeat the purpose, since it's a child element I need it removed from, not the parent element. The parent element "needs" to have it (with current design)

JustLoren 2009-11-18 20:01:03

Answer 4

A:

One way to fix this would be to change

tr {text-decoration:line-through}

to

tr td {text-decoration:line-through}

As a result, the line-through is on the individual table cell and not the whole row. This allows you to specify a different style on a single cell.

BTW, the issue doesn't seem to exist with the example code you've given on IE5.5+. In FF3.5, however, the example behaves as you've explained. I'm not sure which is the actual correct behavior.

Brian Hasden 2009-11-18 20:04:55

Answer 5

A:

Try This

<html>
  <head>
  <style type="text/css">

    tr td {text-decoration:line-through;}
    tr td.noline { text-decoration:none;}

  </style>
  </head>

  <body>
    <table>
      <tr>
        <td>this needs to be line-throughed</td>
        <td class="noline">This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>

Notice that the style is "tr td" for both.

Philip Schlump 2009-11-18 20:16:19

ansaurus

tags:

views:

answers:

CSS Line-Through not being removed

related questions