Welcome to WebmasterWorld Guest from 54.225.20.73

Forum Moderators: not2easy

Message Too Old, No Replies

spans and line-through problem.

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

New User

10+ Year Member

joined:Feb 1, 2007
posts:4
votes: 0


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

CSS:
-------------------------
/* DIFF.CSS */

/* red on light red, with strikethrough */
.remove {
color:red;
background-color:#ffcccc;
text-decoration: line-through;
}

/* black on light green */
.add {
color:black;
background-color:#ccffcc;
text-decoration: none;
}
-------------------------

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

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)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5007
votes: 21


Try changing your .add selector to be this:

.add,
.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)

New User

10+ Year Member

joined:Feb 1, 2007
posts:4
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5007
votes: 21


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)

New User

10+ Year Member

joined:Feb 1, 2007
posts:4
votes: 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)

Full Member

10+ Year Member

joined:Dec 25, 2003
posts:269
votes: 0


Try:
<del>removed</del><ins>added</ins><del>removed</del>

That would be the semantically correct way to do it.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members