CODEWITHSUNDEEP
htmlcss
datadamnation
datadamnation

Reputation: 1892

Span inside td does not override td style

I have a span tag inside a td. The td has a class with CSS to set the text-decoration to underline, while the span sets the text-decoration to none. I expect the text inside the span to not be underlined, but for some reason it is. Why?

.u {
    text-decoration: underline;
}

.no-u {
    text-decoration: none !important;
}
<table>
    <tr>
        <td class="u">
            <span class="no-u" style="text-decoration: none !important;">My Text</span>
        </td>
    </tr>
</table>

Upvotes: 6

Views: 15235

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

According to the CSS2 spec, http://www.w3.org/TR/CSS21/text.html#lining-striking-props:

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.

This means that that any text and any inline element like <b>, <em> and <span> are all wrapped in an anonymous inline box on which the text decoration is applied.

Furthermore, in the case of a child inline-element, you can apply another text decoration which allows you to have both underline and overline appearing on a span of text. In this case, the underline in painted on one anonymous inline box and the overline is painted on a second (nested) anonymous inline box.

In this example, the td element acts as the block container.

However, this does not apply to inline-blocks.

See the demo at: http://jsfiddle.net/audetwebdesign/MSUHx/

Upvotes: 0

kcsoft
kcsoft

Reputation: 2947

Cannot remove the underlined style for descendants.

http://www.w3.org/TR/CSS21/text.html#lining-striking-props

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

Upvotes: 7

Related Questions