The bottom line on underline styles.

Quick Shopping Cart (QSC) allows users to customize the underline property on a variety of page elements.  This may lead to confusion over how underlining will be applied and often it looks like the style is not being applied correctly.

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

<p style="text-decoration: underline">
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 example

<p style="text-decoration: underline">
This 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.

 

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this entry.
Comments
  • No comments exist for this entry.
Leave a comment

Submitted comments will be subject to moderation before being displayed.

 Enter the above security code (required)

 Name (required)

 Email (will not be published) (required)

Your comment is 0 characters limited to 3000 characters.