My menu again...

Ok, so I've used the suggestion I got earlier.

<div class="menu level0 haschildren active">Front page</div>

.menu.level0.haschildren.active { ... }

This doesn't work in IE, of course - so how would you solve the above in IE?
I.e. how do you assign multiple selectors to one object and then assign a style
to any given combination of said selectors? I can't find any good reference on
the above technique, and all selector grouping all deals with E > F, E + F and
stuff like that, not the above.

I tried

<div class='menu' level='level0' ...>

DIV[class=menu][level=level0] { ... }

And that worked in Safari, but not IE. It's a real shame that IE is what we
have to design for for our clients, but that's the harsch reality, so one need
to find workarounds all the time.

Any suggestions on how to solve the above?

The menu can be found on

<http://dev4.eklundh.com>

and the stylesheet at

<http://dev4.eklundh.com/include/styles.css>

--
Sandman[.net]

div class="menu level0 haschildren active">Front page</div

Correct.

.menu.level0.haschildren.active { ... }

You should use:

..menu, .level0, .haschildren, .active { ... }

Note the commas.
HTH,

Nick.

In article <eEGYc.13515$D7.6868 (AT) news-server (DOT) bigpond.net.au>,
"e n | c k m a" <bob (AT) marley (DOT) com> wrote:

div class="menu level0 haschildren active">Front page</div

Correct.

.menu.level0.haschildren.active { ... }

You should use:

.menu, .level0, .haschildren, .active { ... }

Note the commas.

Uhm, that's not right. You use commas to group classes, such as:

.foo { color: red; }
.bar { color: red; }
.rab { color: red; }

Equals:

.foo, .bar, .rab { color: red; }

And you use spaces when you declare their relation:

.foo { color: red; }
.foo .bar { color: green; }
.bar { color: yellow; }

Produces:

<span class='foo'>This is red <span class='bar'>This is green</span></span>
<span class='bar'>This is yellow</span>

But what I want to do is creating specific matching groups. I want to use
keywords in a selector and tie styles to combinations to them, as a typical
menu would require.

So, the menu would typically look like this:

Front page
Sub page
Sub page 2

And it's hiearchical, so it actually looks like this:

Front page
Sub page
Sub page 2

Oh, and "Front page" should have a specific look if has children, and each
should have different apparence depending on what level of the hierarchy they
are found. So, the keywords above would be:

Front page level0 active haschildren
Sub page level1 inactive nochildren
Sub page 2 level1 active nochildren

This would mean that "Sub page 2" is the active menu (and that means that the
'Front page' part is active as well. So I want to apply a specific rule to this
specific state of the menu. The CSS2.1 specification says:

"For example, the following rule matches any P element whose "class"
attribute has been assigned a list of space-separated values that includes
"pastoral" and "marine":

p.pastoral.marine { color: green }

This rule matches when class="pastoral blue aqua marine" but does not match
for class="pastoral blue"."

And this is exactly what I want to do - and it works perfectly in Safari for
Mac, but breaks horribly in IE for PC (as most CSS-related stuff do).

Which is why I am asking here if there is any way to achieve the same result as
the CSS2.1 specs specify with IE?

--
Sandman[.net]

Uhm, that's not right. You use commas to group classes, such as:

.foo { color: red; }
.bar { color: red; }
.rab { color: red; }

Equals:

.foo, .bar, .rab { color: red; }

You're right, sorry - I misunderstood what you were asking.

p.pastoral.marine { color: green }

This rule matches when class="pastoral blue aqua marine" but does not
match
for class="pastoral blue"."

And this is exactly what I want to do - and it works perfectly in Safari
for
Mac, but breaks horribly in IE for PC (as most CSS-related stuff do).

Actually, it works in IE - I just checked. Either what you're trying to
achieve is different or you're doing it wrong somehow.

Which is why I am asking here if there is any way to achieve the same
result as
the CSS2.1 specs specify with IE?

Still not entirely sure what you're trying to do [sorry! i'm pretty tired
right now, maybe someone else can help]. Try using less classes though, it's
more elegant to say:

#menu ul {...}
#menu li { ... }

and then maybe start introducing the nested classes.

#menu li .subPage { ... }
#menu li .active { ... }
#menu li .inactive { ... }

<div id="menu">
<ul>
<li class="active">...</li>
<li>
<ul>
<li class="subPage inactive">...</li>
</ul>
</li>
</ul>
</div>

Anyway, muck around with it - I'm sure the answer is out there. It should
work quite easily on all browsers, though. Perhaps you're trying to make it
more complicated than it is?

HTH somehow...

Nick.

In article <NUOYc.13746$D7.2872 (AT) news-server (DOT) bigpond.net.au>,
"e n | c k m a" <bob (AT) marley (DOT) com> wrote:

p.pastoral.marine { color: green }

This rule matches when class="pastoral blue aqua marine" but does not
match for class="pastoral blue"."

And this is exactly what I want to do - and it works perfectly in Safari
for Mac, but breaks horribly in IE for PC (as most CSS-related stuff do).

Actually, it works in IE - I just checked. Either what you're trying to
achieve is different or you're doing it wrong somehow.

No, it doesn't work. Look at:

http://www.sandman.net/test_plain.php

Look at the source.

.foo.bar.rab { color: green; }
.oof.bar.rab { color: red; }

<li><span class="bar foo rab null">This is supposed to be green</span>
<li><span class="bar oof rab null">This is supposed to be red</span>

In Safari, this works like a charm, but in IE - both are red, since "bar foo
rab null" somehow actually matches the declaration for ".foo.bar.rab"

Which is why I am asking here if there is any way to achieve the same
result as
the CSS2.1 specs specify with IE?

Still not entirely sure what you're trying to do [sorry! i'm pretty tired
right now, maybe someone else can help]. Try using less classes though, it's
more elegant to say:

My original post outlined it quite good I think. I want to assign several
selectors to a given item and then apply styles to specific combinations of
those selectors. A menu item can have any of these selectors: active/inactive,
haschildren/nochildren, level#

So, if I want an active submenu that has children to have a small arrow and be
green, I might use this:

.active.level2.haschildren { background-image: url(arrow.gif); color: green; }

But when a top-level menu is active and has children, I'll use this:

.active.level1.haschildren { background-image: url(arrow2.gif); color: red; }

And so on.

#menu ul {...}
#menu li { ... }

and then maybe start introducing the nested classes.

#menu li .subPage { ... }
#menu li .active { ... }
#menu li .inactive { ... }

div id="menu"
ul
li class="active">...</li
li
ul
li class="subPage inactive">...</li
/ul
/li
/ul
/div

I will try to do something with this, but I don't see how this will reduce the
number of classes I apply to an item from four to one.

--
Sandman[.net]