By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,812 Members | 1,288 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,812 IT Pros & Developers. It's quick & easy.

Overriding text-decoration in descendant inlines

P: n/a
What I want:

<p style="text-decoration: line-through">
Stricken
<span style="text-decoration: none">not stricken</span>
</p>

, where "Stricken " should be the only thing that is lined through.

According to CSS2.1, this does not work (and all browsers I tested draw
a line through the complete text of <p>).

How do I override the text-decoration value on the paragraph with a
different value (='none') partially in the flow content, here: the
<span> element?

Regards, Christian.

--
Christian Roth
Email: roth (at) visualclick (dot) de
Mac.Java.Pasta.Sopranosax.Single.
Jul 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
saz
In article <1g*********************************@visualclick.d e>, roth-
ne****@visualclick.de says...
What I want:

<p style="text-decoration: line-through">
Stricken
<span style="text-decoration: none">not stricken</span>
</p>

, where "Stricken " should be the only thing that is lined through.

According to CSS2.1, this does not work (and all browsers I tested draw
a line through the complete text of <p>).

How do I override the text-decoration value on the paragraph with a
different value (='none') partially in the flow content, here: the
<span> element?

Regards, Christian.


Here is the proper way to do this:

<p>
<span style="text-decoration: line-through">Stricken</span>
<span style="text-decoration: none">not stricken</span>
</p>
Jul 21 '05 #2

P: n/a
On Tue, 7 Dec 2004 23:25:21 +0100, ro*********@visualclick.de (Christian
Roth) wrote:
What I want:

<p style="text-decoration: line-through">
Stricken
<span style="text-decoration: none">not stricken</span>
</p>

, where "Stricken " should be the only thing that is lined through.

According to CSS2.1, this does not work (and all browsers I tested draw
a line through the complete text of <p>).

How do I override the text-decoration value on the paragraph with a
different value (='none') partially in the flow content, here: the
<span> element?


Seems to me that what you really want is to mark some text as deleted,
why not use the correct markup for that at first? and then go on to
style that part as you want it to show up as deleted text.

<p><del class="deleted-text">Stricken</del>
not stricken</p>

.deleted-text {
visibility:visible; /* for safety against UA stylesheets */
display:inline; /* may not be needed, but for safety still */
text-decoration:line-through;
}

--
Rex
Jul 21 '05 #3

P: n/a
Jan Roland Eriksson <jr****@newsguy.com> wrote:
What I want:

<p style="text-decoration: line-through">
Stricken
<span style="text-decoration: none">not stricken</span>
</p>

, where "Stricken " should be the only thing that is lined through.
[...] Seems to me that what you really want is to mark some text as deleted,
why not use the correct markup for that at first? and then go on to
style that part as you want it to show up as deleted text.

<p><del class="deleted-text">Stricken</del>
not stricken</p>

.deleted-text {
visibility:visible; /* for safety against UA stylesheets */
display:inline; /* may not be needed, but for safety still */
text-decoration:line-through;
}


Thanks Jan, I think I (over-)simplified my question, leaving out details
I thought would distract. Actually, I have no control over the markup,
and the style on <p> is a class and not a local override:

<par class="decoratedtext">
Stricken
<span style="text-decoration: none">not stricken</span>
</p>

Also, line-through was just an example, it could have been underline or
overline or whatever. The question is if I can create somehow a
"negative-logic" on the text-decoration property, i.e. have it say "turn
off any decoration for this span-ned inline block". But I think I can't.

The only thing I could do is add an additional 'style' attribute on the
<p>, but it does not actually help: Even if I made this a
"text-decoration: none", I have no hook to turn the decoration on for
the "Stricken" content (i.e. there is no surrounding explicit element).

Regards, Christian.
--
Christian Roth
Email: roth (at) visualclick (dot) de
Mac.Java.Pasta.Sopranosax.Single.
Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.