The bottom line on underline styles.
It could be expected that while setting, say, the Quick Search box to "underlined", but the Quick Search header to "no underline" would leave the header unaffected, but the box text underlined. However, this is not the case. Instead, the header text remains underlined.
E.G
This is a test. This paragraph has a style of "text-decoration: underline".
<span style="text-decoration:none">This sentence has a style of
"text-decoration:none".</span> The preceding sentence is still underlined.
</p>
This is a test. This paragraph has a style of "text-decoration: underline". This sentence has a style of "text-decoration:none". The preceding sentence is still underlined.
Another exampleThis is a test. This paragraph has a style of "text-decoration: underline".
<span style="text-decoration:overline">This sentence has a style of
"text-decoration:overline".</span> The preceding sentence is still underlined. as well as overlined.
</p>
This is a test. This paragraph has a style of "text-decoration: underline". This sentence has a style of "text-decoration:overline". The preceding sentence is still underlined. as well as overlined.
Explanation
According to the CSS Spec: (we're just the messenger's here - hold your fire ![]()
The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.
The browsers have decided to interpret this line, which I find confusing, to mean that the text-decoration (none|underline|overline) on a child (contained html element) cannot override the effect produced by its parent element. The specification says:
When specified on an inline element, it affects all the boxes generated by that element; '''for all other elements, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline children of the element, and to any block-level in-flow descendants'''.
The Bottom Line
Ultimately, this means that any underline setting on a box will override any "no-underline" setting on a element inside that box. Make sense? If not drop us a line via the comments. While we can't change the way the browsers interpret this we can sympathize with you that they do and hopefully have cleared up one more formatting faux pas that many of you have inquired about.



Comments