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]
