homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

spans and line-through problem.

 10:00 pm on Feb 1, 2007 (gmt 0)

I am trying to do a little diff visualization, and am running into some problems.

/* DIFF.CSS */

/* red on light red, with strikethrough */
.remove {
text-decoration: line-through;

/* black on light green */
.add {
text-decoration: none;

<html><head><style type='text/css'>@import 'diff.css';</style></head>
<span class='remove'> removed <span class='add'> added </span> removed </span><br>

I would like the middle section to be green and have no lines through it, but on IE6/WIN2000 it is green with a red line through it. Firefox displays the same thing. Do you have any suggestions on how to achieve this type of look with nested spans? Perhaps I'm not understanding cascading/inheritance/precedence correctly... Maybe another approach would be better? Thanks in advance.

[edited by: apostrophe at 10:02 pm (utc) on Feb. 1, 2007]



 10:21 pm on Feb 1, 2007 (gmt 0)

Try changing your .add selector to be this:

.remove .add {

In other words, for both .add elements and .add elements that appear within .remove elements.


 10:21 pm on Feb 1, 2007 (gmt 0)

Apparently I need to unnest the spans. Although I would prefer an approach that would allow the spans to be nested, it doesn't seem that this is possible.

The advice in the preceding post doesn't seem to help.

[edited by: SuzyUK at 11:15 am (utc) on Feb. 2, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]


 10:27 pm on Feb 1, 2007 (gmt 0)

I'm really surprised that didn't work. I'm not sure what the issue is (though I think semantically speaking, un-nesting the spans probably makes more sense anyway).


 10:59 pm on Feb 1, 2007 (gmt 0)

It looks like I will have to use the unnesting approach for now. Thanks for the quick advice though!


 4:59 am on Feb 2, 2007 (gmt 0)


That would be the semantically correct way to do it.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved