PDA

View Full Version : Having problem with override of text-decoration



kneele00
Aug 17th, 2007, 10:50 PM
Why doesn't this work? I can do these kind of overrides with other attributes but underline cannot be overridden for some reason. TIA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.underline {text-decoration:underline;}
.nounderline {text-decoration:none;}
</style>
</head>
<body>

<div class="underline">
underline me
<div class="nounderline">
don't underline me
</div>
</div>

</body>
</html>

Jutlander
Aug 17th, 2007, 11:08 PM
Not sure, but I don't believe it can be put on a class...

Arbitrator
Aug 17th, 2007, 11:49 PM
Why doesn't this work? I can do these kind of overrides with other attributes but underline cannot be overridden for some reason.The text-decoration property is not inherited, as you seem to think. The text decoration of the inner text actually belongs to the outer element. You canít override it; the most that you can do is cover it up with another text decoration of a color matching the background color.

lithriel
Aug 18th, 2007, 07:21 AM
Try putting spans with the class "underline" instead of using divs. Worked for me.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.underline {text-decoration:underline;}
.nounderline {text-decoration:none;}
</style>
</head>
<body>

<div>
<span class="underline">underline me</span>
<div >
<span class="nounderline">don't underline me</span>
</div>
</div>

</body>
</html>

kneele00
Aug 20th, 2007, 09:18 PM
Thanks for the help! This will help me build a clean solution for my nested divs, and work around the non-override of text-decoration.

-Ken