homepage Welcome to WebmasterWorld Guest from 54.226.168.96
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
spans and line-through problem.
apostrophe




msg:3240052
 10:00 pm on Feb 1, 2007 (gmt 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]

 

Fotiman




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

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.

apostrophe




msg:3240085
 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]

Fotiman




msg:3240092
 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).

apostrophe




msg:3240127
 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!

mep00




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

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

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved