Welcome to WebmasterWorld Guest from 54.145.174.178

Forum Moderators: not2easy

Message Too Old, No Replies

spans and line-through problem.

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

5+ Year Member



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)

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



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)

5+ Year Member



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)

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



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)

5+ Year Member



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)

10+ Year Member



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

That would be the semantically correct way to do it.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month