Problem with text-decoration in cascaded <li>

setesteve · January 6th, 2005, 10:55 AM

The following HTML page produces different results in IE6 and Mozilla Firefox 1.0. In IE, the <li> tags with the text "this line should not be underlined" are in fact, not underlined. In Firefox, they are underlined. Firefox appears to be inheriting the text decoration from the parent <li>, and the only way to turn off underlining in the child <li> is to turn if off in the parent.

Note that setting text-decoration to another value such as line-through produces an <li> with both decorations (i.e. underlined strike-through text). Also, this inheritance only pertains to text-decoration; the margin-top and font-weight properties are displayed correctly.

Finally, even changing the text-decoration property inline with a style attribute does not display the <li> correctly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <style type="text/css" media="all">
         ul.titledList {list-style:none;}
         ul.titledList li {margin-top:50px;font-weight:bold;text-decoration:underline;}
         ul.titledList ul {list-style:disc;}
         ul.titledList li ul li {margin-top:5px;font-weight:normal;text-decoration:none;}
      </style>
   </head>

   <body>
      <ul class="titledList">
         <li>This Text Should Be Underlined
            [list]
               <li>this line should not be underlined</li>
               <li>this line should not be underlined</li>
               <li>this line should not be underlined</li>
            </ul>
         </li>
         <li>This Text Should Be Underlined
            [list]
               <li style="text-decoration:none;">this line should not be underlined</li>
               <li style="text-decoration:line-through;">this line should not be underlined</li>
               <li style="margin-top:20px;font-weight:bold;">this line should not be underlined</li>
            </ul>
         </li>
      </ul>
   </body>
</html>

Is this a browser problem (perhaps related to the STRICT DTD), or am I missing something in the CSS?

richard.york · January 6th, 2005, 11:21 AM

Right, that appears to be the expected behavior.

See excerpt from W3C spec:

Quote:

quote:Quoted from: http://www.w3.org/TR/CSS2/text.html#...striking-props

This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration (e.g., they should all be underlined). The color of decorations should remain the same even if descendant elements have different 'color' values.

I haven't experimented much with this myself, but in order to acheive the desired effect without the above happening I would suggest wrapping each snippet of text in inline containers. e.g. <span> elements.

Then modify your style sheet accordingly.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

setesteve · January 6th, 2005, 01:03 PM

When I read that quote and the rest of the text in section 16.3.1 (text-decoration), I interpret that to mean setting the underline in the parent <li> element will cause child <li> elements to have the same decoration. However, it does not prohibit resetting the decoration to something else in a child element. This is how IE6 works, if you eliminate the text-decoration:none from the child <li> in the stylesheet,

   ul.titledList li {margin-top:50px;font-weight:bold;text-decoration:underline;}
   ul.titledList li ul li {margin-top:5px;font-weight:normal;}

the underline propogates to the children. But you have the ability to set it back to none if desired, either in the stylesheet or by using a style attribute in individual elements.

Unless I misunderstand your comment about <span> elements, that doesn't seem to work either. Adding the line

   ul.titledList li ul li span {text-decoration:none;}

to the stylesheet and adding a <span> to individual <li> elements

   <li><span>this line should not be underlined</span></li>

still produces an underlined child element.

Firefox is be consistent in the way it handles the text-decoration property, but I don't agree with its interpretation of the spec. It's basically saying you can't use a text decoration at an arbitrary level in a multi-tiered list without everything underneath it having that decoration applied (i.e. you can turn it on, but you can't turn it off).

For what it's worth, Amaya 8.7 works the same way IE6 does.

setesteve · January 6th, 2005, 02:07 PM

Maybe I did misunderstand the <span> comment. Instead of using a <span> to turn off the text-decoration in child <li> elements, you can use it to turn on the text-decoration in the parent <li>. That way, the parent <li> is not affected and can't propogate the change. Works fine in all 3 browsers mentioned in the preceding discussion.

richard.york · January 6th, 2005, 04:50 PM

Right, that was what I intended to convey. You're sandboxing it's affects by applying it only to the inline element.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

joefawcett · January 7th, 2005, 04:30 AM

As a side issue whast does the spec mean when it says that something is not inherited but descendants take on the characteristics of the parent?

Isn't that what inherited means?

--

Joe (Microsoft MVP - XML)

richard.york · January 7th, 2005, 10:53 AM

I thought so too at first.

That's because it doesn't follow the definition of inheritance as it applies in all other situations. In all other situations the child takes on *all* of the characteristics of the parent. If the same property is specified for the parent explictly and the child explicitly with two different values, these are usually going to result in two different styles. In the case of text-decoration, the value for the parent is merged with the value for the child. You can see this in the following testcase:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            ul#grandparent {
                text-decoration: underline;
            }
            ul#parent {
                text-decoration: line-through;
                color: green;
            }
            ul#child {
                text-decoration: overline;
                color: red;
            }
        </style>
    </head>
    <body>
        <ul id='grandparent'>
            <li>
                This text is underlined.
                <ul id='parent'>
                    <li>
                        This text is underlined and striken.
                        <ul id='child'>
                            <li>
                                This text is underlined, striken and overlined.
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>

There is also the unique condition that the color of the decoration does not change.

So eventhough it is technically inheritance, it isn't the same inheritance as we're used to seeing in CSS.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design