Multiple selectors, yet only one takes the attributes.

I would think it's a code slip-up.... but don't see anything

[PatrickKerby]

I have never run into a problem like this, nor seen it mentioned before, so I'm fairly confident there has to be an error in my code.
I've looked it over a number of times, It validates, etc.

Thanks ahead of time if anyone has any suggestions!

The Problem:
I have a list of attributes that are to be applied to a number of different pages. However, only the last stated selector will accept the rules. In this case, only the page with div#content_main.about_us will take the rules.

The Code
div#content_main.product, div#content_main.employment, div#content_main.outside_sales, div#content_main.inside_sales, div#content_main.graphic_design, div#content_main.server_administrator, div#content_main.web_development, div#content_main.multimedia_developer, div#content_main.contact_us, div#content_main.products_services, div#content_main.about_city, div#content_main.about_us {
width: 768px;
height: auto;
left: 0;
top: 0;
margin: 0 0 8px 0;
border: solid #818181;
border-width: 1px 0;
background-image: url(topborder.gif);
background-repeat: repeat-x;
background-position: top;
}

Sorry, I forgot to mention:
FF doesn't seem to have the problem. It is in only IE6.

[Setek]

Are the .product, .employment, .outside_sales etc classes within div#content_main?

In which case, you should have a space between- div#content_main .product, div#content_main .employment etc.

If your divs' IDs are just content_main.product, content_main.employment etc you may run into problems because a period (.) indicates a class.

Unless I'm not understanding correctly :)

[PatrickKerby]

yeah.. It's a little complicated as I'm trying to be as specific as possible due to the enormous size of the site.

There is a div with an id of #content_main

this div occurs on every page on the entire site, however each div also has a class, to allow unique stylings.

I'm thinking my syntax may be wrong?

Essentially I need every #content_main div with the stated classes to have those attributes applied. hopefully without having to repeat the attributes 12 times.

[Setek]

Yes, you should have it separate.

div#parent div#content_main { }
div#parent .employment { }

so when you have:

<div id="parent">
<div id="content_main" class="employment">
asdf
</div>
</div>

It should read correctly.

[bedlam]

Yes, you should have it separate.

Sorry, this is wrong. There's nothing at all wrong with this syntax in css, though it does have a different meaning that what you provided by way of example (what you're talking about are descendant selectors [w3.org]). According to the w3c [w3.org], a css declaration like "p.foo.bar { ... }" will match '<p class="foo bar">', but not '<p class="foo">' or '<p class="bar">' (or, for that matter, '<p class="foo">Lorem ipsum <a href="#" class="bar">dolor</a>.</p>).

You won't want to hear this PatrickKerby, but it doesn't work in IE6 because IE6 doesn't support that sort of selector properly. See cEM's post (msg #4) in this recent thread [webmasterworld.com].

-B

[Setek]

*laughs* Cool I didn't know :)

Still, something that doesn't work in IE 6 might as well not work at all - and to solve the problem you'd just have to separate them.

[PatrickKerby]

Thanks for the helpful replies and links.

I know I've used this elsewhere and *thought* it worked... so I best look back for problems!

thanks again

[PatrickKerby]

Sorry to bring this up again, but after much too long, I am getting to the point of confusing myself, and becoming very frustrated!

Just to re-state my position.

i have pages w, x, y, and z.

page w has:
<div id="content_main"></div>

page x has:
<div id="content_main" class="x"></div>

page y has:
<div id="content_main" class="y"></div>

page z has:
<div id="content_main" class="z"></div>

I want the pages to have the following css:

#content_main { width: 400px; } *note this one is different.
#content_main.x { width: 768px; }
#content_main.y { width: 768px; }
#content_main.z { width: 768px; }

My biggest confusion currently lies in the fact that IE6, will render pages w and x as intended, however y and z take on the css of w.

Furthermore, if I have the CSS like this:

#content_main {
width: 400px;
}
#content_main.x, #content_main.y, #content_main.z {
width: 768px;
}

then it is page z that will take the width of 768px, and x and y will revert back to the 400px.

[rjohara]

Just an off the cuff response, and so probably not very useful: Is this some odd specificity problem? Having an element with an ID attribute that is then assigned to a class seems very odd to me. (But then I almost never use IDs.)

Why can't you make it much simpler:

page w:
<div class="contain-main">

pages x, y, z:
<div class="content-main-wide">

Or just use multiple classes:

page w:
<div class="content">

page x, y, z:
<div class="content wide">

[bedlam]

Sorry to bring this up again, but after much too long, I am getting to the point of confusing myself, and becoming very frustrated!

Is this some odd specificity problem?

What's the difficulty here? I quote what I said in msg 5:

it doesn't work in IE6 because IE6 doesn't support that sort of selector properly.

-B

[PatrickKerby]

If this selector type is not supported by IE, any idea what is the reasoning for IE taking the css for page x, but not the others?

I'm just trying to get a clearer understanding on what it is that is not supported... as The links provided seemed to deal with a slightly different issue than this.

Is it the fact that I'm writing like this?: div#content_main.x

because I can do this, and have IE understand it... It is not until I try the same selector type, but with a different class that I face problems.

[bedlam]

I'm just trying to get a clearer understanding on what it is that is not supported... as The links provided seemed to deal with a slightly different issue than this.

As far as I can tell from your code & description, the link in msg 5 deals with exactly this bug, cEM offers as good an explanation there as any:

[when using multiple selectors] ...IE has one minor bug that effects the outcome. While IE correctly supports these multiple classes, it incorrectly applies the styles in a multiple selector block to any element on the page containing a call to last of the listed selectors.

As you can imagine, this will result in all sorts mayhem in IE if you have a number of complex multiple-class selectors, single class selectors etc.

because I can do this, and have IE understand it... It is not until I try the same selector type, but with a different class that I face problems.

I suspect you're mistaken in this. What I'd do to test it is to modify your original css like this:

#content_main { width: 400px; background:#f30; } *note this one is different.
#content_main.x { width: 768px; background:#f60; }
#content_main.y { width: 768px; background:#f90; }
#content_main.z { width: 768px; background:#fc0; }

In theory, this should make each of your combos unique to certain situations, I think you'll see that that's not what actually happens...

-B

<added>
By the way, one working, cross-browser solution to this problem (judging by the code of yours that I've copied above) is to use descendant selectors [w3.org].

You're applying properties to a unique element "content_main", based on the addition of a class to it, right? But since ids are unique to any given document, you must be writing the different styles for different pages. So, if you can add a class or id to the body element (or any other parent of "content_main"), you can still apply different styles for different situations.

For example:

#content_main { width: 500px; } /* The default situation */
body#x #content_main { width: 600px; } /* In pages with <body id="x"> */
body#y #content_main { width: 700px; } /* In pages with <body id="y"> */
body#z #content_main { width: 800px; } /* In pages with <body id="z"> */
</added>

[PatrickKerby]

#content_main { width: 400px; background:#f30; }
#content_main.x { width: 768px; background:#f60; }
#content_main.y { width: 768px; background:#f90; }
#content_main.z { width: 768px; background:#fc0; }

when testing this CSS, as with my original test, I found that #content_main.x DOES take a width of 768px; and a background of #f60. whereas the following revert back to the default (400px, #f30).

I guess this is where I had mistakenly assumed that it was working for me before, due to the fact that #content_main.x worked as intended.

But anyways, why further discuss a bug, when I've got a solution! Thanks Bedlam for all your help, I'll see what I can do with parent classes. (I have them... but not sure if they're specific enough - and due to the painful way this project is going, I'm not able to have the xhtml changed for a few days. bah)

thanks again for the explanations

Patrick