CSS2 text-decoration and child elements | Comments (2)
Posted in CSS on 9th March 2009, 12:40 am by Stuart
Take the following code; will the text in the span be underlined?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Span Underline Test</title>
<style type="text/css" media="screen">
p{
text-decoration: underline;
}
p span {
text-decoration: none;
color: green;
}
</style>
</head>
<body>
<p class="test">This is underlined.<span> Is this underlined?</span></p>
</body>
</html>Chances are you’ll be thinking (like I did) that the text within the span won’t be underlined but you’d be wrong. Really – try it for yourself.
Finding the behaviour odd I dug up the specs for text-decoration.
This property describes decorations that are added to the text of an element. If the property is specified for a block-level element, it affects all inline-level descendants of the element. If it is specified for (or affects) an inline-level element, it affects all boxes generated by the element. If the element has no content or no text content (e.g., the IMG element in HTML), user agents must ignore this property.
What it doesn’t say is whether inline elements can override the behaviour, though as the spec states this isn’t an inheritable value and it would seem this is why the rule for the span has no effect.
Perhaps unsurprisingly Firebug also mis-interprets the value of the span making the assumption that text-decoration can be overriden. (Update 03/04/09: Bug raised)
The good news is ie6/7, firefox, safari and opera are all consistent in their handling of this oddity.
Rare that I’ll link to something I write over five years ago, as I normally cringe in embarrassment. But in this case:
http://usabletype.com/css/text/decoration/
@Andy: hehe nice. Clearly I’m late to the party on this one.