homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
spans and line-through problem.
apostrophe

5+ Year Member



 
Msg#: 3240050 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3240050 posted 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

5+ Year Member



 
Msg#: 3240050 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3240050 posted 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

5+ Year Member



 
Msg#: 3240050 posted 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

10+ Year Member



 
Msg#: 3240050 posted 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.
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