this code works in FF but no IE. any workarounds?

// CSS
.red
  {
    background:red;
  }

.yellow
  {
    background:yellow;
  }

.red.yellow
  {
    background:purple;
  }

// HTML
<table border=1>
<tr class="red"><td>red</td></tr>
<tr class="yellow"><td>yellow</td></tr>
<tr class="red yellow"><td>red yellow</td></tr>
</table>

3/11/2006 8:55:30 PM

why not just make it

.purple

and wouldn't the more correct definition be

background-color: purple;

?

3/11/2006 9:00:03 PM

Don't try to program with csc. If you want to have a dynamic shit like that, consider making your css file a php script.

3/11/2006 9:03:08 PM

isn't that was css was designed for?

3/11/2006 9:04:11 PM

No. The only "dynamic" thing about css is that it allows you to dynamically switch between static things. You need to add another layer if you want to dynamically switch between dynamic things.


^^^^ also, those styles are stupid styles to have. You are gaining no higher level abstract from that. What if you want to change all red elements to blue? You are either going to have to change all your html pages or change your style definition to

.red { background: blue; }

It's better to have a higher level abstraction such as .heading { red }

[Edited on March 11, 2006 at 9:08 PM. Reason : sdf]

3/11/2006 9:08:23 PM

the example i gave was just to simplify what i was asking. here's a better example.

.good
  {
    background:#FF0000;
  }

.bad
  {
    background:#66CCFF;
  }

.good.modify
  {
    text-decoration:line-through;
  }

.bad.modify
  {
    text-decoration:underline;
  }


<table border=1>
<tr class="good"><td>good</td></tr>
<tr class="bad"><td>bad</td></tr>
<tr class="good modify"><td>good modify</td></tr>
<tr class="bad modify"><td>bad modify</td></tr>
</table>

3/11/2006 9:19:33 PM

google seems to indicate that IE just straight up doesn't handle mutliple classes well. even though it's ugly, i think i might just do something like

.good
  {
    background:#FF0000;
  }

.bad
  {
    background:#66CCFF;
  }

.good.modifygood
  {
    text-decoration:line-through;
  }

.bad.modifybad
  {
    text-decoration:underline;
  }

3/11/2006 9:35:28 PM

oh, well the answer is that IE is more finicky than a woman. You might try to put spaces between your class selectors (.bad .modify {})?

3/11/2006 9:35:44 PM

.bad .modify (with the space) indicates that the element with class=modify is a child of the element with class=bad

<tr class="bad"><td class="modify">bad modify</td></tr>

with .bad.modify there is no inheritance notion. it will apply only to elements that have class="bad" AND class="modify", ie class="bad modify". think of it more like div.modify would only apply to <div class="modify"> but not <div> or <p class="modify>

[Edited on March 11, 2006 at 9:45 PM. Reason : _]

3/11/2006 9:44:07 PM

The answer is because you are using a previously defined class as a modifying class.

if you used

.red
.yellow
.red.purple

it would work

using

.red.yellow

overrides red with the previously defined .yellow class. This can come in handy, but in your case it results in unexpected behavior.

Lowjack, you are a fucking idiot. There are TONS of reasons to use this functionality, and even more to use stylesheets instead of serverside scripting for layout.

qntmfred: It works fine in IE, you just can't reuse class names as modifiers.

3/11/2006 9:50:28 PM

Quote :

"using .red.yellow overrides red with the previously defined .yellow class"

can you explain this in the context of my other example?

3/11/2006 9:59:09 PM

you're other example works fine in IE and Firefox

oh oh oh.

Because, even though you are defining each one as a child class to the main, all classes in css are global in scope.

so .modify is the same as .red.modify is the same as .blue.modify

each class is defined by its name in a global context.

[Edited on March 11, 2006 at 10:20 PM. Reason : .]

3/11/2006 10:19:24 PM

Quote :

"all classes in css are global in scope. so .modify is the same as .red.modify is the same as .blue.modify"

as implemented by IE or in general? FF distinguishes between my .red.modify and .blue.modify

3/11/2006 10:55:12 PM

Quote :

" Lowjack, you are a fucking idiot. There are TONS of reasons to use this functionality, and even more to use stylesheets instead of serverside scripting for layout."

And there are TONS of reasons for you to read above a 3rd grade level.

1. I never said he shouldn't use css or multiple classes.
2. I never said that server side scripting should replace css.
3. Where the hell did I argue that server side scripting should replace css for layout?

Before you start hyperventilating because you think someone is challenging your expertise as a web monkey, take a deep breath and understand that not every tool can be used for every situation. There are some things that CSS can't do, so it's better to augment css with server side scripting.

The original poster's example made it look like he wanted to be able to arbitrarily generate the correct color by combining two colors. That's definitely better done server side that creating a bunch of css styles for that.

I'm sorry if I hurt your TWW feelings, though. I know your ego depends a lot on your tech talk posts.

[Edited on March 11, 2006 at 11:13 PM. Reason : sdf]

3/11/2006 11:13:22 PM

every comment you've made in this thread has been wrong and completely off topic to boot. Had you taken the time to read his original post as to what he was asking about, you'd understand that the naming of the classes was completely arbitrary.

that's my point, looks like I got someone in a hissy fit about it

^^ I honestly don't know which one is "standard" as it pertains to the spec. But I've ALWAYS assumed that all css declarations are global, because I've never been able to count on the other way around.

[Edited on March 12, 2006 at 2:01 AM. Reason : .]

3/12/2006 1:58:54 AM