PDA

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

kneele00
08-17-2007, 09: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
08-17-2007, 10:08 PM
Not sure, but I don't believe it can be put on a class...
Arbitrator
08-17-2007, 10: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
08-18-2007, 06: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
08-20-2007, 08: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